但是上面我们有getAttribute,setAttribute(),removeAttribute()方法，我们可以使用这些方法足够代替上面介绍的几个方法，但是如果想遍历一个元素上有多少个属性时，attributes这个就可以派上用上了，如下代码：
HTML代码如下：
<div title="aa" data-value="test1"></div>
JS代码如下：
var div = document.getElementById("test"); function outputAttributes(element) { var arrs = new Array(); var attrName, attrValue, i, len; for(i = 0, len = element.attributes.length; i < len; i++) { attrName = element.attributes[i].nodeName; attrValue = element.attributes[i].nodeValue; arrs.push(attrName + "='" + attrValue + "'"); } return arrs.join(" "); } console.log(outputAttributes(div));
结果打印如下：
id='test' title='aa' data-value='test1'
上面的函数使用一个数组来保存名值对，最后再以空格为分隔符将它们拼接起来，但是上面的代码我们需要注意两点：
1.针对attributes对象中的特性，不同的浏览器返回的顺序不同。
2.IE7及更早的版本会返回HTML元素中所有可能的特性，包括没有指定的特性；
针对IE7的问题我们可以进行改进，我们都知道，每个特性节点都有一个名为specified的属性，这个属性值如果为true，则意味着要么在HTML中指定了相应的特性，要么通过setAttribute方法设置了该特性，在IE中，所有为设置过的特性该属性的之都为false；如下代码：
var div = document.getElementById("test"); function outputAttributes(element) { var arrs = new Array(); var attrName, attrValue, i, len; for(i = 0, len = element.attributes.length; i < len; i++) { attrName = element.attributes[i].nodeName; attrValue = element.attributes[i].nodeValue; if(element.attributes[i].specified) { arrs.push(attrName + "='" + attrValue + "'"); } } return arrs.join(" "); } console.log(outputAttributes(div));
理解元素的子节点
元素可以有任意数目的子节点和后代节点，元素的childNodes属性中它包含了它的所有子节点，这些子节点可能是元素，文本节点，注释或处理指令；不同的浏览器子节点的个数不一样，下面我们来看看demo如下：
<ul> <li>11</li> <li>22</li> <li>33</li> </ul>
JS代码如下：
复制代码 代码如下:
var list = document.getElementById("list");
console.log(list.childNodes);
console.log(list.childNodes.length);
我们之前在上面讲过，在标准浏览器下(IE9+,firefox,chrome)下，打印的长度是7个，因为他们把空格也包含上去，在IE8-及以下的浏览器返回的是3个子元素，这是表现的正常情况下，但是如果我现在把html元素的空格都去掉的话，那么所有的浏览器都会返回3个子元素，如下代码：
<ul><li>11</li><li>22</li><li>33</li></ul>
JS代码如下：
复制代码 代码如下:
var list = document.getElementById("list");
console.log(list.childNodes);
console.log(list.childNodes.length);
那么平时我们不可能都这样小心小意的编写html代码的，因为一步小心就有一个空格产生，因此我们可以如下判断下是不是元素节点；如下代码演示：
<ul> <li>11</li> <li>22</li> <li>33</li> </ul>
JS代码如下：
var list = document.getElementById("list"); var arrs = []; for(var i = 0, ilen = list.childNodes.length; i < ilen; i++) { var curElement = list.childNodes[i]; if(curElement.nodeType === 1){ arrs.push(curElement); } } console.log(arrs); console.log(arrs.length); // 3
如上代码在所有的浏览器都支持，通过判断该元素是不是元素节点，然后在执行后续操作；不是元素节点都会过滤掉，因此返回的长度都为3；
理解Text类型
Text节点具有以下特征：
nodeType的值为3；
nodeName的值为”#text”;
nodeValue的值为节点所包含的文本；
parentNode是一个Element；
没有子节点；
1.创建文本节点；
可以使用document.createTextNode()创建新文本节点，这个方法需要一个参数，即要插入的文本，如下代码：
var element = document.createElement("div"); var text = document.createTextNode("aa"); element.appendChild(text); document.body.appendChild(element);
2. 分割文本节点splitText(offset); 从offset指定的位置将当前的文本节点分成2个文本节点；如下代码：
var element = document.createElement("div"); var text = document.createTextNode("aabbbccc"); element.appendChild(text); document.body.appendChild(element); var newNode = element.firstChild.splitText(5); console.log(element.firstChild.nodeValue); // aabbb console.log(newNode.nodeValue); // ccc console.log(element.childNodes.length); // 2
浏览器支持的程度有IE，firefox,chrome都支持；
理解DOM操作—动态插入脚本
我们动态插入JS脚本，常见的写法有如下代码即可插入：
var script = document.createElement("script"); script.type ="text/javascript"; script.src = 'a.js'; document.body.appendChild(script);
即可在body最后面动态插如a.js，此动态插入不会堵塞浏览器加载；我们为了更加扩张性，我们也可以封装一个函数，如下代码：