javascript - 提取节点的文本，忽略 childNodes

Question

给定一个像这样的简单结构:

<td><span>Text1</span></td>
<td><span>Text2</span></td>
<td><span>Text3</span></td>
<td><span><a href='#'>Link</a>Text4</span></td>

我正在尝试使用 Javascript 提取所有 Text1-4，不带任何子节点。

循环列

...
x = rows[i].getElementsByTagName("TD")[n].getElementsByTagName('span')[0];
...

每个x的输出

Test1
Test2
Test3
<a href='#'>Link</a>Text4

有没有一种简单的方法可以“忽略”元素的 html 标签？

编辑

我试过了

if(x.hasChildNodes()){
    x = rows[i].getElementsByTagName("TD")[n].getElementsByTagName('span')[0].getElementsByTagName('a')[0];
}

但这显然给了我 Link

Answer 1

使用 .innerText 将为您获取文本和所有嵌套文本，并将 div 替换为 td 作为您的示例，我刚刚添加它显示结果

const tags = document.querySelectorAll('div > span');

tags.forEach(tag => {
    const nodes = tag.childNodes;
    nodes.forEach(node => {
    	if(node.nodeType === node.TEXT_NODE) { 
        console.log(node.nodeValue);
    	}
    });
});

<div><span>Text1</span></div>
<div><span>Text2</span></div>
<div><span>Text3</span></div>
<div><span><a href='#'>Link</a>Text4</span></div>