javascript - 迭代所有 html 标签，包括 Javascript 中的子标签

Question

只是为了澄清我想要做什么，我正在尝试制作一个 Chrome 扩展程序，它可以循环当前页面的 HTML 并删除包含某些文本的 html 标签。但我在循环每个 html 标签时遇到了麻烦。

我已经搜索了很多 answer几乎每个 answer说使用:

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

但是，我注意到，如果我使用“items”中的元素从页面重建 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);

我尝试通过递归查找元素的子元素来修复上述问题，但我似乎无法让它发挥作用。

理想情况下，我希望能够获取每个单独的标签，而不是包含在其他标签中的标签。我对 Javascript 有点陌生，所以任何关于我做错了什么的建议/解释或示例代码(如果可能的话，用纯 javascript)都会非常有帮助。我也意识到我的方法可能是完全错误的，所以欢迎任何更好的想法。

Answer 1

您需要的是著名的 Douglas Crockford 的 WalkTheDOM:

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

对于每个节点，func 将被执行。您可以通过注入(inject)适当的函数来过滤、转换或执行其他操作。

要删除包含特定文本的节点，您可以执行以下操作:

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