在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/