Javascript如何在头部访问主体中的元素

How can Javascript in the head access elements in the body?

本文关键字：主体 元素 访问 头部 Javascript      更新时间：2023-09-26

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

提前感谢。：）

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

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

  1. 将<script>块放在底部，刚好在关闭</body>标记之前（或者至少将其放在需要引用的元素之后），和/或

  2. 使用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();">

其中CCD_ 7可以定义在CCD_ 9中的CCD_。这基本上是一样的，但这是所以1990年代在html中使用这样的属性。（事实上，即使是window.onload()现在也已经过时了，但它有效，我没有时间解释.addEventListener()方法。）

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

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

<body onload="your_func">
相关文章：