Document.getElementById()マニアックス

Document.getElementById() マニアックス

About me • Tetsuharu OHZEKI (a.k.a saneyuki_s)! • Web client-side engineer! • Mozilla Committer! • Servo Developer (repository peer)! • I love Rust language, ECMAScript, DOM, and Browser.

Document.getElementById() View slide

Document.getElementById() • DOM Level 1 (1998/10/1勧告)からHTMLに存在 • DOM Level 2（2000/11/13）にてCoreへ移動 • DOM4/Living Stdでも存続熟成された芳醇なAPI View slide

WebIDL (DOM Living Std) [NoInterfaceObject] interface NonElementParentNode { Element? getElementById(DOMString elementId); }; Document implements NonElementParentNode; DocumentFragment implements NonElementParentNode;

getElementById()のspec的定義 • コンテクストオブジェクトの子孫のうち、与えられたIDを持つ要素を返す • 見つからなければnullを返す • ツリーの順序（プレオーダー）に従って、最初に出現する要素を返す（←from DOM4/Living Std）

素朴な実装 • ツリーを呼び出しの度に preorderで全部舐めればいい（root->左の部分木->右の部分木と再帰的に舐めれば良い） • ただし計算量はツリー内の要素数に比例する:O(n) • 遅いケースが酷い

一般的な実装 • 原則として、文書中に同じidを持つ要素は一つしか存在しないので、 id名と要素を関連づけてキャッシュ • ツリーの変更を監視する必要あり • 複数のIDがあった場合の内部の処理がGecko, Blink間で異なる key 要素 hoge fuga

同一idが複数個ある場合 • Gecko, Servo 1.idの追加・変更時に最初の要素を計算する 2.getElementById（内部キャッシュ）の呼び出しは常にO(1) • Blink 1. idの追加・変更時に、同一idが複数存在しているかを確認し、そうならばキャッシュを破棄する 2. getElementById(内部キャッシュ)の次の呼び出し時に、最初の要素を計算し、そこでキャッシュしなおす（その後に変更が無ければ次回からはO(1)）

変更を監視すべきポイント • 要素の追加・移動・削除 • innerHTML, outerHTML, insertAdjacentHTML (by DOM Parsing and Serialization Living Standard) • 属性の変更

Attrを介したエッジケース var attr = element.attributes[0]; // idのAttr attr.value = “foo”; // ここで変更を反映させる必要がある

注意 Web Platform Testに Document.getElementById()のテストケースはなかった

Before

仕方が無いので自分で追加した

With XML （面倒くさいので話さない）

getElementById()! 奥が深い

まとめ Web Platform Testを書こう

Document.getElementById()マニアックス

by Tetsuharu OHZEKI

on Sep 17, 2014

Statistics

Views

Actions

2 Embeds 251

Accessibility

Categories

Upload Details

Usage Rights

Report content

Document.getElementById()マニアックス Presentation Transcript

http://kinpatsu-dev.hatenablog.com	247
https://twitter.com	4