在javascript中如何創建節點

這篇文章主要為大家展示了“在javascript中如何創建節點”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“在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"> 設置屬性 align，最后分別使用 3 種方法讀取屬性 align 的值。

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

屬性節點一般位于元素的頭部標簽中。元素的屬性列表會隨著元素信息預先加載，并被存儲在關聯數組中。例如，針對下面 HTML 結構。

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

當 DOM 加載后，表示 HTML div 元素的變量 divElement 就會自動生成一個關聯集合，它以名值對形式檢索這些屬性。

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

在傳統 DOM 中，常用點語法通過元素直接訪問 HTML 屬性，如 img.src、a.href 等，這種方式雖然不標準，但是獲得了所有瀏覽器的支持。

示例2

img 元素擁有 src 屬性，所有圖像對象都擁有一個 src 腳本屬性，它與 HTML 的 src 特性關聯在一起。下面兩種用法都可以很好地工作在不同瀏覽器中。

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

類似的還有 onclick、style 和 href 等。為了保證 JavaScript 腳本在不同瀏覽器中都能很好地工作，建議采用標準用法，而且很多 HTML 屬性并沒有被 JavaScript 映射，所以也就無法直接通過腳本屬性進行讀寫。

以上是“在javascript中如何創建節點”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！