謎のDOMアクセス / Mysterious DOM access

Kanazawa.rb #96 で発表した資料です。 #kzrb

参考資料

- javascript - Do DOM tree elements with ids become global variables? - Stack Overflow (https://stackoverflow.com/questions/3434278/do-dom-tree-elements-with-ids-become-global-variables)
- Window - Web API | MDN (https://developer.mozilla.org/ja/docs/Web/API/Window)
- HTML Standard (https://html.spec.whatwg.org/multipage/window-object.html)
- サンプルコード (https://codepen.io/takayukiatkwsk/pen/abNvgmE)

Transcript

1. 謎のDOMアクセス / Mysterious DOM access Kanazawa.rb meetup #96 Takayuki Takagi
2. Who am I? • Takayuki Takagi (高木貴之 / ニボシーニョ) • @TAKAyuki_atkwsk / takayukiatkwsk • Freelance programmer • Working from home • Scala, Ruby, Python, AWS, Docker, etc. • Like beer and gyoza
3. 突然ですがこんなことがあった 某案件で HTML と JavaScript を触っていたとき... (※: ソースコードはサンプルです)
5. クリックすると 上の文章とセレクト ボックスが消える
8. エラーの原因 • unrecognized expression: #[object HTMLDivElement] ◦ jQuery() メソッドに渡したセレクター文字列が有効ではない ◦ hideElementById() 内では $(`#${id}`) としている ◦ id を文字列化した結果 [object HTMLDivElement] となっている ◦ id パラメーターに渡しているのは......？ ▪ onClick="hideElementById(inner)" ◦ 本来は要素を指す id 文字列を渡してほしいが、意図せずクォーテーション マークが抜けている ▪ id 文字列が渡ってくると展開後に $(‘#inner’) となって上手くいく
9. エラーの原因から疑問 • onClick="hideElementById(inner)" ◦ inner そのものが何かを参照している？？？ ▪ 定義されていない変数だとすると onClick の評価で RefferenceError が発生する ▪ グローバルスコープ ▪ (再掲) 文字列化すると [object HTMLDivElement] になるもの ▪ DOM を扱う Element オブジェクトと推測される ◦ inner はどこで定義されているのか？
10. 答え: window • window[name] で name の指す要素・要素のコレクション を返す ◦ すなわち Element オブジェクト・このコレクションを返す ◦ name には id属性の値, name属性の値(formなど)が該当 ◦ https://html.spec.whatwg.org/multipage/window-object.html#named- access-on-the-window-object ◦ ただし推奨はしていない ▪ document.getElementById() か document.querySelector() を使う
11. 答えの続き • window[‘inner’] で要素を取得できる • inner のみでアクセスできたのはなぜ？ ◦ ブラウザでは、window はグローバルオブジェクト ◦ このプロパティには window. なしでアクセスすることができる
12. まとめ • ブラウザで動作する JavaScript では HTML の id や name 属性値のみでこれらの要素にアクセスできる ◦ が、推奨はされておらず意図的に利用するのは避ける • 改めて調べてみて原理を理解できてよかった！ ◦ 遭遇したときはとりあえず動くように修正したのみだった ◦ とりあえず動く！ヨシ！は大事なときもある
13. 参考資料 • javascript - Do DOM tree elements with ids become global variables? - Stack Overflow • Window - Web API | MDN • HTML Standard • サンプルコード