ywork2020.com

Title

属性ノードのコレクションを取得する

目次 (INDEX)

attributesとは

ここで説明するattributes とは次の語句からなるjavascriptのプロパティです。
attribute
読み: アトリビュート
意味: 属性

目次に戻る

attributesプロパティの概要

このプロパティは、要素に登録されている属性ノードをコレクションとして返します。

戻り値は配列ではなく、読み取り専用のマップ値であるためブラウザによっては違う可能性も、なくはありません。

つまり、これは読み取り専用の情報を表す文字列型の「キー」と「値」の組である以上、このプロパティから属性の値を設定することはできません。

あたなが属性の値を操作するためにはDocumentオブジェクトのget系やquery系メソッドを使い、 生きた要素の参照やコレクションを取得して、プロパティに設定値を代入する方法や setAttributeメソッド を使って属性値を設定する方法が考えられます。

目次に戻る

構文

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

var attrs = Element.attributes

目次に戻る

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

ここではinput要素text型に付けられた属性名と属性値を全て取得して表示するというシンプルなサンプルを見て下さい。

サンプルコード: CSS
<style>
	output{
		display: block;
		padding: 10px;
	}
</style>
サンプルコード: HTML
<body>
	<p>
		サンプルテキスト:<br>
		<input type="text" value="サンプルテキスト" id="idInText" class ="clsInText">
	</p>
	<p>
		結果:<br>
		<output id="idOutput">innerHTML</output>
	</p>
	<p>
		実行:<br>
		<input type="button" value="ボタン" onclick="evtName()">
	</p>
	<script>...</script>
</body>
サンプルコード: script
<script>
	let elmInText = document.getElementById("idInText");
	let elmOutput = document.getElementById("idOutput");
	function evtName(){
		elmOutput.innerHTML = "";
		let colAttr = elmInText.attributes;
		for(i = 0; i < colAttr.length; i++){
			elmOutput.insertAdjacentHTML(
				"beforeend",
				colAttr[i].name + " = " + 
				colAttr[i].value + "<br>"
			);
		}
	}
</script>
  • 02: 変数に要素の参照を代入 (elmInText = idInText)
  • 03: 変数に要素の参照を代入 (elmOutput = idOutput)
  • 04-14: 関数の作成 (HTML 12:のボタンがクリックされたら実行します。)
  • 05: 関数の処理 (elmOutput.innerHTMLを初期化します。)
  • 06: 関数の処理 (変数 colAttrにelmInTextの属性コレクションを代入します。)
  • 07-13: 関数の処理 (colAttrのコレクション数だけ繰り返し処理をします。)
  • 08-12: 関数の処理 (elmOutputのコンテンツにcolAttrの属性名と属性値を挿入します。)
実行結果:

サンプルテキスト:

結果:
innerHTML

実行:

目次に戻る

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

ここでは複数のem要素に付けられている属性を全て出力してみます。

サンプルコード: CSS
<style>
	em{
		display: block;
		padding: 10px;
	}
</style>
サンプルコード: HTML
<body>
	<em id="idEm0" class ="clsEm" style="background-color: ##lightpink;">em0</em>
	<em id="idEm1" class ="clsEm" style="background-color: ##lightgreen;">em1</em>
	<em id="idEm2" class ="clsEm" style="background-color: ##lightblue;">em2</em>
	<p>
		実行:<br>
		<input type="button" value="ボタン" onclick="evtName()" id="idButton">
	</p>
	<script>...</script>
</body>
サンプルコード: script
<script>
	let elmEm = document.getElementsByTagName("em");
	let elmButton = document.getElementById("idButton");
	function evtName(){
		let colAttrs = [];
		for(let j = 0; j < elmEm.length; j++){
			for(let i = 0; i < elmEm[j].attributes.length; i++){
				colAttrs = elmEm[j].attributes;
				elmEm[j].insertAdjacentHTML(
					"beforeend",
					"<br>" +
					colAttrs[i].name + " = " + 
					colAttrs[i].value
				);
			}
		}
		elmButton.disabled = true;
	}
</script>
  • 02: 変数にHTMLCollectionを代入 (em要素の要素コレクションです。)
  • 03: 変数に実行ボタンの参照を代入 (識別子:idButtonの要素を参照します。)
  • 04-18: 関数の作成 (evtName()という名前の関数を作成します。)
  • 05: 変数の作成 (属性コレクションを一時保管するための変数です。)
  • 06-16: 繰り返し処理1 (02:で取得したem要素の数だけ繰り返しします。)
  • 07-15: 繰り返し処理2 (02:で取得したem要素の配列から順番に属性の数だけ繰り返します。)
  • 08: 属性コレクションの取得 (02:で取得したem要素の配列から属性コレクションを変数に代入します。)
  • 09-14: 結果の出力 (各、em要素のコンテンツに属性名と属性値を挿入出力します。)
  • 17: 実行ボタンの無効化 (実行ボタンを無効化します。1回のみの実行とするためです。)
実行結果:
em0 em1 em2

実行:

目次に戻る