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>