指定acceptNode时，createNodeIterator在IE9中失败 [英] createNodeIterator fails in IE9 when acceptNode is specified
问题描述
目标
我想循环遍历DOM文本节点，按DOM中的顺序排序。此外，我想通过自定义逻辑过滤节点（例如，检查节点是否在特定元素内）。此外，所有这些都应以最佳性能完成，并在IE9 +中工作。
方法
所有这些满足上述要求
-
实际消息：
，更具体地说是关于
在Chrome中你会得到：
在IE中，您将拥有：
我没有修改你的循环或其他任何东西来获得这些结果所以我只发布了相关部分。
Target
I'd like to loop through DOM text nodes, sorted by their order inside the DOM. Furthermore I'd like to filter nodes by custom logic (e.g. check if a node is inside a specific element). Additionally all this should be done in the best possible performance and working in IE9+.
Method
All of the above requirements are met with either
I don't fully understand why these similiar functions aren't merged together. But, as
createTreeWalker()has more API methods I've started using it.Then I found out that according to the documentation, the
acceptNodefilter function isn't supported in IE9. Therefore I switched over tocreateNodeIterator, which hasn't this restriction according to the documentation.This is the code I'm using to loop through the elements:
<!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>While the loop actually does (almost) nothing in this case, in my real application it does. So please see this just as an example.
Issue
The problem is that the above will not work in IE9. It seems like the
acceptNodefilter callback property ofcreateNodeIteratorisn't supported in IE9 too. It must benullto work. However, as the documentation says it's supported, I expect it to work.What I expect:
The actual message:
Question
What's the problem here and how to fix it? Note that I definitely need to have the loop.
解决方案I actually have the exact same error in IE11.
If you look at the W3C documentation for Document Object Model Level 2 Traversal and Range and more specifically the Appendix C regarding ECMAScript Language Binding, the NodeFilter object is defined as the following:
This is an ECMAScript function reference. This method returns a Number. The parameter is a Node object.
So if you updates your script to pass a function instead of an object with a key
acceptNode, you'll get the expected result.var treeWalker = document.createNodeIterator( document.querySelector(".context"), NodeFilter.SHOW_TEXT, function(){ return NodeFilter.FILTER_ACCEPT; }, false );The result in Firefox will be:
In Chrome you'll get:
And in IE, you'll have:
I didn't modify your loop or anything else to get these results so I posted only the relevant part.
这篇关于指定acceptNode时，createNodeIterator在IE9中失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
