DOM（Document Object Model ）
DOM（Document Object Model ）
DOM是文档对象模型 ，DOM是关于创建，插入，修改，删除页面元素的标准。页面中的内容本质上都是字符串，但是js会把这些字符串转成DOM树，DOM树中的内容会被解析成DOM节点，那就是说，我们在操作DOM本质上就是操作每一个节点，页面中的任何内容都是节点。
attributes
元素的所有属性集合。每一个属性都会对应一个下标，它还有一个length属性，代表属性的个数。
html代码
<div id="div1" class="div1" style="100px"></div>
js代码
1 var div1=document.getElementById("div1");
2 console.log(div1.attributes);//{0: id, 1: class, 2: style, length: 3}
nodeType
语法：
1 节点.nodeName;
返回值：
返回节点的类型，这个节点类型是一个数字。
html代码
1 <div id="div1"></div>
js代码
1 var div1=document.getElementById("div1");
2 console.log(div1.nodeType);//1
nodeName
语法：
1 节点.nodeName;
返回值：
返回节点的名字。
html代码
1 <div id="div1"></div>
js代码
1 var div1=document.getElementById("div1");
2 console.log(div1.nodeName);//DIV
任何节点都有这个属性（文本、注释）。
tagName
语法：
1 元素.tagName;
返回值：
返回元素的标签名（大写）。
1 console.log(document.body.tagName);//BODY
只有标签元素才有这个属性。
parentNode
语法：
1 节点.parentNode;
返回值：
返回这个节点的父节点。
html代码
1 <div id="box">
2 <p id="p1"></p>
3 </div>
js代码
1 var div1=document.getElementById("box");
2 var p1=document.getElementById("p1");
3 var div11=div1.attributes[0];
4 var p11=p1.attributes[0];
5 console.log(p1.parentNode);//div1
6 console.log(p11.parentNode);//null
属性节点是没有父节点的。
childNodes
语法：
1 元素.childNodes;
返回值：
返回的是元素第一层的所有子节点的集合，包含文本和注释节点。
children
语法：
1 元素.children;
返回值：
返回的是元素第一层的所有子节点的集合，但是它只包含标签元素。它是一个类数组，每一个子节点都会对应一个下标，可以通过下标值取到某个子节点。
firstElementChild
语法：
1 元素.firstElementChild;
返回值：
返回这个元素下的第一个子节点，如果没有，返回null。
lastElementChild
语法：
1 元素.lastElementChild;
返回值：
返回这个元素下的最后一个子节点，如果没有，返回null。
previousElementSibling
语法：
1 节点.previousElementSibling;
返回值：
返回节点的上一个兄弟节点，如果没有找到，那返回一个null。
nextElementSibling
语法：
1 节点.nextElementSibling;
返回值：
返回节点的下一个兄弟节点，如果没有找到，那返回一个null。
offsetParent
作用：
找到最近的有定位(不能为static)的父级，它会一层一层往外找，如果没找到的话，默认为body。父级必需为相对定位或者绝对定位，自己有没有定位无所谓。
语法：
1 元素.offsetParent;
offsetTop
作用：
找到最近的有定位的父级，获取到它与父级的top距离（从元素的最上边到定位父级的最上边的距离 ）。
语法：
1 元素.offsetTop;
如果没找到有定位的父级，默认是到html的距离。
offsetLeft
作用：
找到最近的有定位的父级，获取到它与父级的left距离（从元素的最左边到定位父级的最左边的距离）。
语法：
1 元素.offsetLeft;
如果没找到有定位的父级，默认是到html的距离。
getAttribute()
作用：
获取属性，它不光能获取标签自带的属性，也可以获取到自定义属性。
语法：
1 元素.getAttribute(属性名);
参数：
要获取的属性名字。
返回值：
返回属性名对应的属性值，假如是src或者href地址，里面的地址是什么，获取到的就是什么（颜色值也一样）。
setAttribute()
作用：
设置属性，可以设置自定义属性，也可以设置标签自带的属性。
语法：
1 元素.setAttribute(attr,value);
参数：
attr 要设置的属性名。
value 要设置的属性值。
返回值：
无。
removeAttribute()
作用：**
删除属性。
语法：
1 元素.removeAttribute(attr);
参数：
要删除的那个属性名字。
返回值：
无。
getBoundingClientRect()
作用：
获取元素的盒模型的相关信息（如：width、height、left等）。
语法：
1 元素.getBoundingClientRect();
返回值：
返回一个对象，这个对象当中存了元素的盒模型的相关信息。
注意：
得到的left，是元素左边到左边可视区的距离。
得到的right，是元素右边到左边可视区的距离。
得到的top，是元素上边到上边可视区的距离。
得到的bottom，是元素下边到上边可视区的距离。
得到的width，是包含边框的。\
createElement()
作用：
根据参数的名字创建相对应的标签。
语法：
1 document.createElement(tagName);//只有document才有这个方法
参数：
要创建的标签名字。
返回值：
返回新创建的元素。
创建后的标签可以给它添加属性样式等，但是它不能创建文本、注释节点。
appendChild()
作用：
往父级元素里面添加相应的子节点。
语法：
1 父节点.appendChild(childNode);
参数：
要添加的元素(只能是一个标签节点)。
返回值：
返回要添加的那个元素（参数）。
removeChild()
作用：
删除节点。
语法：
1 父节点.removeChild(childNodes);
参数：
要删除的子节点（只能为单个节点）。
返回值：
被删除的元素（参数），这个方法可以把文本节点与注释节点删掉。
insertBefore()
作用：
插入节点，把一个节点插入到另一个节点前面。
语法：
1 父节点.insertBefore(childNode1,childNode2);
参数：
childNode1 要插入的节点。
childNode2 决定插入节点位置的节点。
第二个参数的结果为null的话，相当于appendChild，把参数1的节点添加到父节点的最后。两个参数必需同时存在，不然会报错 。
返回值：
返回要插入的节点（第一个参数） 。
replaceChild()
作用：
替换节点，用节点1替换节点2 。
语法：
1 父节点.replaceChild(node,childNode);
参数：
node 替换成的节点。
childNode 被替换的节点。
两个参数必需同时出现，不然报错。
返回值：
返回被替换掉的那个元素（参数2）。
cloneNode()
作用：
克隆节点。
语法：
1 要被克隆的节点.cloneNode(Boolean);
参数：
true 克隆元素和元素包含的子孙节点。
false 克隆元素但不包含元素的子孙节点。
如果没有参数，默认为false。
返回值：
返回被克隆的节点。
文本节点与注释节点都可以被克隆，克隆的只克隆css、html不克隆js。克隆后的节点的id与原来的是一样，所以要修改一下。
可视区的宽高
1 document.documentElement.clientWidth;//可视区的宽
2 document.documentElement.clientHeight;//可视区的高
如果窗口改变，这两个值也会改变。
获取元素的宽高
元素的宽：
1 元素.offsetWidth;//得到元素的宽度，包含边框
2 元素.clientWidth;//得到元素的宽度，不包含边框
元素的高：
1 元素.offsetHeight;//得到元素的高度，包含边框
2 元素.clientHeight;//得到元素的高度，不包含边框
滚动条距离
1 document.body.scrollTop;//Chrome
2 document.documentElement.scrollTop;//其它
DOM操作元素的特性
appendChild、insertBefore、replaceChild在操作一个已有的元素时， 是将已有的元素移动(剪切)，而不是复制一份进行操作。
innerHTML与DOM的区别
用innerHTML方法添加后，其它是先把原来的内容清空，再把新的内容添加进来，所以原来的事件会被删除。
DOM方法只是在原来的基础上增加了一些元素，原来的事件还会有。
动态获取元素和静态获取元素
getElementsByTagName：
动态获取元素，一旦获取的元素有变化，那它就会重新获取一下，原来的索引就会变成新获取的。
querySelectorAll：
静态获取元素，只获取一次，每个元素对应的下标是不会变的，即使元素有变化，它也不会重新再去获取，原来的下标不会变。