DOM操作
节点-node
DOM1级定义了一个Node接口，该接口将由DOM中的所有节点类型实现。
这个Node接口在js中是作为Node类型实现的；除IE，其他all浏览器都能访问到这个类型。ie中数字？
js中all节点类型都继承自Node类型，so all节点类型共享着相同的基本属性和方法。
nodeType
每个节点都有 nodeType 只读
用数字可以兼容IE（只识别数字）和标准浏览器
元素 ：1
属性：2
文本：3
注释：8
文档：9
……
nodeName 属性
nodeName 属性规定节点的名称。
- nodeName 是只读的
- 元素节点的 nodeName 与标签名相同
- 属性节点的 nodeName 与属性名相同
- 文本节点的 nodeName 始终是 #text
- 文档节点的 nodeName 始终是 #document
- 注释：nodeName 始终包含 HTML 元素的大写字母标签名。
nodeValue 属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
节点关系
- all节点都有一个childNodes属性：parentNode:all节点都有
- 其中保存着一个nodeList对象--类数组对象：保存一组有序节点，可通过位置访问这些节点，如nodeList[0]
- 由length属性，但不是Array的实例。……高程p249 动态性、转数组方法、IE8之前不兼容
- 同胞节点：nextSibling previousSibling：childNodes列表中每个节点间互相是同胞节点 若没有则是null
- firstChild lastChild 同childNode[0] childNode[...length-1]
！！！注意： 节点类型不只是由元素类型,还有属性节点、文本节点等 所以childnode nextSibling previousSibling 等不一定只是元素节点
例：
<div id="div1">
<span id="span1"></span>
<span id="span2"></span>
</div>
<script>
var div1=document.getElementById("div1");
var span1=document.getElementById("span1");
var span2=document.getElementById("span2");
console.log(div1.childNodes);
</script>
如果内容是用js拼接的可以规避无用空文本节点，静态和HTML经常有空文本。
如何规避？
DOM操作
appendChild()
用法：someNode.appendChild(newNode)
如果出传入到appendChild()的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置。相当于剪切。
insertBefore()
用法：someNode.insertBefore(newNode,refeNode)//若refeNode=null 则功能同appendChild()
以上两种方法只插入节点（或移动）不会移除，下面两个方法移除。
replaceChild()
用法：someNode.replaceChild(newNode,oldNode)
被替换的节点将由这个方法返回，并从文档树中被移除。仍然还在文档中，但是在文档中没了自己的位置。
removeChild() ：被移除的节点将成为方法的返回值。
即使可以将DOM树看成是由一系列指针连接起来的，但任何DOM节点也不可能同时出现在文档中的多个位置。
其他方法
cloneNode（） 新节点 游离在文档中
深复制cloneNode（true） 复制节点 及整个子节点树
浅复制cloneNode（false）只复制节点本身
