ywork2020.com

Title

要素名でHTMLCollectionを取得する

目次 (INDEX)

getElementsByTagNameとは

ここで説明するgetElementsByTagName とは次の語句からなるjavascriptのメソッドです。
get
読み: ゲット
意味: 取得する
element
読み: エレメント
意味: 要素
by
読み: バイ
意味: 経由して
tag
読み: タグ
意味: 目印、札
name
読み: ネーム
意味: 名前

目次に戻る

getElementsByTagNameメソッドの概要

Documentオブジェクトのメソッドの一つです。 Documentオブジェクトはdocument変数、またはdocumentプロパティから参照します。

このメソッドは、引数に指定したタグ名でHTMLCollectionを取得します。 HTMLCollectionは配列風のオブジェクトであり、このリストからメソッドやプロパティを使って要素の値の追加、更新、削除などを行うことができます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

var Elements = document.getElementsByTagName(name);

目次に戻る

サンプルコードと実行結果

このサンプルでは b 要素と u 要素を配置して u 要素のみを取得してみました。 取得した u 要素は判別しやすいように背景色を変更するようにしています。

サンプルコード: CSS
<style>
	b{font-weight: normal;}
	u{text-decoration: none;}
	b, u{
		background-color: ##lightcoral;
		margin: 0.5em;
		padding: 0.5em;
	}
</style>
  • 02: b要素 (文字の太さ: 普通)
  • 03: u要素 (文字の装飾: なし)
  • 04-08: b, u要素 (背景色、マージン、パディングの設定)
サンプルコード: HTML
<body>
	<b>b要素</b> <u>u要素</u>
	<b>b要素</b> <u>u要素</u>
	<b>b要素</b> <u>u要素</u>
	<br>実行:<br>
	<input type="button" value="ボタン" onclick="evtName()">
</body>
  • 02-04: b要素とu要素 (交互に配置しています。)
  • 06: 実行ボタン (script 03:の関数を実行します。)
サンプルコード: script
<script>
	let elmU = document.getElementsByTagName("u");
	function evtName(){
		for(let i = 0; i < elmU.length; i++){
			elmU[i].style = "background-color: ##paleturquoise;";
		}
	}
</script>
  • 02: 変数に代入 (elmUにu要素のHTMLCollectionを代入します。)
  • 03-07: 関数の作成 (HTML 06:のボタンをクリックしたら実行されます。)
  • 04-06: 関数の処理 (elmUに代入されたリストの数だけ繰り返して背景色を変更します。)
実行結果:

b要素 u要素 b要素 u要素 b要素 u要素

実行:

目次に戻る

getElementsByTagNameを使用する上での要点

  1. メソッドの引数にはタグ名を文字型で与えてください。

目次に戻る