我认为“ document.documentElement.cildNodes”像以前一样是标记中的所有子节点，但是今天我做了代码修改，发现一种特殊情况：
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
<script>
var o = document.createElement('script');
o.text = 'alert("111")';
var ohtml = document.documentElement;
alert(ohtml.nodeName); //output HTML
alert(ohtml.childNodes.length); //nodes length is 1
alert(ohtml.childNodes.length); //just head
ohtml.childNodes[0].appendChild(o);
function shownode() {
var ohtml = document.documentElement;
alert(ohtml.nodeName);
alert(ohtml.childNodes.length); //nodes length is 3
alert(ohtml.childNodes[0].nodeName); //head
alert(ohtml.childNodes[1].nodeName); //#text
alert(ohtml.childNodes[2].nodeName); //body
}
</script>
</head>
<body><div>test</div><input id="Button1" type="button" value="show nodes" onclick="shownode();" />
</body>
</html>
为什么我标记中的“ document.documentElement.childNodes”和标记中的函数会得到不同的结果？
希望有人能给我更多示例。非常感谢！
最佳答案
关键是，您可以在head脚本标签中执行此操作，以便在执行该脚本时，尚未将整个DOM加载到页面中。而且，当您在控制台中调用该函数时，将完全加载DOM，以确保可以将所有代码移至window.onload事件，如下所示：
window.addEventListener("load", function () {
var o = document.createElement('script');
o.text = 'alert("111")';
var ohtml = document.documentElement;
alert(ohtml.nodeName); //output HTML
alert(ohtml.childNodes.length); //nodes length is not 1
alert(ohtml.childNodes.length); // not just head
ohtml.childNodes[0].appendChild(o);
});
如果您不想使用
window.onload事件，只需将其放在body标记中：<body>
<!--your stuff-->
<script>
alert(ohtml.nodeName); //output HTML
alert(ohtml.childNodes.length); //nodes length is not 1
alert(ohtml.childNodes.length); // not just head
</script>
</body>
关于javascript - javascript为什么“document.documentElement.childNodes”输出不同的结果？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/21824720/