head 中的 Javascript 如何访问 body 中的元素？答案

【问题标题】：How can Javascript in the head access elements in the body?head 中的 Javascript 如何访问 body 中的元素？
【发布时间】：2012-03-10 17:59:19
【问题描述】：

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

提前致谢。 :)

【问题讨论】：

您能否尝试更详细地解释您的问题？

标签： javascript

【解决方案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() 可以在<head> 的<script> 块中定义。这基本上是相同的事情，但是 so 1990 年代使用 html 中的属性来做到这一点。（实际上即使window.onload() 已经过时了，但它确实有效，我没有时间解释.addEventListener() method。）

【讨论】：

非常感谢！你是天才:)

【解决方案2】：

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

要实现这一点，您必须将您的函数分配到一个 onload 事件中。例如：

<body onload="your_func">

【讨论】：