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

Question

単純なことが原因なのかと思いますが、
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>

Answer 1

getElementsByClassName

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

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

• 3.5. インタフェース Document - DOM Standard 日本語訳
• 3.9. インタフェース Element - DOM Standard 日本語訳
• 3.2.10.2. インタフェース HTMLCollection - DOM Standard 日本語訳

querySelectorAll

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

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

Re: igaiga さん

Comments

[igaiga]

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

Answer 2

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

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

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

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

Comments

[igaiga]

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

[kei344]

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

[igaiga]

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