Upgrade to Pro — share decks privately, control downloads, hide ads and more …

謎のDOMアクセス / Mysterious DOM access

謎の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)

132b10a5c3e586dc7b720fba63bd4eaf?s=128

TAKAyukiatkwsk

August 15, 2020
Tweet

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 を触っていたとき... (※: ソースコードはサンプルです)

  4. None
  5. クリックすると 上の文章とセレクト ボックスが消える

  6. None
  7. None
  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 • サンプルコード