文档对象模型（DOM，Document Bbject Modle）是HTML和XML文档的编程接口。DOM表示由多层节点构成的文档，通过它可以添加、删除和修改页面中的各个部分 。
Node类型
nodeType：每个节点都有nodeType属性，表示该节点的类型。常用的节点类型如下：
| 节点类型 | 值 | 对应常量 |
|---|---|---|
| 文档节点（document） | 9 | Node.DOCUMENT_NODE |
| 元素节点（element） | 1 | Node.ELEMENT_NODE |
| 属性节点（attr） | 2 | Node.ATTRIBUTE_NODE |
| 文本节点（text） | 3 | Node.TEXT_NODE |
| 文档类型节点（DocumentType） | 10 | Node.DOCUMENT_TYPE_NODE |
| 注释节点（Comment） | 8 | Node.COMMENT_NODE |
| 文档片断节点（DocumentFragment） | 11 | Node.DOCUMENT_FRAGMENT_NODE |
属性
nodeName：属性返回节点的名称。
nodeValue：属性返回一个字符串，表示当前节点本身的文本值，该属性可读写只有文本节点（text）、注释节点（comment）和属性节点（attr）有文本值。
textContent：属性返回当前节点和它的所有后代节点的文本内容。
nextSibling：属性返回紧跟在当前节点后面的第一个同级节点，如果没有则返回null。
previousSibling：属性返回当前节点前面的、距离最近的一个同级节点，没有则返回null。
parentNode：属性返回当前节点的父节点。
parentElement：属性返回当前节点的父元素节点，如果没有则返回null。
fristChild：属性返回当前节点的第一个子节点，没有则返回null。
lastChild：属性返回当前节点的最后一个子节点，没有则返回null。
childNodes：返回一个类似数组的对象，成员包括当前节点的所有子节点。
方法
appendChild()：该方法接受一个节点对象作为参数，将其作为最后一个子节点，插入当前节点。该方法的返回值就是插入文档的子节点。
insertBefore()：该方法用于将某个节点插入到父节点内部的指定位置。方法接收两个参数，第一个是所要插入的节点，第二个是父节点中的一个子节点。并将第一个参数插在第二个参数的前面。返回值就是新的子节点。
removeChild()：该方法接收一个子节点作为参数，用于从当前节点移除该子节点。返回值就是被移除的子节点。
replaceChild()：该方法用于将一个新的节点，替换当前节点的某一个子节点。方法接收两个参数，第一个是newChild用来替换的新节点，第二个是oldChild用来被替换的子节点，返回值是oldChild。
cloneNode()：方法返回调用该方法的节点的一个副本。该方法只接收一个布尔值参数表示是否进行深复制。如果是true，则该节点的所有后代节点也都会被复制，如果是false，则只复制该节点本身。
Document类型
Document类型就是JavaScript中表示文档节点的类型。
属性
documentElement：始终指向页面中的<html>元素。
body：直接指向<body>元素。
doctype：访问<!DOCTYPE>，浏览器支持不一样，很少使用。
title：获取文档的标题。
URL：获取完整的URL。
domain：获取文档的域名，并可以进行设置。
referrer：取得链接到当前页面的那个页面的URL，即来源页面的URL。
images：获取所有的img对象，返回类数组对象。
forms：获取所有的form对象。
links：获取所有的带href属性的<a>元素。
innerHTML：属性可以用于获取或替换HTML元素的内容。
查找元素
| 方法 | 描述 |
|---|---|
| document.getElementById(id) | 通过元素 id 来查找元素 |
| document.getElementsByTagName(name | 通过标签名来查找元素 |
| document.getElementsByClassName(name) | 通过类名来查找元素 |
| document.querySelector() | 返回文档中匹配指定的CSS选择器的第一元素 |
| document.querySelectorAll() | document.querySelectorAll() 是 HTML5中引入的新方法，返回文档中匹配的CSS选择器的所有元素节点列表 |
document.createELement(element):创建一个新的HTML元素，需要与appendChild()或insertBefore()方法联合使用。
Element类型
Element对象对应网页中的HTML元素，每一个HTML元素在DOM树上都会转化成为一个Element节点对象。
属性
attribute：返回一个与该元素相关的所有属性的集合。
classList：返回该元素包含的class属性的集合。
className：获取或设置指定元素的class属性值。
clientHeight：获取元素内部的高度，包含内边距，但不包括水平滚动条、边框和外边距。
clientTop：返回该元素距离它上边界的高度。
clientLeft：返回该元素距离它左边界的宽度。
clientWidth：返回该元素它内部的宽度，包括内边距，但不包括垂直滚动条、边框和外边距。
innerHTML：设置或获取 HTML 语法表示的元素的后代。
tagName：返回当前元素的标签名。
常用方法
| 方法 | 描述 |
|---|---|
| element.innerHTML = new html content | 改变元素的 innerHTML |
| element.attribute = value | 修改属性的值 |
| element.getAttribute() | 返回元素节点的指定属性值。 |
| element.setAttribute(attribute, value) | 设置或改变 HTML 元素的属性值 |
| element.style.property = new style | 改变 HTML 元素的样式 |
Text类型
Text节点由Text类型表示，包含字面解释的纯文本，也可能包含转义后的HTML字符，但不包含HTML代码。
属性和方法
length：文本的长度。
appendData(text)：追加文本。
deleteData(beginIndex,count)：删除文本。
insertData(beginIndex,text)：插入文本。
replaceData(beginIndex,count,text)：替换文本。
splitText(beginIndex)：从beginIndex处将文本节点分开。
document.createTextNode(text)：创建文本节点，参数为要插入节点的文本。
substringData(beginIndex,count)：从beginIndex开始提取count个子字符串。
