DOM

DOM(Document Object Model)，是独立于具体语言的，和 JavaScript 本无关系，但在 Web 前端开发实践中，一般都是用 JavaScript 来操作，所以这里还是放到 JavaScript 目录下来讨论。

如其名, DOM 这个 document object model 就是一个用描述文档的模型, 用来描述脚本怎样与结构化文档进行交互和访问的 web 标准. 它规定一个文档是一个 node, node 中的各部分又是 node. node 是可以嵌套的, 文本也是 node, 属性也是 node. DOM 定义了一系列对象, 方法和属性, 用于访问, 操纵和创建文档中的内容, 结构, 样式和行为. 本段很关键, 它道出了 DOM 的本质, 是应用 DOM 的理论根据.

版本. 很多地方都谈到了 DOM 的分级, 如 DOM0, DOM1, DOM2, DOM3, 这是 DOM 的发展过程, 版本越高, 支持的特性越多, 但目前浏览器一般都还只支持到 DOM2. 通常, DOM 也可分为三大部分: Core DOM, XML DOM, HTML DOM. 本段关于 DOM 的版本和分类, 对平常使用来讲, 无关痛痒, 知道有这个东东就行了.

NODE 接口

DOM 针对 node 节点约定了不少方法和属性, 下面 node 接口:

interface Node {

  // NodeType

  const unsigned short      ELEMENT_NODE       = 1;

  const unsigned short      ATTRIBUTE_NODE     = 2;

  const unsigned short      TEXT_NODE          = 3;

  const unsigned short      CDATA_SECTION_NODE = 4;

  const unsigned short      ENTITY_REFERENCE_NODE = 5;

  const unsigned short      ENTITY_NODE        = 6;

  const unsigned short      PROCESSING_INSTRUCTION_NODE = 7;

  const unsigned short      COMMENT_NODE       = 8;

  const unsigned short      DOCUMENT_NODE      = 9;

  const unsigned short      DOCUMENT_TYPE_NODE = 10;

  const unsigned short      DOCUMENT_FRAGMENT_NODE = 11;

  const unsigned short      NOTATION_NODE      = 12;

  readonly attribute  DOMString            nodeName;

           attribute  DOMString            nodeValue;

                                                 // raises(DOMException) on setting

                                                 // raises(DOMException) on retrieval

  readonly attribute  unsigned short       nodeType;

  readonly attribute  Node                 parentNode;

  readonly attribute  NodeList             childNodes;

  readonly attribute  Node                 firstChild;

  readonly attribute  Node                 lastChild;

  readonly attribute  Node                 previousSibling;

  readonly attribute  Node                 nextSibling;

  readonly attribute  NamedNodeMap         attributes;

  readonly attribute  Document             ownerDocument;

  Node                      insertBefore(in Node newChild,

                                         in Node refChild)

                                         raises(DOMException);

  Node                      replaceChild(in Node newChild,

                                         in Node oldChild)

                                         raises(DOMException);

  Node                      removeChild(in Node oldChild)

                                        raises(DOMException);

  Node                      appendChild(in Node newChild)

                                        raises(DOMException);

  boolean                   hasChildNodes();

  Node                      cloneNode(in boolean deep);

};

这个定义可直接参官方文档: http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#ID-1950641247

因为其他所有节点都是"继承"自这个 node 节点, 所以它的属性和方法是可以通用的. 使用这些方法和属性, 直接在 eclipse 中的提示列表中也包含, 如下图:

HTML DOM

HTML DOM, 这可能是用的最多的了, 下面是一个示例性的 HTML DOM 结构：

 |-> Document

   |-> Element (<html>)

     |-> Element (<body>)

       |-> Element (<div>)

         |-> text node

         |-> Anchor

           |-> text node

       |-> Form

            |-> Text-box

            |-> Text Area

            |-> Radio Button

            |-> Check Box

            |-> Select

            |-> Button

来源：http://en.wikipedia.org/wiki/Document_Object_Model

下面这幅图更形象:

来源: http://media.wiley.com/assets/1015/71/domfigure2.gif

不同浏览器的支持情况

不同浏览器对 DOM 支持是不一致的, 比如这段代码:

<form action="">

<input id="hello" type="text"/>

</form>

var hello = document.getElementById("hello");

document.write(hello.parentNode+ "<br/>");

Firefox 15.0.1 中会输出: [object HTMLFormElement], 而在 Chrome 17.0.963.79 中却输出 null. 对于空白文本内容, IE 是忽略的, 但其他浏览器仍会把它作为文本节点对待.

参考

http://www.w3schools.com/jsref/dom_obj_node.asp
中文DOM教程：http://www.w3school.com.cn/htmldom/index.asp —— 就这个中文教程就很好了，很受有的教程。
JavaScript: The definity guide (JavaScript 权威指南, http://book.douban.com/subject/2228378/ (这个链接不一定是最新版))

Page updated

Google Sites

Report abuse