DOM-------2

版權聲明：本文為部落客原創文章，轉載請注明出處。 https://blog.csdn.net/twilight_karl/article/details/60966448

nodeName 擷取節點的标簽名 (和tagName等價)

樣式如下：

<div id=”test”>這是<em>測試</em>這是一個測試</div>

alert(data.nodeName);   // div
    alert(data.tagName);    // div           

nodeType 節點的類型值

類型	值
元素節點	1
屬性節點	2
文本節點	3

alert("元素節點的類型："+data.nodeType);        // 1           

nodeValue 節點的内容

對于以下樣式，擷取文本節點的内容時，需要注意的問題

文本位于屬性節點内部的文本節點中，需要定位到文本節點再用nodeValue擷取文本節點的值。或者定位到屬性節點時用innerHTML擷取屬性節點内部的代碼。

alert(data.childNodes[1].childNodes[0].nodeValue);
    alert(data.childNodes[1].innerHTML);           

用innerHTML更改文本為<strong>文本</strong>時，會在頁面中輸出加粗的文本。但是用nodeValue更改後會輸出”<strong>文本</strong>”

文本節點沒有标簽名#text

childNodes 目前元素所有子節點

var data = document.getElementById("test");
    for(var i = 0 ; i < data.childNodes.length; i++){
        if(data.childNodes[i].nodeType == 1){
            alert("這是一個屬性節點:"+data.childNodes[i].nodeName);
        }else if(data.childNodes[i].nodeType == 3){
            alert("這是一個文本節點:"+data.childNodes[i].nodeValue);
        }
    }

// 這是一個文本節點：這是
// 這是一個屬性節點：EM
// 這是一個文本節點：這是一個測試           

firstChild 和 lastChild

子節點的第一個節點和最後一個節點

first–> childNodes[0]

last–> childNodes[child.length-1]

ownerDocument傳回根節點 （document節點）

document對象

parentNode父節點 previousSibling同級的上一個節點 nextSibling同級的下一個節點

alert(data.lastChild.ownerDocument.nodeName);   // #document
    alert(data.parentNode.innerHTML);               // BODY
    alert(data.lastChild.previousSibling.nodeName); // EM
    alert(data.firstChild.lastSibling.nodeName);    // EM           

attributes

擷取節點中的屬性

attributes[“屬性名”].nodeValue

for(var i = 0 ; i < data.attributes.length; i++){
        alert(data.attributes[i].nodeName+":"+data.attributes[i].nodeValue);
    }           

alert(data.attributes["id"].nodeValue);