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

JavaScript中对DOM元素的引用是对实际节点的内存地址的引用，因此您可以执行以下操作（请参阅working jsfiddle）：

group

显然Array.prototype.slice.call(document.getElementsByTagName('*')).forEach(function(node) { if(node.innerHTML === 'Hello') { node.parentNode.removeChild(node); } });只是一个例子，所以你可能想弄清楚你想如何匹配文本内容（也许是RegEx？）

Answer 2

你需要的是着名的道格拉斯·克罗克福德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转换为实例化的闭包来实现。

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

2 个答案: