gpt4 book ai didi

javascript为什么 "document.documentElement.childNodes"输出不同的结果?

转载 作者:行者123 更新时间:2023-11-28 20:00:00 25 4
gpt4 key购买 nike

我认为“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为什么 "document.documentElement.childNodes"输出不同的结果?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21824720/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com