遍历所有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转换为实例化的闭包来实现。