DOMを学ぶ２~DOMの歴史~

はじめに

歴史を勉強します。
理由：知ってたらかっこいいから

DOM Level 0

公式の仕様は存在しない。
W3Cが標準化する前にNetscapeとIEが勝手に実装してた機能の総称。

プログラミングなのにアナログに感じる

// ページ内の1番目のフォームを取得
document.forms[0]
// ページ内の1番目の画像を取得
document.images[0]

この時代、両社が独自機能を追加しまくって「ブラウザ戦争」が起きた。
（IEめちゃくちゃ思い出深い...。親のPCで勝手に触ってた）

if (document.layers) {
  // Netscape用
} else if (document.all) {
  // IE用
}

DOM Level 1（1998年）

W3Cによる最初の標準。HTMLとXMLの両方が対象。

document.getElementById('myId');
document.getElementsByTagName('div');
element.getAttribute('class');
element.setAttribute('class', 'newClass');
document.createElement('div');
parent.appendChild(child);

getElementById、これ1998年生まれ。信じらんない。

DOM Level 2（2000年）

イベントモデル、スタイル操作、ツリー走査が追加された。

element.addEventListener('click', handler, false);
element.removeEventListener('click', handler, false);
window.getComputedStyle(element);
document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null, false);

addEventListenerはここで生まれた。
イベントの「キャプチャリング」と「バブリング」もこのバージョンで定義された。（後の記事で勉強する予定）

スタイル操作

JavaScriptからCSSの値を取得・変更できる機能。getComputedStyleで実際に適用されているスタイルを取得できる。CSSファイルの値じゃなくて、継承とか計算後の最終的な値が取れる。

ツリー走査

DOMツリーを順番にたどる機能。TreeWalkerやNodeIteratorを使うと、「テキストだけ」「要素だけ」みたいにフィルタしながらノードを巡回できる。手動でfirstChildとかnextSiblingするより楽。

DOM Level 3（2004年）📍私が生まれた年

XPath、キーボードイベント、ドキュメントの読み込み・保存が追加された。

document.evaluate('//div[@class="content"]', document, null, XPathResult.ANY_TYPE, null);
element.addEventListener('keydown', handler);
element.textContent = 'Hello';

XPath

XMLやHTMLの中から要素を検索するクエリ言語。//div[@class="content"]みたいに書くと条件に合う要素を取得できる。querySelectorと似てるけど、もっと複雑な条件（親の条件とか）を書ける。XMLでよく使う。

ドキュメントの読み込み・保存

DOMツリーをXML文字列に変換（シリアライズ）したり、逆にXML文字列からDOMツリーを作ったりする機能。外部XMLを読み込んでDOMとして操作したいときに使う。

WHATWGの誕生

2004年、Apple・Mozilla・OperaがWHATWGを作った。（W3Cに不満）

「Living Standard」＝ バージョン番号なし、常に更新。
今のDOMの標準はWHATWGのDOM Standard。

歴史の残骸

// この2つは同じ
document.getElementById('id');      // DOM Level 1
document.querySelector('#id');      // Selectors API

// この2つも同じ
document.getElementsByClassName('class');  // HTML5
document.querySelectorAll('.class');       // Selectors API

なんで書き方いっぱいあるの？ → 歴史的に増えていったから。
古いAPIは消せない。消すと昔のサイトが壊れる。

まとめ

こんな面白い時代に産んでくれた親に感謝。

参考文献

• DOM Standard - WHATWG
• DOM Level 1 Specification - W3C
• DOM Level 2 Specification - W3C
• DOM Level 3 Specification - W3C
• Document Object Model - Wikipedia