遍歷所有html標記，包括Javascript中的子代

Question

只是為了澄清我要做什么，我正在嘗試制作一個Chrome擴展程序，該擴展程序可以循環瀏覽當前頁面的HTML，並刪除包含某些文本的html標簽。 但是我在遍歷每個 html標簽時遇到了麻煩。

我已經做了很多尋找答案的工作 ，幾乎每個答案都說要使用：

var items = document.getElementsByTagName("*");
 for (var i = 0; i < items.length; i++) {
     //do stuff
 }

但是，我注意到，如果我使用“項目”中的元素從頁面重建HTML，則會得到與頁面實際HTML不同的東西。

例如，下面的代碼返回false：

 var html = ""; var elems = document.getElementsByTagName("*"); for (var i = 0; i < elems.length; i++) { html += elems[i].outerHTML; } alert(document.body.outerHTML == html) 

我還注意到上面的代碼並沒有提供所有html標記，而是將它們分組為一個標記，例如：

 var html = ""; var elems = document.getElementsByTagName("*"); alert(elems[0].outerHTML); 

我嘗試通過遞歸查找元素的子級來解決上述問題，但似乎無法正常工作。

理想情況下，我希望能夠獲得每個單獨的標簽，而不是包裝在其他標簽中的標簽。 我是Java的新手，所以關於我做錯事的任何建議/解釋或示例代碼（如果可能，請使用純javascript）將非常有幫助。 我也意識到我的方法可能是完全錯誤的，因此歡迎提出任何更好的想法。

Answer 1

JavaScript中對DOM元素的引用是對實際節點的內存地址的引用，因此您可以執行以下操作（請參閱工作的jsfiddle ）：

Array.prototype.slice.call(document.getElementsByTagName('*')).forEach(function(node) {
    if(node.innerHTML === 'Hello') {
        node.parentNode.removeChild(node);
    }
});

顯然， node.innerHTML === 'Hello'只是一個例子，因此您可能想弄清楚如何匹配文本內容（也許使用RegEx？）

Answer 2

您需要的是著名的道格拉斯· WalkTheDOM Douglas Crockford）的WalkTheDOM ：

function walkTheDOM(node, func)
{
  func(node);
  node = node.firstChild;
  while (node)
  {
    walkTheDOM(node, func);
    node = node.nextSibling;
  }
}

對於每個節點，將執行func 。 您可以通過注入適當的函數進行過濾，變換或其他任何操作。

要刪除包含特定文本的節點，請執行以下操作：

function removeAll(node)
{
    // protect against "node === undefined"
    if (node && node.nodeType === 3) // TEXT_NODE
    {
        if (node.textContent.indexOf(filter) !== -1) // contains offending text
        {
            node.parentNode.removeChild(node);
        }
    }
}

您可以像這樣使用它：

filter = "the offending text";
walkTheDOM(document.getElementsByTagName("BODY")[0], removeAll);

如果要通過冒犯文本進行參數化，也可以通過將removeAll轉換為實例化的閉包來實現。