Dom IE9:拆分文本后未更新子节点？_Dom_Internet Explorer 9

Dom IE9:拆分文本后未更新子节点？

dom

Dom IE9:拆分文本后未更新子节点？,dom,internet-explorer-9,Dom,Internet Explorer 9,在Internet Explorer 9上，在文本节点上调用splitText不会更新其父节点的childNodes。在Chrome和Firefox上，正如预期的那样但是在文本节点父节点（？）上调用console.dir时，IE9的行为正常例如： <!DOCTYPE html> <html lang="en"> <meta charset="utf-8"> <script type="text/javascript" charset="utf-8

在Internet Explorer 9上，在文本节点上调用

splitText

不会更新其父节点的

childNodes

。在Chrome和Firefox上，正如预期的那样

但是在文本节点父节点（？）上调用

console.dir

时，IE9的行为正常

例如：

<!DOCTYPE html>
<html lang="en">

<meta charset="utf-8">

<script type="text/javascript" charset="utf-8">

window.onload = function() {

  var e = document.querySelector('#test p');

  var f = e.childNodes[0].splitText(10);

  console.log(e.childNodes.length)

  // console.dir(e)

  console.log(e.childNodes.length)

}

</script>

<div id="test">
  <p>Senectus et netus et malesuada fames ac turpis egestas.</p>
</div>

</html>

Chrome和Firefox都正确输出：

2
2

取消注释

console.dir（e）

时，现在IE9输出：

LOG: 1
LOG: 1

LOG: 1
LOG: [object HTMLParagraphElement] {}
LOG: 2

这是虫子吗？如果是这样，除了

console.dir

，是否还有“刷新”和反映

childNodes

的实际状态的变通方法

更新目前看来有效的方法是添加/删除节点，如：

var t = document.createTextNode("");
e.appendChild(t);
e.removeChild(t);

您可以使用变通方法而不是

splitText（）

：

谢谢我已经在使用我的变通方法，它似乎工作得很好，没有明显的性能损失。

function insertAfter(node, precedingNode) {
    var nextNode = precedingNode.nextSibling, parent = precedingNode.parentNode;
    if (nextNode) {
        parent.insertBefore(node, nextNode);
    } else {
        parent.appendChild(node);
    }
    return node;
}

// Note that we cannot use splitText() because it is bugridden in IE 9.
function splitDataNode(node, index) {
    var newNode = node.cloneNode(false);
    newNode.deleteData(0, index);
    node.deleteData(index, node.length - index);
    insertAfter(newNode, node);
    return newNode;
}