理解DOM
DOM就是Document Object Model 的缩写，翻译成中文是文档对象模型的意思，国人都这么翻译，这里不纠结它的真正中文意思。先来说说DOM这个东西在js中的各种问题。
DOM是由W3C来定义的，该组织把访文档定义为一个虚拟的物（对象，在程序的世界里，你可以把万事万物都当成对象）
文档：指的是html文档
对象：指的是html文档页面中的元素（也叫节点）
DOM定义了让javascript程序能够去操作文档中的元素节点。DOM把html文档虚拟成一棵树：
DOM同时还定义了很多操作文档节点的方法，例如我们经常在用的getElementById,getElementByTagName等。
有了这一点点的铺垫，我们接下就是要开始操作DOM了，代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</script>
</head>
<body>
<div id="dvi1">
<p>
11111
</p>
<ul id="ul1" style="border:1px solid 1px;">
<li>11111</li>
<li>22222</li>
<li>33333</li>
</ul>
</div>
</body>
</html>
现在我想获取ul下的子节点，怎么获取？
DOM中，Object对象有一个属性：childNodes，从它的这个s你就能够猜得出来，这是一个集合。
我们先找到ul:
1 var oUl = document.getElementById('ul1');
然后我们就可以通过oUl的属性childNodes来获取它的子节点了：
alert(oUl.childNodes.length);
这句代码会输出oUl下的子字节的个数，不过有个问题来了，在标准浏览器下，输出7，在非标准的IE（<ie9 ）下，输出3,什么意思？这种奇葩问题也只有微软才做得到，原来在标准下，节点中的文本也被当成了一个节点，叫文本节点，注意，还有一个：换行也是文本，所以也算一个节点：
这回就能解释为啥标准下输出ul的子节点是7个了：三个li+三个文本节点+ 一个换行的空文本节点。
PS,关于DOM节点的一些定义，请看w3c的官方文档：
http://www.w3.org/TR/2000/REC-DOM-Level-2-Core-20001113/DOM2-Core.txt
其中，DOM节点（Node）的种类(Node Type)有12种：
// NodeType
const unsigned short ELEMENT_NODE = 1;
const unsigned short ATTRIBUTE_NODE = 2;
const unsigned short TEXT_NODE = 3;
const unsigned short CDATA_SECTION_NODE = 4;
const unsigned short ENTITY_REFERENCE_NODE = 5;
const unsigned short ENTITY_NODE = 6;
const unsigned short PROCESSING_INSTRUCTION_NODE = 7;
const unsigned short COMMENT_NODE = 8;
const unsigned short DOCUMENT_NODE = 9;
const unsigned short DOCUMENT_TYPE_NODE = 10;
const unsigned short DOCUMENT_FRAGMENT_NODE = 11;
const unsigned short NOTATION_NODE = 12;
我们平时用得最多的，就是前面的三种了。它们分别是元素节点，属性节点，文本节点。
知道了DOM中的Node 有这么多类型，那我们怎么来判断获取到的childNodes是一个元素节点还是文本节点呢？因为我们很多时间要操作只是元素节点，不需要操作文件节点。
这些DOM都已经帮我们定义好了：
alert(oUl.childNodes[0].nodeType);
nodeType会返回节点的类型，这里输出3，对比上面的NodeType,那3就是TEXT_NODE,即文本。而这个正好是ul和第一个li之间的代码换行。
通过这个nodeType，我们就能精确知道哪个元素，如个是文本，这样我们要操作节点的样式就好办了。
然后来看看怎么操作节点的属性，如果获取到一个元素之后 ，那就可以用attributes来获取到元素的属性：
元素.attributes
alert(oUl.childNodes[1].attributes.length);
这里我们简单的返回元素上的属性个数。
其实要操作元素上的属性，我们还有两个方法，可以返回属性的名称和属性值 ：
1 alert(oUl.attributes[0].name);
2 alert(oUl.attributes[0].value);
以上代码输出ul上的第一个属性名称和属性的值：id 和 ul1
注意：childNodes只包含一级子节点，不包含子节点下的孙级节点
1 <ul id="ul1" style="border:1px solid 1px;">
2 <li>11111</li>
3 <li>22222</li>
4 <li>33333<p>ppp</p></li>
5 </ul>
以上代码中，p标签不会被childNodes返回
浙公网安备 33010602011771号