getElementsByClassName()
document.getElementsByClassName()はDOMツリー上から該当するclass属性を持つ要素を検索しHTMLCollectionを返すメソッドです。
引数にclass値を指定することで、そのclassが指定されているHTMLCollectionを返します。
以下のサンプルではclass属性に「myClass」が指定されているHTMLの集合(HTMLCollection)を取得できます。
<div class="myClass class01">myClass01</div>
<div class="myClass class02">myClass02</div>
<div class="myClass class03">myClass03</div>var classes = document.getElementsByClassName("myClass");
console.log( classes );//[div.myClass.class01, div.myClass.class02, div.myClass.class03]引数には複数のclassを指定することができます。
以下のサンプルではclass属性に「class01」と「myClass」が指定されているHTMLCollectionの取得を行います。
var classes = document.getElementsByClassName("class01 myClass");
console.log( classes );//[div.myClass.class01]getElementsByClassName()はdocumentオブジェクトに対して適応するとHTML文章全体からclass属性の検索を行いますが、DOMオブジェクトに対して適応を行うと、そのDOMオブジェクト限定で検索を行います。
以下のサンプルではgetElementById()で取得したDOMオブジェクト[#id01]内のclass属性のみが検索対象になっています。
<div id="id01"><span class="myClass class01">myClass01</span></div>
<div id="id02"><span class="myClass class02">myClass01</span></div>var target = document.getElementById("id01");
var classes = target.getElementsByClassName("myClass");
console.log( classes );//[span.myClass.class01]登録日 : 2015年10月13日 最終更新日 : 2015年10月13日