0

据我所知，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 进行测试）。

任何人都可以对发生的事情有所了解吗？

4

1 回答 1

2

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

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

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

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

但是，您可能需要在解析完所有 HTML 之后、加载所有图像之前操作 DOM。如果这是您的需要，那么像 jQuery 和它的ready事件这样的工具就是您要走的路。

于 2012-06-14T15:57:07.697 回答