我需要使用Javascript选择Javascript DOM文本节点的解决方案

I need the solution to a Javascript DOM textnode selection using javascript?

本文关键字：Javascript 文本 节点 解决方案 DOM 选择      更新时间：2023-09-26

如何使用javascript获取其中的所有文本节点？我试了很多东西，但都不管用？

 <td bgcolor="#f2f2f2" id='product-1'>
<img src="images/icon.png" width="37" height="30" align="left" style="margin: 8px 10px 25px 0">
<h4 style="font-size:12px; font-weight:bold">Heading</h4>
<p>TEXT</p>
 </td>

此示例返回节点及其子代包含的文本节点的数组。它跳过仅包含空白的节点

function deepText(node){
    var A= [], tem;
    if(node){
        node= node.firstChild;
        while(node!= null){
            if(node.nodeType== 3){
                if(/'S/.test(node.data)) A[A.length]= node;
            }
            else A= A.concat(deepText(node));
            node= node.nextSibling;
        }
    }
    return A;
}
//test
var text= [], nodes= deepText(document.getElementById('product-1'));
for(var i= 0, L= nodes.length; i<L; i++){
    // do whatever you want to the node
    var pa= nodes[i].parentNode;
    if(pa.nodeName== 'H4') pa.style.color= 'blue';
    text.push(nodes[i].data);
}
alert(text.join(' '))

如果你只想要文本，你可以做：

var el = document.getElementById('product-1');
alert(el.textContent || el.innerText);

以上内容可以很容易地转换为通用的"getText"函数。

如果你想获得实际的文本节点，你必须查看每个DOM元素并获得它的子节点，然后遍历每个子节点，看看它是元素（节点类型1）还是文本（节点类型3）。

相关文章：