一、DOM简介
DOM（Document Object Model）即文档对象模型，针对 HTML 和 XML 文档的 API（应用程序接口）。DOM 描绘了一个层次化的节点树，允许开发人员添加、移除和修改页面的某一部分。
DOM是为了让开发人员通过js的方式操作HTML页面或者XML页面。
1.节点
加载 HTML 页面时，Web 浏览器生成一个树型结构，用来表示页面内部结构。DOM 将这种树型结构理解为由节点组成。
例如: <html>和<body>是父子节点
<head>和<body>是兄弟节点
2.节点种类
元素节点、文本节点、属性节点（nodeName、nodeType 和 nodeValue）
3.层次节点属性
元素节点、文本节点、属性节点（nodeName、nodeType 和 nodeValue）
二、DOM节点查找：
document是Document类型的一个对象.代表的是整个HTML页面.它其实也是window对象的一个属性.
1.根据ID查找
getElementById()：接受一个参数：获取元素的 ID。如果找到相应的元素则返回该元素的 HTMLDivElement 对象，如果不存在，则返回 null。
2.根据标签名查找：
getElementsByTagName()：返回一个对象数组 HTMLCollection(NodeList)，这个数组保存着所有相同元素名的节点列表。
3.根据名称(name)查找
getElementsByName() ：获取相同名称(name)的元素，返回一个对象数组
HTMLCollection(NodeList)。
三、节点操作
DOM 不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。
1.创建节点：
1. createElement()方法可以创建一个元素节点。
示例：
document.createElement(“p”);
2. createTextNode()方法:创建一个文本节点
示例：
var text = document.createTextNode('段落'); //创建一个文本节点
p.appendChild(text); //将文本节点添加到子节点末尾
2.添加节点：
1.appendChild()方法讲一个新节点添加到某个节点的子节点列表的末尾上。
示例：
var box = document.getElementById('box'); //获取某一个元素节点
var p = document.createElement('p'); //创建一个新元素节点<p>
box.appendChild(p); //把新元素节点<p>添加子节点末尾。
2.insertBefore(newNode,oldNode)
3.复制节点：
cloneNode(参数)可以把子节点复制出来。
说明：参数为true表示复制内容，，false仅仅复制节点
4.删除节点：
removeChild()可以删除指定的节点。
例如：box.parentNode.removeChild(box); //删除指定节点
四、节点属性操作
1.HTML属性与DOM节点属性对应关系：
HTML属性 DOM节点属性
id id
src src
title title
class className
for htmlFor
2.属性访问：
(1)node.属性名
说明：可完成复制和取值
(2)node[“属性名”]
(3)node.setAttribute(“属性名”, ”属性值”);
node.getAttribute(“属性名”);
五.节点样式操作：
Js可以直接操作css属性
例如：
var o = document.getElementById("box");
o.style.background = “red";
说明：
1.若多个单词的css属性要将”-”去掉，将第二个单词首字母大写。
2.在获取样式时,如果定义的是行内样式,js可以正常获取,而定义在外部样式表或内嵌样式表中的样式,js无法直接获取。
解决方案：
var sty = window.getComputedStyle(node);
注意：属性获取时不可以获取复合属性值。例如：sty.background获取不到
此时应该单独获取，如：sty.backgroundColor