Question

据我所知，html / javascript的执行顺序是串行的（与所有编程语言一样），这意味着浏览器逐行读取html / javascript代码并解释它。

这就是为什么一些javascript程序员将标记放在正文的末尾 - 以确保整个DOM已加载，他们现在可以访问他们想要的任何元素。他们就是这样做的 -

<html>
...
<body>
...
<script> //whatever code you want to put
</script>
</body>

我想测试这个，所以我写了下面的代码

<html>
<head>
</head>
<body>
<script>
var elm=document.getElementById("myp");
alert(elm.innerHTML);
</script>
<p id="myp"> well this is darned interesting </p>
</body>
</html>

正如您所看到的，我已经在定义了p元素之前放置了脚本，并且脚本正在尝试访问它。我以为我会得到一个错误，因为p不应该被定义但是我得到“这是有趣的”（p的值）。当我将脚本放在head元素中时，会发生同样的事情。（测试使用chrome和firefox）。

任何人都可以了解正在发生的事情吗？

Answer 1

撇开这个特定例子的具体细节，我将总结一般原则。我的来源是Flanagan， JavaScript：终极指南，5 / e。

将浏览器视为读取HTML行并呈现响应内容太简单了。当然它按顺序扫描输入，但DOM对象构造的顺序与扫描输入不是逐行的。最好把它当作一个黑盒子。

如果要运行一个操作DOM元素的脚本，安全可靠的方法是将其作为onload事件的处理程序运行。有时您可以编写内联脚本来执行此操作，但这是一个灰色区域。弗拉纳根写道：

大多数浏览器似乎都允许脚本操作任何文档出现在<script>标记之前的元素。一些JavaScript 程序员经常这样做。但是，没有标准要求它工作，并且在某些人中有一种持久的，如果模糊的信念经验丰富的JavaScript编码器，可放置文档操作代码在<script>标签内可能会导致问题....（第256页）

但是，您可能需要在解析所有HTML之后但在加载所有图像之前操作DOM。如果这是你的需要，那么像jQuery这样的工具及其ready事件就是你的选择。

DOM命令执行奇迹

1 个答案: