Document.getElementsByTagName() - タグ名から要素を取得する
getElementsByTagName()は、Documentのメソッドです。タグ名を指定して要素を取得します。
概要
- 名前
- getElementsByTagName
- 所属
- Document
- IDL
HTMLCollection getElementsByTagName(DOMString qualifiedName);
- 仕様書
- https://dom.spec.whatwg.org/#dom-document-getelementsbytagname
説明
引数(qualifiedName)には、対象のタグ名を指定します。
返り値は、要素の集合であるHTMLCollectionです。
チュートリアル
getElementsByTagName()は、タグ名を指定して要素を取得します。
<ul>
<li>りんご</li>
<li>みかん</li>
<li>メロン</li>
<li>スイカ</li>
</ul>
var elements = document.getElementsByTagName( "li" ) ; // HTMLCollection
elements[0] ; // <li>りんご</li>
elements[1] ; // <li>みかん</li>
elements[2] ; // <li>メロン</li>
elements[3] ; // <li>スイカ</li>
デモ
Document.getElementsByTagName()のデモです。
<!-- このコードは編集できます。 -->
<!DOCTYPE html>
<html>
<head>
<style>
div#result { white-space: pre-wrap ; }
</style>
</head>
<body>
<ul>
<li>りんご</li>
<li>みかん</li>
<li>メロン</li>
<li>スイカ</li>
</ul>
<hr>
<div id="result"></div>
<script>
var element = document.getElementById( "result" ) ;
var elements = document.getElementsByTagName( "li" ) ;
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 |
---|---|---|---|---|---|---|---|
● | ● | ● | ● | ● | ● | ● | ● |
関連記事
- Document.getElementsByName()
- getElementsByName()は、Documentのメソッドです。name属性を指定してノードを取得します。
- Document.getElementsByTagNameNS()
- getElementsByTagNameNS()は、Documentのメソッドです。タグ名と名前空間を指定して要素を取得します。
- Document.images
- imagesは、Documentのプロパティです。ドキュメントの全てのimg要素を返します。
- Document.getElementsByClassName()
- getElementsByClassName()は、Documentのメソッドです。class属性を指定して要素を取得します。