1、DOM简介
文档对象模型（DOM, Document Object Model）是一个应用编程接口（API），用于在HTML中使用扩展的XML。在DOM中，HTML文档的层次结构被表示为一个树形结构。并用document对象表示该文档，树的每个子节点表示HTML文档中的不同内容。每个载入浏览器的 HTML 文档都会成为 Document 对象，Document是探索DOM的入口，利用全局变量document可以访问Document对象。DOM将整个页面抽象为一组分层节点。HTML或XML页面的每个组成部分都是一种节点，包含不同的数据。比如下面的HTML页面：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sample Page</title>
</head>
<body>
<h1>Hello World!!!</h1>
</body>
</html>
将以上HTML代码分解为DOM节点层次图如下：
DOM通过创建表示文档的树，让开发者可以随心所欲地控制网页的内容和结构。使用DOM API，可以轻松地删除、添加、替换、修改节点。
2、DOM级别
-
DOM Level 1： 1998年10月，DOM Level 1成为W3C的推荐标准。这个规范由两个模块组成：DOM Core和DOM HTML。前者提供了一种映射XML文档，从而方便访问和操作文档任意部分的方式；后者扩展了前者，并增加了特定于HTML的对象和方法。
-
DOM Level 2： DOM Level 1的目标是映射文档结构，而DOM Level 2的目标则宽泛得多。这个对最初DOM的扩展增加了对（DHTML早就支持的）鼠标和用户界面事件、范围、遍历（迭代DOM节点的方法）的支持，而且通过对象接口支持了层叠样式表（CSS）。另外，DOM Level 1中的DOM Core也被扩展以包含对XML命名空间的支持。DOM Level 2新增了以下模块，以支持新的接口：
DOM视图：描述追踪文档不同视图（如应用CSS样式前后的文档）的接口。 DOM事件：描述事件及事件处理的接口。 DOM样式：描述处理元素CSS样式的接口。 DOM遍历和范围：描述遍历和操作DOM树的接口。 -
DOM Level 3： DOM Level 3进一步扩展了DOM，增加了以统一的方式加载和保存文档的方法（包含在一个叫DOM Load and Save的新模块中），还有验证文档的方法（DOM Validation）。在Level 3中，DOM Core经过扩展支持了所有XML 1.0的特性，包括XML Infoset、XPath和XML Base。
-
DOM4： 目前，W3C不再按照Level来维护DOM了，而是作为DOM Living Standard来维护，其快照称为DOM4。DOM4新增的内容包括替代Mutation Events的Mutation Observers。
3、Web浏览器对DOM的支持情况
DOM标准在Web浏览器实现它之前就已经作为标准发布了。IE在第5版中尝试支持DOM，但直到5.5版才开始真正支持，该版本实现了DOM Level 1的大部分。IE在第6版和第7版中都没有实现新特性，第8版中修复了一些问题。
网景在Netscape 6（Mozilla 0.6.0）之前都不支持DOM。Netscape 7之后，Mozilla把开发资源转移到开发Firefox浏览器上。Firefox 3+支持全部的Level 1、几乎全部的Level 2，以及Level 3的某些部分。
4、DOM节点类型
DOM规定文档中的每个成分都是一个节点（Node），HTML文档可以说由节点构成的集合，DOM节点有：
| 类型 | 描述 |
|---|---|
| 元素节点（Element） | 上图中<html>、<body>、<h1>等都是元素节点，即标签。 |
| 文本节点（Text） | 向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。 |
| 属性节点（Attr） | 元素才有属性，如标签的链接属性href=“http://www.baidu.com”。 |
5、DOM节点三大属性
| 属性 | 描述 |
|---|---|
| nodeName | 元素节点、属性节点、文本节点分别返回元素的名称、属性的名称和#text的字符串。 |
| nodeType | 元素节点、属性节点、文本节点的nodeType值分别为1、2、3。 |
| nodeValue | 元素节点、属性节点、文本节点的返回值分别为null、属性值和文本节点内容。 |
6、DOM 常见操作
Node为所有节点的父接口，其定义了一组公共的属性和方法，如下：
| 属性和方法名称 | 描述 |
|---|---|
| nodeType | 返回节点类型的数字值（1~12） |
| nodeName | 元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document |
| nodeValue | 文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null |
| parentNode | 父节点 |
| parentElement | 父节点标签元素 |
| childNodes | 所有子节点 |
| children | 第一层子节点 |
| firstChild | 第一个子节点，Node 对象形式 |
| firstElementChild | 第一个子标签元素 |
| lastChild | 最后一个子节点 |
| lastElementChild | 最后一个子标签元素 |
| previousSibling | 上一个兄弟节点 |
| previousElementSibling | 上一个兄弟标签元素 |
| nextSibling | 下一个兄弟节点 |
| nextElementSibling | 下一个兄弟标签元素 |
| childElementCount | 第一层子元素的个数(不包括文本节点和注释) |
| ownerDocument | 指向整个文档的文档节点 |
节点关系方法：
| 属性和方法名称 | 描述 |
|---|---|
| hasChildNodes() | 判断是否有子节点，包含一个或多个节点时返回true |
| contains() | 如果是后代节点返回true |
| isSameNode()、isEqualNode() | 判断是否是同一个节点，传入节点与引用节点的引用为同一个对象返回true |
| compareDocumentPostion() | 确定节点之间的各种关系 |
7、查找节点的方法
| 属性和方法名称 | 描述 |
|---|---|
| getElementById() | 返回对拥有指定 id 的第一个对象的引用。 |
| getElementsByTagName() | 返回带有指定标签名的对象集合。 |
| getElementsByName() | 返回带有指定名称的对象集合。 |
| getElementsByClassName() | 返回包含一个或多个类名的对象集合。 |
| classList | 返回所有类名的数组： add（添加）； contains（存在返回true,否则返回false）； remove（删除）； toggle（存在则删除，否则添加） |
| querySelector() | 接收CSS选择符，返回匹配到的第一个元素，没有则null |
| querySelectorAll() | 接收CSS选择符，返回一个数组，没有则返回[] |
8、样式属性及操作
| 属性和方法名称 | 描述 |
|---|---|
| style.cssText | 可对style中的代码进行读写 |
| style.item() | 返回给定位置的CSS属性的名称 |
| style.length | style代码块中参数个数 |
| style.getPropertyValue() | 返回给定属性的字符串值 |
| style.getPropertyPriority() | 检测给定属性是否设置了!important，设置了返回"important";否则返回空字符串 |
| style.removeProperty() | 删除指定属性 |
| style.setProperty() | 设置属性，可三个参数:设置属性名，设置属性值，是否设置为"important"(可不写或写"") |
9、元素节点属性及操作
| 属性和方法名称 | 描述 |
|---|---|
| nodeName | 访问元素的标签名 |
| tagName | 访问元素的标签名 |
| createElement() | 创建节点 |
| appendChild() | 末尾添加节点，并返回新增节点 |
| insertBefore() | 参照节点之前插入节点，两个参数：要插入的节点和参照节点 |
| insertAfter() | 参照节点之后插入节点，两个参数：要插入的节点和参照节点 |
| replaceChild() | 替换节点，两个参数：要插入的节点和要替换的节点(被移除) |
| removeChild() | 移除节点 |
| cloneNode() | 克隆，一个布尔值参数，true为深拷贝，false为浅拷贝 |
| importNode() | 从文档中复制一个节点，两个参数：要复制的节点和布尔值(是否复制子节点) |
| insertAdjacentHTML() | 插入文本，两个参数：插入的位置和要插入文本 beforebegin：在该元素前插入； afterbegin：在该元素第一个子元素前插入 beforeend：在该元素最后一个子元素后面插入 afterend：在该元素后插入 |
10、属性节点属性及操作
| 属性和方法名称 | 描述 |
|---|---|
| attributes | 获取所有标签属性 |
| getAttribute() | 获取指定标签属性 |
| setAttribute() | 设置指定标签属 |
| removeAttribute() | 移除指定标签属 |
| var s = document.createAttribute(“age”) s.nodeValue = “18” |
创建age属性 设置属性值为18 |
11、文本节点属性及操作
| 属性和方法名称 | 描述 |
|---|---|
| nnerText | 所有的纯文本内容，包括子标签中的文本 |
| outerText | 与innerText类似 |
| innerHTML | 所有子节点(包括元素、注释和文本节点) |
| outerHTML | 返回自身节点与所有子节点 |
| textContent | 与innerText类似，返回的内容带样式 |
| data | 文本内容 |
| length | 文本长度 |
| createTextNode() | 创建文本 |
| normalize() | 删除文本与文本之间的空白 |
| splitText() | 分割 |
| appendData() | 追加 |
| deleteData(offset,count) | 从offset指定的位置开始删除count个字符 |
| insertData(offset,text) | 在offset指定的位置插入text |
| replaceData(offset,count,text) | 替换，从offset开始到offscount处的文本被text替换 |
| substringData(offset,count) | 提取从ffset开始到offscount处的文本 |
12、文档节点属性及操作
| 属性和方法名称 | 描述 |
|---|---|
| document.documentElement | 代表页面中的<html>元素 |
| document.body | 代表页面中的<body>元素 |
| document.doctype | 代表<!DOCTYPE>标签 |
| document.head | 代表页面中的<head>元素 |
| document.title | 代表<title>元素的文本，可修改 |
| document.URL | 当前页面的URL地址 |
| document.domain | 当前页面的域名 |
| document.charset | 当前页面使用的字符集 |
| document.defaultView | 返回当前 document对象所关联的 window 对象，没有返回 null |
| document.anchors | 文档中所有带name属性的元素 |
| document.links | 文档中所有带href属性的元素 |
| document.forms | 文档中所有的<form>元素 |
| document.images | 文档中所有的 元素 |
| document.readyState | 两个值:loading(正在加载文档)、complete(已经加载完文档) |
| document.compatMode | 两个值：BackCompat：标准兼容模式关闭、CSS1Compat：标准兼容模式开启 |
| write() | write()文本原样输出到屏幕 |
| writeln() | writeln()输出后加换行符 |
| open() | open()清空内容并打开新文档 |
| close() | close()关闭当前文档，下次写是新文档 |