按圖索驥系列之—— DOM 裏面有什麼？

DOM (Document Object Model) 這個大名鼎鼎的東西，是什麼？究竟在 HTML 之中扮演着什麼樣的地位？今天咱們來一探究竟。

1. DOM

在 HTML 用戶代理工具（一般指瀏覽器）中，每一個 XML 和 HTML 文檔都有與之對應文檔對象，俗稱 Document Object。咱們經常提到的 DOM 也就是文檔對象模型。經過一系列規範來約定了不一樣的用戶代理工具應該實現什麼樣的標準。固然，因爲互聯網的快速發展。瀏覽器廠商每每先行於標準出現，規範的制定在早期的 web 發展中略有些後知後覺，進而致使兼容性的問題層出不窮。後來又到了 jQuery 統一包裝的兼容性問題而大行其道，這是後話。

DOM 規範定義了 文檔對象的 URL。它在文檔對象被建立的時候就創建了，可是在文檔對象的生命週期中能夠改變。而改變 DOM 的 URL，須要藉助瀏覽器對象模型的 API。即：BOM 的 window.history.pushState 方法。須要注意的是，瀏覽器一般會暴露出當前 DOM 的 URL，也就是瀏覽器通常都具有地址欄。這麼作的目的是爲了讓用戶來區分該網站是否是被假冒的。

DOM 對象都有一個重載覆寫標記，這個標記最開始沒有被設置。當 document.open() 和 document.write() 在某些狀況下被調用時，才被設置。這個標記在 DOM 中用於文檔源碼，該標記會使用由 Unicode 編碼字符的重載覆寫緩存來載入文檔。

2. DOM 接口

下圖是 DOM 接口的詳細定義

enum DocumentReadyState { "loading", "interactive", "complete" };

typedef (HTMLScriptElement or SVGScriptElement) HTMLOrSVGScriptElement;

[OverrideBuiltins]
partial interface Document {
  // resource metadata management
  [PutForwards=href, Unforgeable] readonly attribute Location? location;
  attribute USVString domain;
  readonly attribute USVString referrer;
  attribute USVString cookie;
  readonly attribute DOMString lastModified;
  readonly attribute DocumentReadyState readyState;

  // DOM tree accessors
  getter object (DOMString name);
  [CEReactions] attribute DOMString title;
  attribute DOMString dir;
  attribute HTMLElement? body;
  readonly attribute HTMLHeadElement? head;
  [SameObject] readonly attribute HTMLCollection images;
  [SameObject] readonly attribute HTMLCollection embeds;
  [SameObject] readonly attribute HTMLCollection plugins;
  [SameObject] readonly attribute HTMLCollection links;
  [SameObject] readonly attribute HTMLCollection forms;
  [SameObject] readonly attribute HTMLCollection scripts;
  NodeList getElementsByName(DOMString elementName);
  readonly attribute HTMLOrSVGScriptElement? currentScript; // classic scripts in a document tree only

  // dynamic markup insertion
  Document open(optional DOMString type = "text/html", optional DOMString replace = "");
  WindowProxy open(DOMString url, DOMString name, DOMString features, optional boolean replace = false);
  [CEReactions] void close();
  [CEReactions] void write(DOMString... text);
  [CEReactions] void writeln(DOMString... text);

  // user interaction
  readonly attribute WindowProxy? defaultView;
  readonly attribute Element? activeElement;
  boolean hasFocus();
  [CEReactions] attribute DOMString designMode;
  [CEReactions] boolean execCommand(DOMString commandId, optional boolean showUI = false, optional DOMString value = "");
  boolean queryCommandEnabled(DOMString commandId);
  boolean queryCommandIndeterm(DOMString commandId);
  boolean queryCommandState(DOMString commandId);
  boolean queryCommandSupported(DOMString commandId);
  DOMString queryCommandValue(DOMString commandId);

  // special event handler IDL attributes that only apply to Document objects
  [LenientThis] attribute EventHandler onreadystatechange;
};
Document implements GlobalEventHandlers;
Document implements DocumentAndElementEventHandlers;
複製代碼

上面的定義中咱們能夠找到一些很熟悉的方法定義如：NodeList getElementsByName(DOMString elementName);。這些內容規範了 DOM 應該具有的基本接口和數據類型。若是瞭解過 jQuery 源碼，應該對 document.readyState 也不陌生。這個狀態正是用來判斷文檔加載狀態的。

3. 元素

元素在 DOM 中是具有語義的，好比 ol 元素表明一個有序列表， img 表明一張圖片等等。在 DOM 元素這個大集合中，主要有兩部分組成：內容模型和全局屬性。內容模型主要根據不一樣類型的標籤作出分類好比 嵌入式內容 裏面主要由 audio canvas embed iframe img math object picture svg video 這些標籤組成。這些標籤有個顯著的特色是它們都含有本身特有的內容，這一點從語義上也能辨別。

還有一些標籤稱爲「透明內容模塊」。好比註音標籤。不是經常使用標籤，但頗有特色。

元素的全局屬性咱們並不陌生。最多見的莫過於 title 標記。經常用於鼠標移入的浮動提示信息展現。還有一個 dir 標籤用於排列文字方向，注意這個與 text-align 的對齊方向是不一樣的概念。

說起元素及其語義，可訪問性是個繞不開的話題。W3C 關於無障礙閱讀，也就是可訪問性這是個極具探討性的話題。咱們在這裏不會展開篇幅來講。關於網頁的無障礙閱讀，主要涉及到顏色對比度設置，放大操做，鍵鼠響應等一系列優化，還有利於其餘閱讀器識別的語義，好比朗讀標記等。無障礙閱讀也能狹義的理解爲，一張網頁，既能在瀏覽器中供正常人瀏覽，也能在各類殘障人士的閱讀設備中瀏覽。這是一種人文關懷在技術上的衍生，雖然目前的實踐還不夠完善。但既然有標準，就值得去探索。

DOM API 簡介到這裏爲止。下一次，咱們將着眼於 HTML 元素，這是裏用戶最近的內容。比較常見的表單元素，腳本元素，分組元素，以及各類連接元素和編輯元素都將一一出現。