IE9、IE10、IE11中创建NodeIterator时出现异常。

Question

我正在使用createNodeIterator来查找文档中的单词。

实际上，我几乎使用了MDN和MSDN的完全相同的示例代码：

这在Chrome和Firefox中按预期工作。不幸的是，Internet Explorer 11在调用iterator.nextNode后会显示“出现异常。”并停止执行。

代码演示: https://codepen.io/anon/pen/PKmQEe?editors=1011

var iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_TEXT, {
  acceptNode: function acceptNode(node) {
    if (node.parentNode.tagName.toLowerCase() === 'span') {
      return NodeFilter.FILTER_REJECT;
    }

    return NodeFilter.FILTER_ACCEPT;
  }
}, false);

var nextNode = void 0;
var nodes = [];
while (nextNode = iterator.nextNode()) {
  if (nextNode.nodeValue.indexOf('o') > -1) {
    nodes.push(nextNode);
  }
}

console.log(nodes.length);
nodes.forEach(function (node) {
  return node.nodeValue = node.nodeValue.replace('o', 'OO');
});

<p>Lorem</p>
<p>Ipsum</p>
<div><div><div><div><p>Etiam ipsum purus, elementum vitae congue id, scelerisque nec lectus. Sed at urna id nulla elementum rhoncus. Praesent aliquet turpis justo, blandit eleifend sem. In purus eros, commodo vel pretium non, blandit non elit. Mauris tristique velit in neque malesuada congue. Suspendisse luctus varius nisi quis dignissim. Proin magna urna, tristique et adipiscing ut, ultrices ut leo.</p></div><span>Dolor</span></div></div></div>

- jantimon

Answer 1

如在“createNodeIterator fails in IE9 when acceptNode is specified”中所写，在IE9到IE11中不能传递对象，而是必须直接传递函数。请注意不要改变HTML标记。

var iterator = document.createNodeIterator(document.body, NodeFilter.SHOW_TEXT, function acceptNode(node) {
    if (node.parentNode.tagName.toLowerCase() === 'span') {
      return NodeFilter.FILTER_REJECT;
    }

    return NodeFilter.FILTER_ACCEPT;
  }, false);

var nextNode = void 0;
var nodes = [];
while (nextNode = iterator.nextNode()) {
  if (nextNode.nodeValue.indexOf('o') > -1) {
    nodes.push(nextNode);
  }
}

console.log(nodes.length);
nodes.forEach(function (node) {
  return node.nodeValue = node.nodeValue.replace('o', 'OO');
});

<p>Lorem</p>
<p>Ipsum</p>
<div><div><div><div><p>Etiam ipsum purus, elementum vitae congue id, scelerisque nec lectus. Sed at urna id nulla elementum rhoncus. Praesent aliquet turpis justo, blandit eleifend sem. In purus eros, commodo vel pretium non, blandit non elit. Mauris tristique velit in neque malesuada congue. Suspendisse luctus varius nisi quis dignissim. Proin magna urna, tristique et adipiscing ut, ultrices ut leo.</p></div><span>Dolor</span></div></div></div>

- jantimon

---

哇！这真是节省了我很多时间。即使使用了TypeScript类型，它仍然需要Object，但对于IE，它需要Function！ - Romko