DOM属性及操作

DOM属性及操作

DOM（文档对象模型）是针对HTML和XML文档的一个API(应用程序编程接口)

一、同胞节点

previousSibling属性和nextSibling属性

if(someNode.nextSibling===null){
 alert("Last node in the parent's childNodes list.");
}else if(someNode.previousSibling===null){
 alert("First node in the parent's childNodes list.");
}

二、appendChild()

appendChild()，用于向childNodes列表的末尾添加一个节点。

var returnedNode=someNode.appendChild(newNode);
alert(returnedNode==newNode); //true
alert(someNode.lastChild==newNode); //true

如果传入到appendChild()中的节点已经是文档的一部分了，那结果就是将该节点从原来的位置移到新位置。如果在调用appendChild()时传入了父节点的第一个子节点，那么该节点就会成为父节点的最后一个子节点。

//someNode有多个子节点
var returnedNode=someNode.appendChild(someNode.firstChild);
alert(returnedNode==someNode.firstChild); //false
alert(returnedNode==someNode.lastChild); //true

三、insertBefore()

这个方法接受两个参数：要插入的节点和作为参数的节点。

//插入后成为最后一个子节点
returnedNode=someNode.insertBefore(newNode,null);
alert(newNode==someNode.lastChild); //true

//插入后成为第一个子节点
var returnedNode=someNode.insertBefore(newNode,someNode.firstChild);
alert(returnedNode==newNode); //true
alert(newNode==someNode.firstChild); //true

//插入到最后一个子节点前面
returnedNode=someNode.insertBefore(newNode,someNode.lastChild);
alert(newNode==someNode.childNodes[someNode.childNodes.length-2]); //true

四、replaceChild()

replaceChild()方法接受的两个参数是：要插入的节点和要替换的节点

//替换第一个子节点
var returnedNode=someNode.replaceChild(newNode,someNode.firstChild);

//替换最后一个子节点
returnedNode=someNode.replaceChild(newNode,someNode.lastChild);

五、removeChild()

这个方法接受一个参数，即要移除的节点

//移除第一个子节点
var formerFirstChild=someNode.removeChild(someNode.firstChild);
//移除最后一个子节点
var formerLastChild=someNode.removeChild(someNode.lastChild);

六、cloneNode()

cloneNode()用于创建调用这个方法的节点的一个完全相同的副本。cloneNode()方法接受一个布尔参数值，表示是否执行深复制。参数为true,执行深复制，也就是复制节点及其整个子节点数，参数为false，执行浅复制，即复制节点本身。
假设有下面的HTML代码：

<ul>
 <li>item 1</li>
 <li>item 2</li>
 <li>item 3</li>
</ul>

如果我们已经将ul元素的引用保存在了变量myList中，那么通常下面代码就可以看出使用cloneNode()方法的两种模式。

var deepList=myList.cloneNode(true);
alert(deepList.childNodes.length); //3(IE<9)或7（其他浏览器）

var shallowList=myList.cloneNode(false);
alert(shallowList.childNodes.length); //0

七、normalize()

当在某个节点上调用该方法时，就会在该节点的后代节点中查找，如果查到空文本节点，则删除它，如果找到相邻的文本节点，则将它们合并为一个文本节点。