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

Question

我想在HTML中獲取所有DOM元素，該元素不包含任何節點，而僅包含文本。

我現在有以下代碼：

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

這會打印出絕對沒有內容的課程元素（而且奇怪的是，iframe）。 文本被視為子節點，因此.childNodes.length等於1，但是我不知道如何從文本中區分出這些節點。 typeof第一節點總是對象，可悲。

如何區分文本和節點？

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正則表達式測試只是我一個什么樣的文本一般意味着理解。 您可以隨時調整表達式以使其更適合您的用例。