按图索骥系列之—— 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 元素，这是里用户最近的内容。比较常见的表单元素，脚本元素，分组元素，以及各类连接元素和编辑元素都将一一出现。