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

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>

サポート状況

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