在Internet Explorer 9上,在文本节点上调用splitText不会更新其父级的childNodes。在Chrome和Firefox上,按https://developer.mozilla.org/En/DOM/Text.splitText的预期进行。

但是,在文本节点的父节点(?)上调用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>


IE9输出:

LOG: 1
LOG: 1


Chrome和Firefox均可正确输出:

2
2


取消注释console.dir(e)时,现在IE9输出:

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


这是一个错误吗?如果是这样,除了childNodes之外,是否有任何变通办法来“刷新”并反映console.dir的实际状态?

更新目前看来起作用的是添加/删除节点,例如:

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;
}

关于dom - IE9:splitText之后未更新childNodes吗?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/7378186/

10-12 23:10