在javascript中建立節點的方法有哪些

javascript中建立節點的方法：1、createElement()方法，可以建立元素節點；2、createTextNode()方法，可以建立文字節點；3、createAttribute()方法，可以建立屬性節點。

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

javascript中建立節點的方法

#1、createElement()方法：建立元素節點

使用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元素下

2、createTextNode() 方法：建立文字節點

#使用 document 物件的 createTextNode() 方法可建立文字節點。用法如下：

document.createTextNode(data)

• 參數 data 表示字串。

範例

下方範例建立一個新 div 元素，並為它設定 class 值為 red，然後新增到文件中。

var element = document.createElement("div");
element.className = "red";
document.body.appendChild(element);

由於 DOM 操作等原因，可能會出現文字節點不包含文本，或接連出現兩個文本節點的情況。為了避免這種情況的發生，一般會在父元素上呼叫 normalize() 方法，刪除空文本節點，合併相鄰文字節點。

3、createAttribute()方法：建立屬性節點

使用document 物件的createAttribute() 方法可以建立屬性節點，具體用法如下：

document.createAttribute(name)

參數name 表示新建立的屬性的名稱。

範例1

下方範例建立一個屬性節點，名稱為align，值為center，然後為標籤

<div id="box">document.createAttribute(name)</div>
<script>
    var element = document.getElementById("box");
    var attr = document.createAttribute("align");
    attr.value = "center";
    element.setAttributeNode(attr);
    console.log(element.attributes["align"].value);  //"center"
    console.log(element.getAttributeNode("align").value);  //"center"
    console.log(element.getAttribute("align"));  //"center"
</script>

<div id="div1" title="div"></div>

divElement.attributes = {
    id : "div1",
    class : "style1",
    lang : "en",
    title : "div"
}

<img id="img1" src="" />
<script>
    var img = document.getElementById("img1");
    img.setAttribute("src", "http://www.w3.org");  //HTML 属性
    img.src = "http://www.w3.org";  //JavaScript 属性
</script>