質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

5326閲覧

JavaScript:getElementsByClassNameで取得範囲をしたい

igaiga

総合スコア144

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2017/04/05 05:50

単純なことが原因なのかと思いますが、
getElementsByClassNameで取得範囲を絞ろうとすると思ったように値が戻ってきませんでした。

下記のようにして、ページ内のaタグを全て取得したところ、正常に表示されます。
これを必要な箇所だけとりたいと思い、getElementsByClassName(クラス名)を追加したのですが、
何も返ってこなくなってしまいました。

お手数ですがどこが間違っているのか教えていただけないでしょうか。
よろしくお願いいたします。

###正常に取得できるコード

<script type="text/javascript"> var x = document.getElementsByTagName("a"); for(var i = 0; i < x.length; ++i){ document.write(x[i]); } </script>

###取得できないコード

<script type="text/javascript"> var x = document.getElementsByClassName(クラス名).getElementsByTagName("a"); for(var i = 0; i < x.length; ++i){ document.write(x[i]); } </script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

getElementsByClassName

JavaScript

1var x = document.getElementsByClassName(クラス名).getElementsByTagName("a");

getElementsByClassName が返す値は HTMLCollection です。
HTMLCollection には getElementsByTagName は生えていませんので、そのコードはエラーになります。
getElementsByTagName は Document.prototype.getElementsByTagName もしくは Element.prototype.getElementsByTagName に存在しますので、対象が document オブジェクトもしくは要素ノードでなければ使用できません。

querySelectorAll

Selectors API を使えば、目的の動作は達成できます。

JavaScript

1var x = document.querySelectorAll('.hoge a');

Re: igaiga さん

投稿2017/04/05 05:56

編集2017/04/05 06:05
think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

igaiga

2017/04/05 06:08

ありがとうございます。できました!
guest

0

document.getElementsByClassName(クラス名) は複数の要素を取得するので、そこから絞り込むように getElementsByTagName は使えません。

querySelectorAll で絞込みをしてしまえば一発で「.クラス名 a」を取得出来ますよ。

【document.querySelectorAll - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

JavaScript

1var matches = document.querySelectorAll( "div.lightbox, div.popup" );

投稿2017/04/05 05:56

編集2017/04/05 05:57
kei344

総合スコア69366

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

igaiga

2017/04/05 06:09

ありがとうございます。でもlightboxの後ろのカンマいらないみたいです。すみません。
kei344

2017/04/05 06:13

> 後ろのカンマいらないみたいです。すみません。 例に挙げたものであれば、リンク先の記述どおり 「文書中の、 "lightbox" または "popup" のクラス名を持つすべての div 要素のノードリストを返します。」 なので、あなたの書いている例には要りませんが必要ですよ。
igaiga

2017/04/05 06:46

またはって意味なんですね。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問