Question

我希望HTML中的所有DOM元素都不包含任何节点，只包含文本。

我现在有了这个代码：

ShaderMaterial

这打印出绝对没有内容的课程元素（并且奇怪的是，iframe）。文本被视为子节点，因此var elements = document.querySelectorAll("body *"); for(var i = 0; i < elements.length; i++) { if(!elements[i].hasChildNodes()) { console.log(elements[i]) } }等于1，但我不知道如何区分节点和文本。遗憾的是，.childNodes.length第一个节点总是对象。

如何区分文本与节点？

Answer 1

您可以检查没有.firstElementChild的元素，这意味着它只会包含文本（或其他不可见的内容）。

var elements = document.querySelectorAll("body *");

for (var i = 0; i < elements.length; i++) {
  if (!elements[i].firstElementChild) {
    console.log(elements[i].nodeName)
  }
}

<p>
  text and elements <span>text only</span>
</p>

<div>text only</div>

包含堆栈代码段的script因为它也只有文本。您可以根据需要过滤掉脚本。这还包括不能包含内容的元素，例如<input>。

Answer 2

基本上，您正在寻找DOM的叶节点，其中包含叶节点的 textContent 属性内的内容。

让我们遍历DOM并在叶节点上计算出我们的小逻辑。

const nodeQueue = [ document.querySelector('html') ];    
const textOnlyNodes = [];
const textRegEx = /\w+/gi;

function traverseDOM () {
  let currentNode = nodeQueue.shift();

  // Our Leaf node
  if (!currentNode.childElementCount && textRegEx.test(currentNode.textContent)) {
    textOnlyNodes.push(currentNode);
    return;
  }

  // Nodes with child nodes
  nodeQueue.push(...currentNode.children);
  traverseDOM();
}

childElementCount 属性确保节点是叶节点， textContent 属性上的RegEx测试只是我对文本通常含义的理解。您可以随时调整表达式，使其适合您的用例。

Vanilla JS：查找仅包含文本的所有DOM元素

2 个答案: