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()

當在某個節點上調用該方法時，就會在該節點的後代節點中查找，如果查到空文本節點，則刪除它，如果找到相鄰的文本節點，則將它們合併爲一個文本節點。