JavaScript 訪問文本節(jié)點(diǎn)

■知識(shí)點(diǎn)

使用nodeValue或data屬性可以訪問文本節(jié)點(diǎn)包含的文本。使用length屬性可以獲取包含文本的長度，利用該屬性可以遍歷文本節(jié)點(diǎn)中每個(gè)字符。

■實(shí)例設(shè)計(jì)

設(shè)計(jì)一個(gè)讀取元素包含文本的通用方法。

//獲取指定元素包含的文本

//參數(shù)：e表示指定元素

//返回值：返回包含的所有文本，包括子元素中包含的文本

function text (e){

    var s = "";

    var e = e.childNodes || e;

    for( var i = 0; i < e.length; i++){

        s += e[i].nodeType != 1 ? e[i].nodeValue : text(e[i].childNodes);  //通過遞歸遍歷所有元素的子節(jié)點(diǎn)

}

return s;

}

  在上面的函數(shù)中，通過遞歸函數(shù)檢索指定元素的所有子節(jié)點(diǎn)，然后判斷每個(gè)子節(jié)點(diǎn)的類型，如果不是元素，則讀取該節(jié)點(diǎn)的值，否則再遞歸遍歷該元素包含的所有子節(jié)點(diǎn)。

下面使用上面定義的通用方法讀取div元素包含的所有文本信息。

<div id=,"divl">

    <span class="red">div</span>

    元素

</div>

<script>

var div = document.getElementByld("divl");

var s = text(div); //調(diào)用讀取元素的文本通用方法

console.log(s) ; //返回字符串"div元素"

</script>

這個(gè)通用方法不僅可以在HTML DOM中使用，也可以在XML DOM文檔中工作，并兼容不同瀏覽器。