JS操作元素節點（非常詳細）

在用戶端開發中，大部分操作都是針對元素節點的。主要特徵值：nodeType 等於 1，nodeName 等於標籤名稱，nodeValue 等於 null。元素節點包括 5 個公共屬性：id（識別符號）、title（提示標籤）、lang（語言編碼）、dir（語言方向）、className（CSS 類樣式），這些屬性可讀可寫。

存取元素

1) getElementById()方法

使用 getElementById() 方法可以準確獲取文件中指定元素。用法如下：

document.getElementById(ID);

引數 ID 表示文件中對應元素的 id 屬性值。如果文件中不存在指定元素，則返回值為 null。該方法只適用於 document 物件。

【範例1】在下面範例中，使用 getElementById() 方法獲取 <div id="box"> 物件，然後使用 nodeName、nodeType、parentNode 和 childNodes 屬性檢視該物件的節點型別、節點名稱、父節點和第一個子節點的名稱。

<div id="box">盒子</div>
<script>
    var box = document.getElementById("box");  //獲取指定盒子的參照
    var info = "nodeName:" + box.nodeName;  //獲取該節點的名稱
    info += "rnodeType:" + box.nodeType;  //獲取該節點的型別
    info += "rparentNode:" + box.parentNode.nodeName;  //獲取該節點的父節點名稱
    info += "rchildNodes:" + box.childNodes[0].nodeName;  //獲取該節點的子節點的名稱
    console.log(info);  //顯示提示資訊
</script>

2) getElementByTagName()方法

使用 getElementByTagName() 方法可以獲取指定標籤名稱的所有元素。用法如下：

document.getElementsByTagName(tagName)

引數 tagName 表示指定名稱的標籤，該方法返回值為一個節點集合，使用 length 屬性可以獲取集合中包含元素的個數，利用下標可以存取其中某個元素物件。

【範例2】下面程式碼使用 for 迴圈獲取每個 p 元素，並設定 p 元素的 class 屬性為 red。

var p = documeng.getElementsByTagName("p");  //獲取p元素的所有參照
for (var i = 0; i < p.length; i ++) {  //遍歷p資料集合
    p[i].setAttribute("class", "red");  //為每個p元素定義red類樣式
}

遍歷元素

使用 parentNode、nextSibling、previousSibling、firstChild 和 lastChild 屬性可以遍歷文件樹中任意型別節點，包括空字元（文字節點）。HTML 5 新新增 5 個屬性專門存取元素節點。

• childElementCount：返回子元素的個數，不包括文字節點和注釋。
• firstElementChild：返回第一個子元素。
• lastElementChild：返回最後一個子元素。
• previousElementSibling：返回前一個相鄰兄弟元素。
• nextElementSibling：返回後一個相鄰兄弟元素。

瀏覽器支援：IE9+、FireFox3.5+、Safari4+、Chrome 和 Opera10+。

建立元素

使用 document 物件的 createElement() 方法能夠根據引數指定的標籤名稱建立一個新的元素，並返回新建元素的參照。用法如下：

var element = document.getElement("tagName");

其中，element 表示新建元素的參照，createElement() 是 document 物件的一個方法，該方法只有一個引數，用來指定建立元素的標籤名稱。

【範例1】下面程式碼在當前文件中建立了一個段落標記 p，儲存到變數 p 中。由於該變數表示一個元素節點，所以它的 nodeType 屬性值等於 1，而 nodeName 屬性值等於 p。

var p = document.createElement("p");  //建立段落元素
var info = "nodeName:" + p.nodeName;  //獲取元素名稱
info += ", nodeType:" + p.nodeType;  //獲取元素型別，如果為1則表示元素節點
console.log(info);

使用 createElement() 方法建立的新元素不會被自動新增到文件裡。如果要把這個元素新增到文件裡，還需要使用 appendChild()、insertBefore() 或 replaceChild() 方法實現。

【範例2】下面程式碼演示如何把新建立的 p 元素增加到 body 元素下。當元素被新增到文件樹中，就會立即顯示出來。

var p = document.createElement("p");  //建立段落元素
document.body.appendChild(p);  //增加段落元素到body元素下

複製節點

cloneNode() 方法可以建立一個節點的副本。

【範例1】在下面範例中，首先建立一個節點 p，然後複製該節點為 p1，再利用 nodeName 和 nodeType 屬性獲取複製節點的基本資訊，該節點的資訊與原來建立的節點基本相同。

var p = document.createElement("p");  //建立節點
var p1 = p.cloneNode(false);  //複製節點
var info = "nodeName:" + p1.nodeName;  //獲取複製節點的名稱
info += ", nodeType:" + p1.nodeType;  //獲取複製節點的型別
console.log(info);  //顯示複製節點的名稱和型別相同

【範例2】以範例 1 為基礎，在建立一個文字節點之後，嘗試把複製的文字節點增加到段落元素之中，再把段落元素增加到標題元素中，最後把標題元素增加到 body 元素中。如果此時呼叫複製文字節點的 nodeName 和 nodeType 屬性，則返回的 nodeType 屬性值為 3，而 nodeName 屬性值為 #text。

var p = document.createElement("p");  //建立一個p元素
var h1 = document.createElement("h1");  //建立一個h1元素
var txt = document.createTextNode("Hello World");  //建立一個文字節點
var hello = txt.cloneNode(false);  //複製建立的文字節點
p.appendChild(txt);  //把複製的文字節點增加到段落節點中
h1.appendChid(p);  //把段落節點增加到標題節點中
document.body.appendChild(h1);  //把標題節點增加到body節點中

【範例3】下面範例演示了如何複製一個節點及所有包含的子節點。當複製其中建立的標題 1 節點之後，該節點所包含的子節點及文字節點豆漿盃複製過來，然後增加到 body 元素的尾部。

var p = document.createElement("p");  //建立一個p元素
var h1 = document.createElement("h1");  //建立一個h1元素
var txt = document.createTextNode("Hello World");  //建立一個文字節點
p.appendChild(txt);  //把複製的文字節點增加到段落節點中
h1.appendChid(p);  //把段落節點增加到標題節點中
document.body.appendChild(h1);  //把標題節點增加到body節點中
var new_h1 = h1.cloneNode(true);  //複製標題元素及其所有子節點
document.body.appendChild(new_h1);  //把複製的新標題元素增加到文件中

由於複製的節點會包含原節點的所有特性，如果節點中包含 id 屬性，就會出現 id 屬性值重疊的情況。一般情況下，在同一個文件中，不同屬性的 id 屬性值應該不同。為了避免潛在衝突，應修改其中某個節點的 id 屬性值。

插入節點

在文件中插入節點主要包括兩種方法：

1) appendChild()方法

appendChild() 方法可向當前節點的子節點列表的末尾新增新的子節點。用法如下：

appendChild(newchild)

引數 newchild 表示新新增的節點物件，並返回新增的節點。

【範例1】下面範例展示了如何把段落文字增加到文件中的指定的 div 元素中，使它成為當前節點的最後一個子節點。

<div id="box"></div>
<script>
    var p = document.createElement("p");  //建立段落節點
    var txt = document.createTextNode("盒模型");  //建立文字節點，文字內容為“盒模型”
    p.appendChild(txt);  //把文字節點增加到段落節點中
    document.getElementById("box").appendChild(p);  //獲取box元素，把段落節點增加盡量
</script>

如果文件樹中已經存在引數節點，則將從文件樹中刪除，然後重新插入新的位置。如果新增的節點是 DocumentFragment 節點，則不會直接插入，而是把它的子節點插入當前節點的末尾。

將元素新增到文件樹中，瀏覽器會立即呈現該元素。此後，對這個元素所作的任何修改都會實時反映在瀏覽器中。

【範例2】在下面範例中，新建兩個盒子和一個按鈕，使用 CSS 設計兩個盒子顯示為不同的效果；然後為按鈕系結事件處理程式，設計當點選按鈕時執行插入操作。

<div id="red">
    <h1>紅盒子</h1>
</div>
<div id="blue">藍盒子</div>
<button id="ok">移動</button>
<script>
    var ok = document.getElementById("ok");  //獲取按鈕元素的參照
    ok.onclick = function () {  //為按鈕註冊一個滑鼠單擊事件的處理常式
        var red = document.getElementById("red");  //獲取紅色盒子的參照
        var blue= document.getElementById("blue");  //獲取藍色盒子的參照
        blue.appendChild(red);  //最後移動紅色盒子到藍色盒子中
    }
</script>

上面程式碼使用 appendChild() 方法把紅盒子移動到藍色盒子中間。在移動指定節點時，會同時移動指定節點包含的所有子節點，演示效果如圖所示。

---