当指定acceptNode时，createNodeIterator在IE9中失败

2024-03-22

Target

我想循环遍历 DOM 文本节点，按它们在 DOM 中的顺序排序。此外，我想通过自定义逻辑过滤节点（例如检查节点是否位于特定元素内）。此外，所有这些都应该在 IE9+ 中以尽可能最佳的性能完成。

Method

满足上述所有要求之一

document.createTreeWalker() https://developer.mozilla.org/de/docs/Web/API/Document/createTreeWalker or
document.createNodeIterator() https://developer.mozilla.org/de/docs/Web/API/Document/createNodeIterator

我不完全理解为什么这些相似的功能没有合并在一起。但是，作为createTreeWalker()有更多的API方法我已经开始使用它了。

然后我发现根据文档 https://developer.mozilla.org/en-US/docs/Web/API/Document/createTreeWalker, the acceptNodeIE9不支持过滤功能。因此我切换到createNodeIterator，根据文档 https://developer.mozilla.org/en-US/docs/Web/API/Document/createNodeIterator.

这是我用来循环元素的代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Test</title>
    </head>
<body>
    <div class="context">
      Root first
        <div>
          Child
        </div>
      Root second
    </div>

    <script type="text/javascript">
        var treeWalker = document.createNodeIterator(
            document.querySelector(".context"),
            NodeFilter.SHOW_TEXT,
            {
                acceptNode: function(){
                    return NodeFilter.FILTER_ACCEPT;
                }
          },
          false
        );

        var nodeList = [];
        var currentNode;
        while (currentNode = treeWalker.nextNode()){
            nodeList.push(currentNode);
        }

        console.log(nodeList);

    </script>
</body>
</html>

虽然在这种情况下循环实际上（几乎）没有执行任何操作，但在我的实际应用程序中它确实执行了操作。所以请将此作为示例。

Issue

问题是上面的方法在 IE9 中不起作用。似乎是acceptNode过滤回调属性createNodeIteratorIE9 也不支持。一定是null上班。然而，正如文档所说，它是受支持的，我希望它能够工作。

我的期望：

实际消息：

Question

这里有什么问题以及如何解决它？请注意，我绝对需要有循环。

事实上，我在 IE11 中也遇到了完全相同的错误。

如果您查看 W3C 文档文档对象模型级别 2 遍历和范围 https://www.w3.org/TR/DOM-Level-2-Traversal-Range/Overview.html更具体地说，附录 C 涉及ECMAScript 语言绑定 https://www.w3.org/TR/DOM-Level-2-Traversal-Range/ecma-script-binding.html，NodeFilter对象定义如下：

这是 ECMAScript 函数参考。该方法返回一个数字。参数是一个 Node 对象。

因此，如果您更新脚本以传递函数而不是带有键的对象acceptNode，您将得到预期的结果。

var treeWalker = document.createNodeIterator(
    document.querySelector(".context"),
    NodeFilter.SHOW_TEXT,
    function(){
        return NodeFilter.FILTER_ACCEPT;
    },
    false
);

Firefox 中的结果将是：

在 Chrome 中您将得到：

在 IE 中，您将拥有：

我没有修改您的循环或其他任何内容来获得这些结果，因此我仅发布了相关部分。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)