DOM是什么？

DOM(文档对象模型)是针对HTML和XML文档的一个API。DOM描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的节点。

自JavaScript成为最常用的语言时JavaScript和DOM通常被视为独立的实体。DOM接口用于存取、遍历和控制HTML和XML文档。

DOM起始于Netscape(网景)和Microsoft(微软)的DHTML(动态HTML)，但是现在它已经成为基本文档结构及查询接口。

Node节点对象

DOM是将HTML或者XML文档描绘成一个多层节点构成的结构。例如一个常规的HTML:

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
	<title>Demo page</title>
</head>
<body>
	<div>
		<p>Hello DOM!</p>
	</div>
</body>
</html>

可以将这个HTML表示为如下图的层次结构：

DOM 例子图片

DOM的最小单位是节点（node），一个文档的树形结构就是由各种不同的节点组成。每一段标记都可以通过树中的一个节点表示。

HTML标签元素通过节点表示，而属性(attribute)通过特性节点表示，文档类型通过文档类型节点表示，而注释通过注释节点表示。一共有12中节点类型，这些类型都继承自一个基本类型。

12个类型可以通过nodeType来获得:

  • 1:标签元素节点。例如: <html>、<p>、<div>等。
  • 2:元素属性。例如:<a title="test"></a>的title。
  • 3:文本节点，代表HTML文档中出现的文本。
  • 4:CDATA_SECTION_NODE，即<![CDATA[ ]]>。
  • 5:实体引用。例如:&amp、&nbsp、&copy等。
  • 6:实体节点。例如:<!ENTITY copyright "Copyright 2013, excalibur. All rights reserved"]>。
  • 7:处理指令。例如:<?xml version="1.0"?>。
  • 8:注释。例如:<!-- -->。
  • 9:根节点，即document。
  • 10:文档类型。例如:<!DOCTYPE html>。
  • 11:文档碎片节点，即文档片段。

  • 12:DTD中定义的记号。

    需要注意的是，在IE下会直接跳过HTML中的空格、Tab换行，而Firefox下空格会认为是一个节点，因此，对类似节点取nextSibling或previousSibling时，需要判断是否是元素节点。

    还有有的浏览器定义了Node全局常量可以使用Node.ELEMENT_NODE等12个常量来判断。但是IE < 9中没有定义该常量，所以最好还是使用数字判断。

    例子：

    1
    2
    3
    if(somenode.nodeType == 1){
    	// node is an element
    }

nodeName与nodeValue可以用来获取节点信息。他们的属性值取决于nodeType。常规中我们应该先判断nodeType在使用其nodeName与nodeValue，不然有的类型节点是没有意义的。比如Text节点的nodeValue属性返回文本内容，而其他五类节点都返回null。所以，该属性的作用主要是提取文本节点的内容。

nodeName相关属性：

类型 nodeName nodeType
DOCUMENT_NODE #document 9
ELEMENT_NODE 大写的HTML元素名 1
ATTRIBUTE_NODE 等同于Attr.name 2
TEXT_NODE #text 3
DOCUMENT_FRAGMENT_NODE #document-fragment 11
DOCUMENT_TYPE_NODE 等同于DocumentType.name 10

节点之间存在这样那样的关系，类似我们的家族关系。
使用childNodes访问子节点，parentNoe访问父节点，previousSibling访问前兄弟节点，nextSibling访问后兄弟节点。

相关属性如下：

  • firstChild: 第一个子节点。
  • lastChild: 最后一个子节点。
  • nextSibling: 下一个兄弟节点。
  • previousSibling: 上一个兄弟节点。
  • parentNode: 父节点
  • firstElementChild:第一个类型为HTML元素的子节点。
  • lastElementChild:最后一个类型为HTML元素的子节点。
  • nextElementSibling:下一个类型为HTML元素的兄弟节点。
  • previousElementChild: 上一个类型为HTML元素的兄弟节点。

所有节点最后都会有一个属性owerDocument，该属性表示整个文档的文档节点。任何节点都属于它所在的文档且唯一。

参考文档