Javascriptを遊び尽くしている、弓削田です。
プログラミングをしていると、何かしらの疑問が頭に浮かんでくることがあります。
実際には、そうした疑問を実践していって、体験することでプログラミングのスキルって向上するんですけどね。
個人的には、それをブログに書いて、アウトプットすることで、他の人も同じ疑問を持っている人の役に立つということで
一石二鳥をしているんですが、とにかく疑問は解消しなければならないモノです。
getElementの疑問
例えば、複雑な階層構造になっているHTMLのDOM構造で、getElementsByTagName("*")とすると、
1. どういった順番でエレメントの取得がされるのか？
2. ページロード後に追加された要素は、順番に影響するのか？
3. 一度取得したエレメントデータ配列は、どのように変更すればいいのか？
今回は、ふと浮かんだ、これらの疑問について、追求してみたいと思います。
まず、最初に、これを試すHTMLを用意しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class="d-1"></div>
<div class="d-2">
<div class="d-2-1"></div>
<div class="d-2-2"></div>
</div>
<div class="d-3"></div>
<div class="d-4">
<div class="d-4-1"></div>
<div class="d-4-2"></div>
</div>
</div>
</body>
</html>
階層の深さを同じにならないようにした、作りだされた複雑DOMのつもりです。
階層がわかりやすいように、class名を割り振っています。
1. どういった順番でエレメントの取得がされるのか？
まずはじめの疑問は、取得順番ですが、
これを確認するために、上記のHTMLが立ち上がっている状態のwebブラウザのjavascriptコンソールに
次のプログラムを実行してみました。
var divs = document.getElementsByTagName("div");
for(let div of divs){
console.log(div.className);
}
そして、その結果が次の通り
d-1
d-2
d-2-1
d-2-2
d-3
d-4
d-4-1
d-4-2
まあ、想像通りと言ったらそのままなんですが、
HTMLに書いてある順番に取得されるようですね。
プログラムが文字列を先頭から順番に処理をするので、当然といえば当然ですね。
2. ページロード後に追加された要素は、順番に影響するのか？
次の疑問は、HTMLに直接書き込まれていないけど、appendされた要素は、
どんな順番になるのかという疑問です。
先程の命令の前に、要素追加をする処理を追加してみました。
let d3 = document.querySelector("div.d-3");
let d3_1 = document.createElement("div");
d3_1.className = "d3-1";
d3.appendChild(d3_1);
let divs = document.getElementsByTagName("div");
for(let div of divs){
console.log(div.className);
}
結果は・・・
d-1
d-2
d-2-1
d-2-2
d-3
d3-1
d-4
d-4-1
d-4-2
これも、想像通り、適切な順番に収まってくれています。
もしこれで、別の場所に移動していたら、データの扱いが変わってしまいますからね。
3. 一度取得したエレメントデータ配列は、どのように変更すればいいのか？
最後に、取得したデータの変更という事ですが、
実験するのは、取得したあとで、データの追加を行ったら、データの中身はどうなってしまうのでしょう？
先程のプログラムでは、エレメントを追加したあとで、getElementで取得をしましたが、
最初にgetElementを行った後で、要素追加をしてみましょう。
let divs = document.getElementsByTagName("div");
let d3 = document.querySelector("div.d-3");
let d3_1 = document.createElement("div");
d3_1.className = "d3-1";
d3.appendChild(d3_1);
for(let div of divs){
console.log(div.className);
}
そして、この結果は・・・
d-1
d-2
d-2-1
d-2-2
d-3
d3-1
d-4
d-4-1
d-4-2
なんと、先程と同じなんですね。
先に取得したデータにも関わらず、要素は追加した後のデータになっています。
これで、getElementしたデータは、インスタンスデータであることが判明しますね。
スタティックデータと思って、これらの順番を入れ替えるなんて処理をしたら、トラブルになる可能性も高そうですね。
javascriptのメインの仕事であるエレメント操作は、こうやってリファレンスにあまり書かれていない理解こそが
重要なステップアップなのかも・・・というのは、持論です。
参考になった方いたら、幸いです。
