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,然後為標籤b390322fe69e754cc2d7247050226b6d 設定屬性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高階教學】
#以上是在javascript中建立節點的方法有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!