SYNCERのロゴ
アイキャッチ画像

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>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
9+
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年10月7日 (土)
コンテンツを公開しました。