document.getElementsByClassName

« DOM リファレンス

概要

与えられたクラス名で得られる要素の集合を返します。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;
 });

仕様

WHATWG Web Applications 1.0: getElementsByClassName

Document Tags and Contributors

Contributors to this page: Potappo, ethertank
最終更新者: ethertank,