Question

我想了解浏览器加载网页的详细信息。

我在附加到HTML文件的.js文件中有两个javascript语句：

d3.select("body").append("span").text("Hello, world!");
alert("huh?");

当我加载页面时，我看到一个警告“嗯”。因此，“huh”声明开始了。

然而，“Hello，world”未附加到文档正文中。

如果我然后在控制台中运行d3.select("body").append("span").text("Hello, world!")，那么它会按预期执行 - 即。它为身体增加了“你好，世界”。

这里发生了什么？ alert("huh?")在DOM中的window.onload事件之后触发，对吗？但是d3.select...没有开火？

为何出现差异？

Answer 1

操纵DOM的代码没有触发的原因是因为还没有DOM。要解决这个问题，你可以

将<script>标记放入body，以便在有正文时运行
将您的代码封装在window.onload内，以便在DOM准备就绪时触发。

第二个选项的示例：

window.onload = function(){

    d3.select("body").append("span").text("Hello, world!");
    alert("huh?"); 

}

Answer 2

while window load event你的函数d3.select（“body”）。append（“span”）。text（“Hello，world！”）;触发但元素没有加载，所以它没有反映。当我们使用$（document）.ready函数时，这将在页面满载后触发函数，因此触发器可以反映并可见。 window.onload和$（document）.ready

中的警报相同

Answer 3

为此，您需要确保仅在DOM树中存在目标元素之后才调用元素的选择器。这就是jQuery的DOM准备就绪的原因。

基本上，有时页面的内容很重（大图像大小等），需要花费时间来加载。在窗口加载事件之前首先触发DOM就绪。

在确保节点位于DOM树中之后，或者换句话说，在确保节点位于DOM树中之后，需要触发任何选择某些内容的函数。至少在DOM就绪事件发生之后。否则，即使它在一个浏览器上运行一次，也可能是间歇性的，因为它取决于竞争，这首先发生 - 执行JS或创建元素。每当前者发生时，它都会失败。

我希望这有帮助！

Answer 4

还没有身体元素。有两种解决方案：

要么等待文档加载

<head>
<script>
$(document).ready(function() {
d3.select("body").append("span").text("Hello, world!")
});
</head>

或者你把它放在身体

<body>
<script>
d3.select("body").append("span").text("Hello, world!")
</script>
</body>

为什么这些javascript行中只有一行会在页面加载时触发？

4 个答案: