Document.getElementsByClassName() - class属性から要素を取得する
getElementsByClassName()は、Documentのメソッドです。class属性を指定して要素を取得します。
概要
- 名前
- getElementsByClassName
- 所属
- Document
- IDL
HTMLCollection getElementsByClassName(DOMString classNames);
- 仕様書
- https://dom.spec.whatwg.org/#dom-document-getelementsbyclassname
説明
引数(classNames)には、対象のclass属性を指定します。半角スペースで区切って複数の値を指定でき、その場合はAND条件となる。
返り値は、要素の集合であるHTMLCollectionです。
チュートリアル
getElementsByClassName()は、class属性を指定して要素を取得します。
<ul>
<li class="hoge">りんご</li>
<li class="hoge foo bar">みかん</li>
<li class="hoge foo">メロン</li>
<li class="hoge bar">スイカ</li>
</ul>
var elements = document.getElementsByClassName( "hoge" ) ; // HTMLCollection
elements[0] ; // <li class="hoge">りんご</li>
elements[1] ; // <li class="hoge bar foo">みかん</li>
elements[2] ; // <li class="hoge foo">メロン</li>
elements[3] ; // <li class="hoge bar">スイカ</li>
class属性は、順不同で複数指定できます。半角スペース( )で区切って下さい。複数指定した場合は、AND条件で、全てを持つ要素だけを取得します。
<ul>
<li class="hoge">りんご</li>
<li class="hoge bar foo">みかん</li>
<li class="foo hoge">メロン</li>
<li class="hoge bar">スイカ</li>
</ul>
var elements = document.getElementsByClassName( "foo hoge" ) ; // HTMLCollection
elements[0] ; // <li class="hoge foo bar">みかん</li>
elements[1] ; // <li class="foo hoge">メロン</li>
デモ
Document.getElementsByClassName()のデモです。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<ul>
<li class="hoge">りんご</li>
<li class="hoge foo bar">みかん</li>
<li class="hoge foo">メロン</li>
<li class="hoge bar">スイカ</li>
</ul>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "result" ) ;
var elements = document.getElementsByClassName( "hoge" ) ;
console.log( elements ) ;
element.textContent = elements + "\n\n" ;
element.textContent += elements[0].outerHTML + "\n" ;
element.textContent += elements[1].outerHTML + "\n" ;
element.textContent += elements[2].outerHTML + "\n" ;
element.textContent += elements[3].outerHTML + "\n" ;
</script>
</body>
</html>
サポート状況
Chrome | Firefox | Safari | Edge | IE | Opera | iOS Safari | Android |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● 9+ | ● | ● | ● |
関連記事
- class属性値を取得、変更する
- 要素のclass属性値を取得、変更、確認する方法をまとめています。
- HTMLCollection
- HTMLCollectionは、HTML要素の集合を表すオブジェクトです。Elementだけが含まれた配列であるかのように、手軽にインデックス番号でアクセスできます。
- NonElementParentNode.getElementById()
- getElementById()は、NonElementParentNodeのメソッドです。id属性を指定して要素を取得します。
- 要素の位置座標を取得する
- 指定した要素の位置座標を取得します。