DOM:document.getElementsByClassName
出典: MDC
この記事は Firefox 3 の新機能について述べています
目次 |
[編集] 概要
与えられたクラス名で得られる要素の集合を返します。document オブジェクトで呼び出されたときは、ルートノードを含む、完全な文書が検索されます。任意の要素で getElementsByClassName を呼び出すこともできます。その場合は、与えられたクラス名を持つ指定されたルート要素下の要素だけが返ります。
[編集] Syntax
elements = document.getElementsByClassName(name) // または: elements = rootElement.getElementsByClassName(name)
-
elementsは、現在のNodeListで、要素は、それらがその文書ツリーに現れる順番に得られます。 -
nameは、要素のクラス名を表す文字列です。 - getElementsByClassName は、document だけでなく、任意の要素で呼び出すことができます。呼び出した要素が検索のルートとして使われます。
[編集] 例
'test' クラスを持っている要素の全てを得ます。
document.getElementsByClassName('test')
'red' クラスと 'test' クラスを持っている要素の全てを得ます。
document.getElementsByClassName('red test')
'main' ID を持っている要素内で、'test' クラスを持っている要素の全てを得ます。
document.getElementById('main').getElementsByClassName('test')
さらに進んで、JavaScript 1.6 の配列拡張を加えれば、真にクールなマッチを得ることができます。
'test' クラスを持っている div 要素の全てを見つけます。
Array.filter( document.getElementsByClassName('test'), function(elem){
return elem.nodeName == 'DIV';
});
'test' クラスを持っている要素の全てを見つけます（親要素も含みます）。
var test = document.getElementsByClassName('test');
Array.filter( test, function(elem){
return Array.indexOf( test, elem.parentNode ) > -1;
});