浏览器下通过childNodes获取文本节点的nodeValue问题
Tags: childnodes, Javascript, nodeValue
首先给出一小段HTML代码
<div id="first">I am first</div>
<div id="second">I am second</div>
<div id="third">I am third</div>
</div>
对于如上的HTML代码，如果我们想获取里面的文本内容，也就是我们想得到的结果是I am firstI am secondI am third，有两种处理方法。第一种方法就是获取ID为father的元素的innerHTML，然后通过正则将里面的tag标记去掉就可以了。第二种是比较正规的使用childNodes来处理。第一种处理方式比较简单也很容易，这里就不在过多的描述。第二种处理方法如果处理的不当的话，就会出现奇怪的问题，并且还得不到任何的结果。（这个问题我折腾了一天）
对于第二种处理方法，我们可能会如下所示的代码那样去处理：
var children = father.childNodes,result=[];
for(var i=0;i<children.length;i++){
var child = children[i];
if(child.nodeType == 3){
result.push(child.nodeValue);
}
}
alert(result.join(''))
对于element.childNodes得到的结果，在IE和非IE内核的浏览器下有一定差别，这里不讨论他们，并且也不影响这里的结果，如果你对这个有兴趣的话，你可以阅读这篇文章。从理论上来说，上面的代码应该工作的很好，但实际上并不能得到真正的结果，返回的结果是空的。因为，即使当前的节点是文本节点，但并不能得到它的nodeValue，具体什么原因尚未查明，以后有新的结果在补充。
如上的方法不可行，那我们到底该怎么办呢？通过研究发现，如果当前元素的子节点只有文本节点的话，通过childNodes模式是可以获取到内容的。例如，我们可以先得到ID为first的这个元素，然后在通过这个元素的childNodes可以得到文本节点的内容。下面给出具体的实现代码：
var children = node && node.childNodes,result = [];
for(var i=0;i<children.length;i++){
var child = children[i];
if(child.nodeType == 3){
result.push(child.nodeValue);
}else{
result.push(getText(child));
}
}
return result.join('')
}
alert(getText(document.getElementById('father')))
如果你想通过document.childNodes获取所有的节点的话，是不能达到你所希望的。因为document.childNodes只包含两个节点the Doctype declaration and the root element。获取文档的所有节点的话可以通过document.doucmentElement.childNodes来获取。
Leave a Comment
