快速了解JavaScript的DOM模型

概述

DOM全称Document Object Model，即文档对象模型。是HTML和XML文档的编程接口，DOM将文档（HTML或XML）描绘成一个多节点构成的结构。使用JavaScript可以改变文档的结构、样式和内容。

W3C DOM由以下三部分组成：

• 核心DOM - 针对任何结构化文档的标准模型。
• XML DOM - 针对XML文档的标准模型。
• HTML DOM - 针对HTML文档的标准模型。

分类

DOM目前有三种级别：

• DOM Level 1：1998年10月成为W3C的推荐标准，主要定义HTML和XML文档的底层结构。
• DOM Level 2： 在DOM1基础上扩充了方法和属性，引入了与文档更多的交互能力。主要包括DOM视图、DOM样式、DOM事件、DOM遍历和范围等。
• DOM Level 3：引入了将XML文档加载和序列化的方法。提供了验证文档有效性的能力。

节点树

以下面的HTML为例：

    
    


    
测试块
    链接

浏览器会将HTML文档解析成节点并组成节点树。

HTML DOM中通过不同类型节点来表示， Document是每个文档的根节点。这里的document只有一个子节点，称之为文档元素(Element)。Element表示元素类型的节点，Text表示文本类型的节点。

节点类型

DOM 的最小组成单位叫做节点（node）。上面的节点树中，每一段都由不同类型的节点组成。节点的类型有如下几种：

• Node：浏览器提供的原生节点，下面的节点都继承它。
• Document：整个文档树的顶层节点
• DocumentType：doctype标签（比如）。
• Element：网页的各种HTML标签（比如、等）。
• Attr：网页元素的属性（比如class="right"）。
• Text：标签之间或标签包含的文本。
• Comment：注释。
• CDATASection：CDATA区域，与Comment类型类似。
• DocumentFragment：文档的片段。

Node

DOM1中定义了一个Node接口，JavaScript中所有节点类型都继承自Node类型，因此属性和方法都相同。

在Node类型中定义了nodeType属性来表明节点的类型，由12个常量表示。任何节点必居其一：

• Node.ELEMENT_NODE：数值1，对应元素节点Element。
• Node.ATTRIBUTE_NODE：数值2，对应属性节点Attr。
• Node.TEXT_NODE：数值3，对应文本节点Text。
• Node.CDATA_SECTION_NODE：数值4，对应文档中CDATA部（不会由解析器解析的文本）。
• Node.ENTITY_REFERENCE_NODE：数值5，对应实体引用。
• Node.ENTITY_NODE：数值6，对应实体类型Entity。
• Node.PROCESSING_INSTRUCTION_NODE：数值7，对应处理指令。
• Node.COMMENT_NODE：数值8，对应注释节点Comment。
• Node.DOCUMENT_NODE：数值9，对应文档节点Document。
• Node.DOCUMENT_TYPE_NODE：数值10，对应文档类型节点DocumentType。
• Node.DOCUMENT_FRAGMENT_NODE：数值11，对应文档片段节点DocumentFragment。
• Node.NOTATION_NODE：数值12，对应DTD中声明的符号。

使用nodeType可以很容易确定节点类型，IE中没有公开Node类型的构造函数，使用Node.ELEMENT_NODE比较会导致错误。为了兼容IE，可以使用数值进行比较：

if (onenode.nodeType == Node.ELEMENT_NODE) {    // 在IE中无效
    console.log("The Node is an Element.");
}
// 或者
if (oneNode.nodeType == 1) {    // 适用所有浏览器
    console.log("The Node is an Element.");
}

nodeName返回节点的标签名

var div = document.getElementByTagName('div')[0];
console.log(onenode.nodeName);    // DIV

nodeValue返回字符串，表示节点的文本值，可读写。

var div = document.getElementByTagName('div')[0];
console.log(onenode.nodeValue);    // null

节点关系

文档中节点都存在着一定的关系，节点之间的关系可以使用类似人类家族关系的形式描述。如，在HTML文档中，可以把看作是的父元素；相对的，也就是的子元素；而作为同级的两者之间的关系为兄弟（姐妹）关系。

Node中提供了几种节点遍历的属性：parentNode、childNodes、firstNode/lastNode、previousSibling/nextSibling、ownerDocument。

Document

JavaScript通过Document类型表示文档。浏览器中的document对象是HTMLDocument的一个实例，表示整个HTML页面。Document节点具有以下特征：

• nodeType为Node.DOCUMENT_NODE，值为9。
• nodeName的值为#document。
• nodeValue的值为null。
• parentNode的值为null。
• ownerDocument的值为null。
• 其子结点可能是一个DocumentType、Element、ProcessingInstruction或Comment。

document对象还有一些属性来表示网页的一些信息：

• title：取得当前页面的标题，也可以修改当前页面的标题并反映在浏览器的标题栏中。但不会改变