要素の探索
ドキュメント内の要素(Element)はツリー構造になっています。
このツリー構造の要素を探索する方法を試してみます。
実際に下記のHTMLファイルを作成し、サーバに設置してみました。
サンプル画面
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!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を使って親要素を取得してみます。
1 2 | let test1_2_1 = document.getElementById("test1_2_1");console.log("test1_2_1.parentNode -> " + test1_2_1.parentNode); |
結果は、次のように出力されます。
1 2 3 | 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で使用されます。