「改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで」を読んでいる④

6章まで読んだ。知らない文法だけメモ。DOMの操作はリファレンス的なところはざっくり読んだ。

「改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで」を読んでいる① - チョキチョキかにさん

「改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで」を読んでいる② - チョキチョキかにさん

「改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで」を読んでいる③ - チョキチョキかにさん

HTMLCollectionの操作

document.getElementsByTagの結果はHTMLCollectionであり、これは生きており、条件にマッチするエレメントが増えたり減ったりしたとき、コレクションの内容がリアルアイムに変わることを意味する。

https://developer.mozilla.org/ja/docs/Web/API/HTMLCollection

<ul id="a">
<li>aaa</li>
<li>bbb</li>
</ul>

<ul id="b">
</ul>
let a = document.getElementById("a");
let b = document.getElementById("b");
let lis = document.getElementsByTagName("li");

for(var i = 0; i < lis.length; i++){
  var item = lis.item(i);
  var li = document.createElement("li");
  var text = document.createTextNode(item.textContent);
  li.appendChild(text);
  b.appendChild(li);
}

このコードが無限ループするのは、bにliを追加すると、追加した要素もdocument.getElementsByTagName("li")の条件にマッチするので要素数が増えてしまうため。 document.querySelectrAllで返ってくるNodeListは静的なのでこの動作がない。NodeListが静的というわけではなく、querySelectorAllだとそう、という話。

EventListnerのthis

EventListnerのコールバックのthisは呼び出し元のelementn参照となる。Functionオブジェクトのbindメソッドを使うと、その関数内でのthisを後から設定できる。

EventListnerにコールバックではなくEventListnerオブジェクトを指定した場合はオブジェクト自体のthisとなるので、オブジェクトに定義したhandleEventメソッドからはそのオブジェクトのフィールドを参照できる。

アロー関数によるthisの束縛についてはこれがわかりやすい。 https://qiita.com/mejileben/items/69e5facdb60781927929 雑にいうと呼び出され方やなにに呼び出されたかを意識せず、宣言時のスコープでthisが決まるって感じ?ややこしい気がするな。