站長資訊網
        最全最豐富的資訊網站

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

        javascript中創建節點的方法:1、createElement()方法,可以創建元素節點;2、createTextNode()方法,可以創建文本節點;3、createAttribute()方法,可以創建屬性節點。

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

        本教程操作環境: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高級教程】

        贊(0)
        分享到: 更多 (0)
        網站地圖   滬ICP備18035694號-2    滬公網安備31011702889846號
        主站蜘蛛池模板: 亚洲精品成人片在线播放| 亚洲精品无码乱码成人| 亚洲精品在线视频| 久久线看观看精品香蕉国产| 亚洲午夜国产精品无码老牛影视| 777久久精品一区二区三区无码| 午夜精品一区二区三区免费视频 | 国产观看精品一区二区三区| 久久精品aⅴ无码中文字字幕不卡| 亚洲а∨天堂久久精品9966| 日本内射精品一区二区视频| 精品中文高清欧美| MM1313亚洲精品无码| 1024国产欧美日韩精品| 亚洲国产精品久久久天堂| 乱人伦人妻精品一区二区| 国产亚洲精品无码拍拍拍色欲| 一区二区精品在线| 久久91精品国产91久久麻豆| 国产精品毛片无遮挡| 久久精品国产亚洲av日韩| 亚洲av无码国产精品色午夜字幕| 亚洲日韩精品无码专区网站| 色婷婷久久久SWAG精品| 亚洲精品高清国产一久久| 日本精品久久久久中文字幕| 国产精品福利在线观看| 国产成人精品一区二区三区| 国内精品在线视频| 2021最新国产精品网站| 国产女主播精品大秀系列| 久久久久亚洲精品无码蜜桃| 亚洲精品字幕在线观看| 亚洲国产精品人人做人人爽| 午夜亚洲av永久无码精品| 无码国模国产在线无码精品国产自在久国产 | 亚洲国产精品一区二区成人片国内 | 亚洲精品一二区| 久久91综合国产91久久精品| 欧美精品人爱c欧美精品| 日韩欧美精品不卡|