Question

如何使用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>

Answer 1

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

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(' '))

Answer 2

如果您只想要文本，可以这样做：

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

以上内容可以转化为一般＆＃34; getText＆＃34;功能相当容易。

如果要获取实际的文本节点，则必须查看每个DOM元素并获取其子节点，然后遍历每个子节点，查看它是否为元素（节点类型1）或文本（节点类型3）。

我需要使用javascript的Javascript DOM textnode选择解决方案？

2 个答案: