要素の探索

ドキュメント内の要素(Element)はツリー構造になっています。
このツリー構造の要素を探索する方法を試してみます。

実際に下記のHTMLファイルを作成し、サーバに設置してみました。
サンプル画面

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
</head>
<body>

<div id="test1">
	<div id="test1_1">
		a
	</div>
	<div id="test1_2">
		b

		<div id="test1_2_1">
			b1
		</div>
		<div id="test1_2_2">
			b2
		</div>

		<div id="test2_2_1">
			id_b1
		</div>
		<div id="test2_2_2">
			id_b2
		</div>

	</div>
	<div id="test1_3">
		b
	</div>
</div>

<script type="text/javascript">

	let test1_2_1 = document.getElementById("test1_2_1");

	// オブジェクトの内容を確認する
	for(var key in test1_2_1){
		console.log(key + " : " + test1_2_1[key]);
	}

	console.log("test1_2_1 -> " + test1_2_1);
	console.log("test1_2_1.parentNode -> " + test1_2_1.parentNode);
	console.log("test1_2_1.parentElement -> " + test1_2_1.parentElement);


</script>

</body>
</html>

上記のHTMLソースには「id=”test1″」のdivタグ内にネストされた形で

「id=”test1_1″」
「id=”test1_2″」
「id=”test1_3″」

のdivタグがそれぞれあります。

この状態でツリー構造の要素を取得する方法を試してみます。
具体的には以下の要素取得のコードを書いてみます。

parentNodeによる探索

要素の「test1_2_1」に対して、「parentNode」を使って親要素を取得してみます。
以下のように取得のtest1_2_1を取得し、取得した要素に.parentNodeを使って親要素を取得してみます。

	let test1_2_1 = document.getElementById("test1_2_1");
	console.log("test1_2_1.parentNode -> " + test1_2_1.parentNode);

結果は、次のように出力されます。

test1_2_1 -> [object HTMLDivElement]
test1_2_1.parentNode -> [object HTMLDivElement]
test1_2_1.parentElement -> [object HTMLDivElement]

.parentNodeと取得しても、.parentElementと取得しても、出力内容に違いはないように見えますが、
厳密には異なる取得方法になるので、使い分けが必要です。

.parentNodeはidが「test1_2_1」の親ノードの「test1_2」のNodeを示します。

また、.parentElement については、Nodeを親に持つインターフェースで、XMLで使用されます。

要素の探索

parentNodeによる探索

コメントを残す