元素节点就是HTML标签元素，元素节点主要提供了对元素标签名、子节点及属性的访问；
元素节点的三个node属性：nodeType：1、nodeName/TagName：元素的标签名大写、nodeValue：null；
其父节点 parentNode 指向包含该元素节点的元素节点 Element 或文档节点 Document；
元素的 childNodes 属性中包含了它的所有子节点，这些子节点可能是元素、文本、注释、处理指令节点；
childNodes 结合 NodeType 可以检查有几个元素子节点：
<ul> <li></li> <li></li> </ul> <script> var oList = document.getElementById('list'); var children = oList.childNodes; var num = 0; for(var i = 0; i < children.length; i++){ if(children[i].nodeType == 1){ num++; } } console.log(num);//2 有2个元素子节点 </script>
操作属性的方法主要有hasAttribute()、getAttribute()、setAttribute()、removeAttribute()四个，可以针对任何属性使用，包括那些以HTMLElement类型属性的形式定义的属性；
obj.hasAttribute(attr)方法返回一个布尔值，表示当前元素节点是否包含指定属性；
IE6/IE7不支持 hasAttribute() 方法；
obj.hasAttribute(attr)检测 class 属性时，直接用 class 就可以了，不要用className;
obj.hasAttribute(attr)检测 for属性时，直接用 for就可以了，不要用htmlFor;
<div for="nice">123</div> <script type="text/javascript"> var oTest = document.getElementById('test'); //IE6/IE7不支持hasAttribute方法 console.log(oTest.hasAttribute('class'));//true console.log(oTest.hasAttribute('className'));//false console.log(oTest.hasAttribute('id'));//true console.log(oTest.hasAttribute('style'));//true console.log(oTest.hasAttribute('for'));//true console.log(oTest.hasAttribute('htmlFor'));//false </script>
obj.getAttribute(attr)方法用于取得属性的值，如果给定名称的属性不存在或无参数则返回null；
obj.getAttribute(attr)获取 class 时，直接用 class 就可以了；IE6/IE7除外，IE6/IE7的 getAttribute(attr) 方法要用 className；
obj.getAttribute(attr)获取 for时，直接用 for就可以了；
obj.setAttribute(attr,value)方法接受两个参数：要设置的属性名和值，如果已经存在，则替换现有的值。如果属性不存在，则创建该属性并设置相应的值。该方法无返回值；
obj.setAttribute(attr,value)设置 class 时，直接用 class 就可以了；
obj.setAttribute(attr,value)设置 for 时，直接用 for 就可以了；
obj.setAttribute(attr,value)设置 style 时，直接用 style 就可以了；在 IE7及以下，用 obj.style.setAttribute("cssText",value); 这里的 style 只是行间样式；
我们一般用 obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr]; 来获取元素当前样式；
<script type="text/javascript"> var oTest = document.getElementById('test'); oTest.setAttribute('class','aaa'); //setAttribute直接用class就可以了 oTest.setAttribute('className','bbb'); console.log(oTest.class);//undefined IE8及以下会报错缺少标识符 console.log(oTest.getAttribute('class'));//aaa getAttribute直接用class就可以了 console.log(oTest.className);//aaa console.log(oTest.getAttribute('className'));//bbb oTest.setAttribute('style','border:1px solid red;height: 100px;'); //setAttribute直接用 style 就可以了 console.log(oTest.style);//所有的style设置，包括你没有设置的，太多了，肯定不是你想要的 console.log(oTest.getAttribute('style')); //border:1px solid red;height: 100px; getAttribute直接用 style 就可以了 oTest.setAttribute('for','eee'); //setAttribute直接用for就可以了 oTest.setAttribute('htmlFor','fff') console.log(oTest.for);//undefined IE8及以下会报错缺少标识符 console.log(oTest.htmlFor);//undefined console.log(oTest.getAttribute('for'));//eee getAttribute直接用for就可以了 console.log(oTest.getAttribute('htmlFor'));//fff console.log(oTest); //<div for="eee" classname="bbb" htmlfor="fff">123</div> </script>
obj.removeAttribute(attr)方法用于彻底删除元素的属性，这个方法不仅会彻底删除元素的属性值，还会删除元素属性。该方法无返回值；
<div for="nice">123</div> <script type="text/javascript"> var oTest = document.getElementById('test'); oTest.removeAttribute('class'); //removeAttribute直接用class就可以了 oTest.removeAttribute('for'); oTest.removeAttribute('style'); console.log(oTest);// <div>123</div> </script>
属性节点
属性节点，有的叫特性节点，差不多一个意思；
属性节点的三个node属性，nodeType:2、nodeName/name:属性名称、nodeValue/value：属性值；