DOM的相关概念
【前面的话】DOM全称是Document Object Model，即文档对象模型。我们常说的html文档其实就是一个DOM树，DOM操作就是在内存中找到DOM树上我们想要的DOM对象，对它的属性进行修改，然后渲染引擎会把修改的结果重新绘制在界面上。DOM里面涵盖的知识点还是很多的，尤其是到后来要兼容浏览器的时候是很绕的，这次先讲一些DOM的相关概念，等聊完BOM之后，我会再针对兼容浏览器这块做个小总结。
1、节点的属性：
① nodeType
//节点 //nodeType 1-元素节点 ， 2-属性节点 ， 3-文本节点
② nodeName
// nodeName 如果是标签则返回的是标签的名称；如果是文本则返回的是#text；如果是属性节点则返回属性的名称
③ nodeValue
// nodeValue 如果是标签则始终返回null ； 如果是文本节点则返回文本的内容 ； 如果是属性节点则返回属性的值
④节点的复制
element.cloneNode(); // 克隆一个新的DOM对象；参数为Boolean类型，true赋值子节点，false不复制子节点 element.appendChild(); // 追加元素
2、自定义属性：
2.1 任何浏览器都可以通过dom对象获取到标签的预定义属性
2.2 chrome，新版IE（9及以上）无法获取标签的自定义属性；但IE8以前是可以通过dom对象获取到标签的自定义属性
2.3 如何在任何浏览器中显示自定义属性呢？？
——getAttribute可以获取标签的预定义属性；通过自定义属性获得的类型都是String
——设置属性的值：element.setAttribute（name,value）
——移除属性：element.removeAttribute(name)
附：
1 element.className = " "; //仅删除class类的值，保留类名 2 element.removeAttribute("class") //完全删除这个类
2.4 属性的相关操作
1 // 获取属性节点 2 var attrNode = box.getAttributeNode（"id"）； 3 console.log(attrNode.nodeType); //属性节点的nodeType 2 4 console.log(attrNode.nodeName); //属性节点的nodeName 属性的名称 5 console.log(attrNode.nodeValue); //属性节点的nodeValue 属性的值 6 7 // 设置属性 setAttribute 8 9 // 移除属性 removeAttribute
3、层次结构
——父节点：parentNode
① 子节点：
1 childNodes 所有的子节点——DOM标准的方法，除了获取子标签以外，还会获取文本节点；IE8以前会忽略空白节点 2 children 所有的子元素——非标准的DOM方法，但是几乎所有的浏览器都支持，只会获取元素节点
② 兄弟节点，所有浏览器都支持
1 element.nextSibling 下一个兄弟节点，可能是非元素节点，会获取到文本节点 2 element.nextElementSibling 获取下一个紧邻的兄弟元素，会忽略空白 // IE8以前不支持此属性 3 4 element.previousSibling 上一个兄弟节点，可能是非元素节点，会获取到文本节点 5 element.previousSibling 获取上一个紧邻的兄弟元素，会忽略空白 // IE8以前不支持此属性
③兄弟元素，IE8以前不支持
1 previousElementSibling 上一个兄弟节点 2 nextElementSibling 下一个兄弟节点
