Question

我经常看到一些在html页面的head标签中调用的JavaScript库。但是，如果这些lib调用body标记中的元素，则会有响应（仍然来自head标记）。当我尝试从头部调用元素时，没有响应 - 为什么？

提前致谢。 :)

Answer 1

浏览器从上到下解析html页面，在找到它们时执行任何<script>块。这意味着如果JavaScript试图访问页面上的元素，它只能看到页面中包含较高元素的那些元素，因为那些较低的元素尚未被解析。

有两种方法可以解决这个问题：

将<script>块放在底部，就在结束</body>标记之前（或至少将其放在需要引用的元素之后）和/或
使用onload（或者，如果您喜欢jQuery，$(document).ready()）处理程序。

设置onload处理程序的一种方法是这样的：

<head>
<script>
   window.onload = function() {
      // this function will be called by the browser after
      // the entire page has loaded and thus code in the function
      // can access any element on the page.
   };
</script>
</head>
<body>
   ... various elements ...
</body>

您可能也看到过类似的内容：

<body onload="someFunction();">

可以在someFunction()的{{1}}块中定义<script>。它基本上是一样的，但它是所以 20世纪90年代用html中的属性这样做。（实际上，即使<head>现在已经过时了，但它确实有效，我没有时间解释.addEventListener() method。）

Answer 2

这是因为你可能正试图在元素存在之前调用元素，即。 HTML尚未解析。为避免这种情况，您必须等待页面完成，然后执行您的脚本。

要实现此目的，您必须将您的函数分配给onload-event。例如：

<body onload="your_func">

Javascript如何在头部访问正文中的元素？

2 个答案: