站長資訊網(wǎng)
javascript中創(chuàng)建節(jié)點(diǎn)的方法：1、createElement()方法，可以創(chuàng)建元素節(jié)點(diǎn)；2、createTextNode()方法，可以創(chuàng)建文本節(jié)點(diǎn)；3、createAttribute()方法，可以創(chuàng)建屬性節(jié)點(diǎn)。
本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。
javascript中創(chuàng)建節(jié)點(diǎn)的方法
1、createElement()方法：創(chuàng)建元素節(jié)點(diǎn)
使用 document 對象的 createElement() 方法能夠根據(jù)參數(shù)指定的標(biāo)簽名稱創(chuàng)建一個新的元素節(jié)點(diǎn)，并返回新建元素的引用。用法如下：
var element = document.getElement("tagName");
其中，element 表示新建元素的引用，createElement() 是 document 對象的一個方法，該方法只有一個參數(shù)，用來指定創(chuàng)建元素的標(biāo)簽名稱。
【示例1】下面代碼在當(dāng)前文檔中創(chuàng)建了一個段落標(biāo)記 p，存儲到變量 p 中。由于該變量表示一個元素節(jié)點(diǎn)，所以它的 nodeType 屬性值等于 1，而 nodeName 屬性值等于 p。
var p = document.createElement("p"); //創(chuàng)建段落元素 var info = "nodeName:" + p.nodeName; //獲取元素名稱 info += ", nodeType:" + p.nodeType; //獲取元素類型，如果為1則表示元素節(jié)點(diǎn) console.log(info);
使用 createElement() 方法創(chuàng)建的新元素不會被自動添加到文檔里。如果要把這個元素添加到文檔里，還需要使用 appendChild()、insertBefore() 或 replaceChild() 方法實(shí)現(xiàn)。
【示例2】下面代碼演示如何把新創(chuàng)建的 p 元素增加到 body 元素下。當(dāng)元素被添加到文檔樹中，就會立即顯示出來。
var p = document.createElement("p"); //創(chuàng)建段落元素 document.body.appendChild(p); //增加段落元素到body元素下
2、createTextNode() 方法：創(chuàng)建文本節(jié)點(diǎn)
使用 document 對象的 createTextNode() 方法可創(chuàng)建文本節(jié)點(diǎn)。用法如下：
document.createTextNode(data)
-
參數(shù) data 表示字符串。
示例
下面示例創(chuàng)建一個新 div 元素，并為它設(shè)置 class 值為 red，然后添加到文檔中。
var element = document.createElement("div"); element.className = "red"; document.body.appendChild(element);
由于 DOM 操作等原因，可能會出現(xiàn)文本節(jié)點(diǎn)不包含文本，或者接連出現(xiàn)兩個文本節(jié)點(diǎn)的情況。為了避免這種情況的發(fā)生，一般會在父元素上調(diào)用 normalize() 方法，刪除空文本節(jié)點(diǎn)，合并相鄰文本節(jié)點(diǎn)。
3、createAttribute()方法：創(chuàng)建屬性節(jié)點(diǎn)
使用 document 對象的 createAttribute() 方法可以創(chuàng)建屬性節(jié)點(diǎn)，具體用法如下：
document.createAttribute(name)
參數(shù) name 表示新創(chuàng)建的屬性的名稱。
示例1
下面示例創(chuàng)建一個屬性節(jié)點(diǎn)，名稱為 align，值為 center，然后為標(biāo)簽 <div id="box"> 設(shè)置屬性 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>
屬性節(jié)點(diǎn)一般位于元素的頭部標(biāo)簽中。元素的屬性列表會隨著元素信息預(yù)先加載，并被存儲在關(guān)聯(lián)數(shù)組中。例如，針對下面 HTML 結(jié)構(gòu)。
<div id="div1" title="div"></div>
當(dāng) DOM 加載后，表示 HTML div 元素的變量 divElement 就會自動生成一個關(guān)聯(lián)集合，它以名值對形式檢索這些屬性。
divElement.attributes = { id : "div1", class : "style1", lang : "en", title : "div" }
在傳統(tǒng) DOM 中，常用點(diǎn)語法通過元素直接訪問 HTML 屬性，如 img.src、a.href 等，這種方式雖然不標(biāo)準(zhǔn)，但是獲得了所有瀏覽器的支持。
示例2
img 元素?fù)碛?src 屬性，所有圖像對象都擁有一個 src 腳本屬性，它與 HTML 的 src 特性關(guān)聯(lián)在一起。下面兩種用法都可以很好地工作在不同瀏覽器中。
<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 腳本在不同瀏覽器中都能很好地工作，建議采用標(biāo)準(zhǔn)用法，而且很多 HTML 屬性并沒有被 JavaScript 映射，所以也就無法直接通過腳本屬性進(jìn)行讀寫。
【推薦學(xué)習(xí)：javascript高級教程】
