DOM文档对象模型(Document Object Model)

一、DOM文档对象模型(Document Object Model)

是W3C制定的一套规范，提供了一组操作HTML和XML文档的API，即提供一套属性、方法和事件 。
说的直白一点就是文档对JS提供了一些操作页面元素的接口，使得JS语言可以动态的控制页面内容。

DOM作用

DOM作用
DOM的作用就是关于对页面中元素和内容的访问和控制。
获取页面中的元素
获取/设置元素的属性
获取/设置元素的样式
添加/删除元素
绑定事件—触发响应

document对象

document对象表示页面文档，对应的就是磁盘中的.html文件(也可能是.xml文件)。
属性

document.title：访问当前文档的标题
document.body：访问当前文档的body元素
方法
write()： 在当前页面中输出内容
getElementById()： 返回指定id的第一个对象的引用
getElementsByName()： 返回带有指定名称的对象的集合
getElementsByTagName()： 返回带有指定标签名的对象的集合
不仅document对象具有此方法，其他DOM对象同样具有，用来在元素内部根据标签名查找

DOM对象的属性

DOM对象的属性和HTML标签的属性几乎是一样的，因为DOM对象本身就是对页面中内容的封装。
语法：DOM对象名.属性名。
获取/设置标签中内容的属性
DOM对象允许JS语言操作元素的内容，其中包括文本内容和元素内容。也就是说JS可以不仅仅可以修改元素本身就连元素的子级内容都可以修改。
想要修改标签中的内容阔使用如下两个属性：

innerText:访问元素的文本内容，只会把内容当成纯文本。
innerHTML:访问元素的子级内容，可以把内容当成纯文本也可以解析到DOM树中。

DOM相关类型

DOM对象会有一些类型的区分，DOM中会把元素、属性和文本这样的内容称之为：node(节点)，所以就有了元素节点(element类型)，文本节点(text类型)等等，下DOM类型的种类如下：

Document：文档
Element：元素
Text：文本
Attr：属性
Nodelist：节点列表的集合
NamedNodeMap：属性映射集合

document类型

表示DOM树中的最顶层节点，对应HTML文档。
属性
childNodes：子节点列表
documentElement：文档根元素
nodeType：访问节点的类型
1表示元素节点
2表示属性节点
3表示文本节点
[具体参考请访问：http://www.w3school.com.cn/jsref/prop_node_nodetype.asp](http://www.w3school.com.cn/jsref/prop_node_nodetype.asp)

方法
createElement (元素名) ：创建元素节点
createTextNode (文本内容) ：创建文本节点
appendChild(子节点)：添加子节点，主要添加根元素
createDocumentFragment()：创建文档碎片

element类型

表示HTML文档中的元素。
属性
nodeName/nodeType：节点名称/节点类型
childNodes：返回子节点集合，NodeList类型
attributes：返回属性集合，NamedNodeMap类型
firstChild/lastChild：第一个/最后一个子节点
parentNode：返回元素的父节点
方法
appendChild()：添加子节点，包括子元素、文本节点等
getAttribute()：获取指定属性的值
setAttribute()：添加/修改属性

text类型

表示HTML文档中的文本节点。
属性
data：文本数据
length：数据长度
方法
appendData：向节点追加数据
deleteData：从节点删除数据
insertData：向节点中插入数据
replaceData：替换节点中的数据

DOM基本操作

关于DOM的基本操作非常简单，具体的操作如下：
写入操作：parent.appendChild(要插入的节点)
插入操作：parent.insertBefore(新的节点，已经存在的节点)
删除操作：parent.removeChild(要删除的节点)
替换操作：parent.replaceChild(新的节点,被替换的节点)
克隆操作：node.cloneNode(true|false是否包括内容)