JavaScript的元素節點用法講解

1.childNodes可以獲取任意節點的子節點(任意元素的子元素),他是一個包含所有子元素的數組

使用方法:

<div id="demo">
    <div></div>
    <span></span>
</div>

var oDom = document.getElementById('demo');
var oNode = oDom.childNodes;

注意: childNodes返回的結果中不只有div,span,這三個節點,就HTML而言,文檔裏面幾乎所有的東西都是一個節點,甚至連空格符號,換行符

都是一個節點,在獲取節點,我們需要獲取一些可用的節點,需要使用nodeType

2.nodeType,nodeType屬性共有12種可取值,但其中僅有三種具有使用價值

元素節點的nodeType的屬性值爲1

屬性節點的nodeType的屬性值爲2

文本節點的nodeType的屬性值爲3

使用方法:

借用上述的代碼:

for(var i = 0;i<oNode.length;i ++){
        if( oNode[i].nodeType == 1){
            console.log(oNode[i]);//只會輸出元素節點
        }
    }

3.nodeValue,獲取文本節點的值

例如: 

<div id="demo">aaaaaa
    <div>vvvvv</div>
    <span></span>
</div>

var oDom = document.getElementById('demo');

var oNode = oDom.childNodes;

console.log(oDom.firstChild.nodeValue);  //  輸出aaaaaa,而不是div裏面的vvvvv

因爲aaaaaa是一個文本節點,也是第一個節點

如果要獲取div裏面的vvvvv,需要使用如下語法
console.log( oNode[1].nodeValue ); //輸出 null,

console.log( oNode[1].nodeChild[0] ); //輸出vvvvv

第一種輸出爲什麼會輸出爲空呢?

因爲nodeValue是div的一個屬性,並非是

div元素裏面的值,而div元素本身的nodeValue的屬性值是一個空值,而div裏面得值其實質是div的一個子節點

,所以,這裏需要注意哦!

 

4.firstChild,lastChild獲取子元素的第一個節點和最後一個節點,等同於firstChild

使用方法 : 

oDom.firstChild

注意:

<div id="demo"><p></p>
    <div></div>
    <span>
        <span>sdfsdf</span>
    </span>
</div>

如果是以上結構

console.log(oDom.firstChild);//打印出<p></p>

<div id="demo">
    <div></div>
    <span>
        <span>sdfsdf</span>
    </span>
</div>

如果是這種結構

console.log(oDom.firstChild);//打印出#text,

這是一個文本節點,前文已經

說過,HTML文檔裏面的任何東西都是節點,包括空格,回車符等都是空格