getElementsByTagNameとgetElementsByClassName

Question

MDNの「getElementsByTagNameの解説」
上記のサイトによると

'main' ID を持っている要素内で、'test' クラスを持っている要素の全てを得ます。

document.getElementById('main').getElementsByClassName('test')

getElementByIdとgetElementsByClassNameを一緒に使うことによって絞り込むことが可能なのに対し

さらに進んで、JavaScript 1.6 の配列拡張を加えれば、真にクールなマッチを得ることができます。

'test' クラスを持っている div 要素の全てを見つけます。

Array.filter( document.getElementsByClassName('test'), function(elem){

return elem.nodeName == 'DIV';
});

こちらではgetElementsByClassNameとgetElementsByTagNameを一緒には使っていません。
なぜ一緒に使えないのでしょうか？

Answer 1

getElementByIdの返り値はElementなので、それ自身が子孫要素に対する探索メソッドを持っています（セレクタで書けば、#main .testのようになります）。

後者のgetElementsByClassNameでは「Elements」と複数形になっているように、要素のリストを返します。リスト自体をさらに絞り込むような機能はないので、リストを自力で処理してなんとかするしかありません。

ただし、

1. Array.filterは「JavaScript 1.6 の配列拡張」ということで、昔のFirefox以外では使えません。代わりにArray.prototype.filter.callを使いましょう。
2. 今時のブラウザであれば、getElementsByClassNameで取ってから絞り込む、なんていう手間を掛けなくても、document.querySelectorAll('div.test')で片付きます。

Comments

[gyojin]

ありがとうございました。document.querySelectorAllなどがあるということが全く気が付きませんでした。
もしよければですが、最新のjavascriptに関していい教本になるものがあれば教えていただけたらと思います。

Answer 2

getElementsByClassNameとgetElementsByTagNameはどちらも
HTMLCollectionを返します。
HTMLCollectionにはgetElementsByClassNameやgetElementsByTagNameが
用意されているわけではないので二重(?)に絞込はできません。
またArray.filter()でやった戻り値はarrayになるので、
すでにHTMLCollectionとしての「生きている」状態ではありません。
つまり死んだ状態でいいならquerySelectorAllを利用してNodeListを
掴んだほうが処理はらくになります。

document.querySelectotAll('div.hoge')

Comments

[gyojin]

ありがとうございました。javascriptに対しての理解度が足りなかったようです。