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が決まるって感じ?ややこしい気がするな。