2014年09月13日

JavaScript : コントロールの参照

以下のテストは、コントロールの参照方法のバリエーションのテストです。

document.getElementById("id")

コントロールを ID 属性で参照します。対象は必ず1つしか無い事を前提として用います。

document.getElementsByName("name")

結果はコレクションである事が前提なので、FORM 内の 入力フィールドを参照する場合は、[n] を使って、配列のように扱って参照します。

例)
document.getElementsByName("right")[0].style.backgroundColor = "skyblue"

document.getElementsByTagName("tagName")

結果はコレクションである事が前提で、当然複数の要素が対象です。ページ全体に影響するアクセスとなりますので注意が必要です。このメソッドは、要素でも使用可能で、特定の要素の子孫内を探す事ができます。

例)
var div2 = document.getElementById("div2")
var div2Paras = div2.getElementsByTagName("p");

▼ 以下のメソッドは、getElementsByTagName と同様に、特定の要素の子孫を対象にできます

document.getElementsByClassName("tagName")

結果はコレクションである事が前提で、一番アプリケーションとして有用なグループ処理となります。

document.querySelectorAll("セレクタ")

セレクタで示された対象を取得します。最も強力で有用なメソッドです。

MDN 参照

getElementsByClassName
element.querySelectorAll


▼ 実際の実行





<style>
#test_unit div {
	padding: 5px;
	border: solid 1px #000;
	margin: 3px;
	display: inline-table;
}
#test_unit div input {
	width: 60px;
}
</style>
<input type="button"
	value="ID"
	onclick='document.getElementById("center").style.backgroundColor = "pink"'>

<input type="button"
	value="NAME 0"
	onclick='document.getElementsByName("right")[0].style.backgroundColor = "skyblue"'>

<input type="button"
	value="NAME all"
	onclick='
		target = document.getElementsByName("left");
		for( i = 0; i < target.length; i++ ) {
			target[i].style.backgroundColor = "khaki";
		}
	'>

<input type="button"
	value="CLASS all"
	onclick='
		target = document.getElementsByClassName("p2");
		for( i = 0; i < target.length; i++ ) {
			target[i].style.backgroundColor = "lightsalmon";
		}
	'>

<input type="button"
	value="TAG all"
	onclick='
		target = document.getElementsByTagName("input");
		for( i = 0; i < target.length; i++ ) {
			target[i].style.backgroundColor = "palegreen";
		}
	'>

<br>

<div id="test_unit">
<div class="p1">
	<input name="left">
</div>
<div class="p1">
	<input name="middle">
</div>
<div class="p1">
	<input name="right">
</div>
<br>

<div class="p2">
  <input name="left">
</div>
<div id="center" class="p2">
	<input name="middle">
</div>
<div class="p2">
	<input name="right">
</div>
<br>

<div class="p3">
	<input name="left">
</div>
<div class="p3">
	<input name="middle">
</div>
<div class="p3">
	<input name="right">
</div>
</div>
<input type="button"
	value="clear"
	onclick='
		target = document.getElementsByTagName("input");
		for( i = 0; i < target.length; i++ ) {
			if ( (target[i].type).toLowerCase() == "button" ) {
				target[i].style.backgroundColor = "#c0c0c0";
			}
			else {
				target[i].style.backgroundColor = "#ffffff";
			}
		}

		target_sel = document.querySelectorAll("#test_unit div");
		for( i = 0; i < target_sel.length; i++ ) {
			target_sel[i].style.backgroundColor = "#ffffff";
		}

	'>
コントロールのスタイル(CSS) のプロパティにアクセスする場合、通常 CSS でハイフン(-) で表現されているワードの区切りですが( 例: background-color )、JavaScript では、そのかわりにハイフンを取り除いてワードの先頭を大文字で記述します( 例: backgroundColor )



posted by at 2014-09-13 14:30 | JavaScript | このブログの読者になる | 更新情報をチェックする