JavaScript タグ名を指定して要素ノードを取得するサンプル(getElementsByTagName)

JavaScriptのタグ名を指定して要素ノードを取得するサンプルです。
getElementsByTagNameメソッドを使用します。
要素とは、<input type="button" value="ボタン">とある場合、inputが要素です。typeとvalueは属性で、"button"と"ボタン"は属性値です。

getElementsByTagNameメソッド

  • document.getElementsByTagName('タグ名')
  • タグ名を指定して要素ノードを取得します。
  • 取得する要素ノードは複数の場合があります。
  • キーを指定して取得する方法をダイレクトアクセスといいます。
  • 以下はMDNのgetElementsByTagNameメソッドのリンクです。
    https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByTagName

サンプル

getElementsByTagNameメソッドのサンプルです。
下にあるサンプルの「あいう」と「かきく」はpタグではさまれています。
サンプルで使用しているhtmlです。→<p>あいう</p> <p>かきく</p>
「表示」ボタンを押すと、getElementsByTagNameメソッドでpタグ要素を取得してテキストに表示します。

あいう

かきく

結果:

コード

上記サンプルのコードです。
4行目は、getElementByIdメソッドで20行目を取得します。
6行目は、getElementsByTagNameの前に、4行目で取得した「d1」がついているので、20-23行目が対象になり、次にgetElementsByTagNameメソッドでpタグを指定しているので、21,22行目を取得します。
8-11行目は、取得した要素を配列に格納しています。

<script>
function btn1_click(){
	var arr1 = [];
	var d1 = document.getElementById("d1")
	// タグのpを指定
	var list1 = d1.getElementsByTagName('p');
	// ループ文で配列に格納
	for (var i=0;i<list1.length;i++){
	//	console.log(list1.item(i)); //<p>あいう</p> <p>かきく</p>
		arr1.push(list1.item(i).innerHTML);
	}
	// 値を表示
	document.getElementById("r1").innerHTML = arr1;
}
function btn2_click(){
	document.getElementById("r1").innerHTML = "";
}
</script>
<body >
<div id="d1">
	<p>あいう</p>
	<p>かきく</p>
</div>
<p>結果:<span id="r1"></span></p>
<input type="button" value="表示" onclick='btn1_click()'>
<input type="button" value="クリア" onclick='btn2_click()'>
</body>

関連の記事

JavaScript ID値を指定して要素ノードを取得するサンプル(getElementById)
JavaScript クラス名を指定して要素ノードを取得する(getElementsByClassName)
JavaScript 相対的な関係でノードを取得するサンプル(childNodes)
JavaScript 属性値を取得/設定するサンプル(getAttributeとsetAttribute)
JavaScript 要素ノードを追加/削除するサンプル(createElementとremoveChild)
JavaScript ノードを置換するサンプル(replaceChild)

 

 はまったらエンジニア特化型Q&Aサイト
【teratail(テラテイル)】で質問しましょう!


△上に戻る