属性节点还有一个 specified 属性，specified 是一个布尔值，用以区别特性是在代码中指定的，还是默认的。这个属性的值如果为true，则意味着在HTML中指定了相应特性，或者是通过 setAttribute() 方法设置了该属性。在IE中，所有未设置过的特性的该属性值都为false，而在其他浏览器中，所有设置过的特性的该属性值都是true，未设置过的特性，如果强行为其设置 specified 属性，则报错。
元素节点有一个 attributes 属性，它包含一个 NamedNodeMap，包含当前元素所有的属性及属性值，与NodeList类似，也是一个动态的集合。元素的每一个属性都由一个Attr节点表示，每个节点都保存在NamedNodeMap对象中，每个节点的 nodeName 就是属性的名称，节点的 nodeValue 就是属性的值；
createAttribute(attr) 创建新的属性节点；
attributes属性包含以下四个方法:
obj.attributes.setNamedItem(attr); 向列表中添加节点，该方法无返回值；要先创建属性，在以nodeValue的形式赋属性值，在传入setNamedItem
obj.attributes.getNamedItem(attr); 返回 nodeName 属性等于 attr 的节点；以" attr=value " 形式返回；
obj.attributes.removeNamedItem(attr); 从列表中移除 nodeName 属性等于 attr 的节点，并返回该节点；
obj.attributes.item(index); 返回位于下标 index 位置处的节点，也可以用[]代替， obj.attributes[index]；
<div for="nice">123</div> <script type="text/javascript"> var oTest = document.getElementById('test'); console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4} console.log(oTest.attributes.item(1).specified);//true console.log(oTest.attributes.getNamedItem('id'));//id='test' console.log(typeof oTest.attributes.getNamedItem('id'));//object console.log(oTest.attributes.removeNamedItem('for'));//id='test' console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, length: 3} var abc = document.createAttribute("abc"); abc.nodeValue = "1234567"; oTest.attributes.setNamedItem(abc); //obj.attributes.setNamedItem(attr) 要先创建属性，在以nodeValue的形式赋属性值，在传入setNamedItem console.log(oTest.attributes);// NamedNodeMap {0: class, 1: id, 2: style, 3: abc, length: 4} console.log(oTest.attributes.item(1));//id='test' console.log(oTest.attributes[1]);//id='test' </script>
attributes属性主要用于属性遍历。在需要将DOM结构序列化为HTML字符串时，多数都会涉及遍历元素特性
<div for="nice">123</div> <script type="text/javascript"> function outputAttributes(obj){ var arr = [], attrName, attrValue, i; for(i = 0; i < obj.attributes.length; i++){ attrName = obj.attributes[i].nodeName; attrValue = obj.attributes[i].nodeValue; arr.push(attrName + '=\"' + attrValue + '\"'); } return arr.join(" "); } var oTest = document.getElementById('test'); console.log(oTest.attributes);//NamedNodeMap {0: class, 1: id, 2: for, 3: style, length: 4} console.log(typeof oTest.attributes);//object console.log(outputAttributes(oTest)); //class="wrapper" for="nice" console.log(typeof outputAttributes(oTest));//string </script>
文本节点
文本节点的三个node属性，nodeType:3、nodeName:'#text'、nodeValue:节点所包含的文本，其父节点 parentNode 指向包含该文本节点的元素节点，文本节点没有子节点；
关于文本节点，遇到最多的兼容问题是空白文本节点问题。IE8及以下浏览器不识别空白文本节点，而其他浏览器会识别空白文本节点 ；所以有时候我们需要清理空白文本节点；
<div> <div>hello world!</div> </div> <script type="text/javascript"> var oTest = document.getElementById('test'); //第一个和最后一个都是空白文本节点 console.log(oTest.firstChild);//" " console.log(oTest.lastChild);//" " console.log(oTest.childNodes);//[text, div, text] //标准浏览器输出[text, div, text]，text表示空白文本节点 //IE8及以下浏览器输出[div]，并不包含空白文本节点 console.log(oTest.childNodes.length); //3 //标准浏览器返回3 //IE8及以下浏览器返回1，并不包含空白文本节点 //清理空白文本节点 function cleanWhitespace(oEelement){ for(var i = 0; i < oEelement.childNodes.length; i++){ var node = oEelement.childNodes[i]; if(node.nodeType == 3 && !/\S/.test(node.nodeValue)){ node.parentNode.removeChild(node); } } } cleanWhitespace(oTest); console.log(oTest.childNodes);//[div] console.log(oTest.childNodes.length); //1 </script>
文本节点属性：
文本节点的 data 属性与 nodeValue 属性相同；
wholeText 属性将当前 Text 节点与毗邻的 Text 节点，作为一个整体返回。大多数情况下，wholeText 属性的返回值，与 data 属性和 textContent 属性相同；
文本节点的 length 属性保存着节点字符的数目，而且 nodeValue.length、data.length 也保存着相同的值；