javascript - 将脚本放在头部和 body 中有什么区别?

标签 javascript html

我遇到了一个问题。

<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <script type="text/javascript">
  alert(document.getElementsByTagName("li").length); 
  </script>
  <title>purchase list</title>
</head>
<body>
  <h1>What to buy</h1>
  <ul id="purchases">
    <li> beans</li>
    <li>Cheese</li>
  </ul>
</body>

当我把脚本放到head时,结果显示0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
                      "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Shopping list</title>
</head>
<body>
  <h1>What to buy</h1>

  <ul id="purchases">
    <li>Cheese</li> 
    <li>Milk</li>
    <script type="text/javascript">
    alert(document.getElementsByTagName("li").length);
    </script>
  </ul>
</body>

当我尝试将脚本放入正文时,结果显示 2. 为什么会有这样的差异? 主要区别是什么?

最佳答案

What's the difference between putting script in head and body?

它运行的时间。

When I put scripts in head, the result shows 0 Shopping list

您尝试访问的元素在脚本运行时不存在(因为它们出现在文档中的脚本之后)。

请注意,您可以编写一个脚本,以便使用 event handlers 调用later 函数(later 的各种值,包括“当整个文档已加载时”)。

关于javascript - 将脚本放在头部和 body 中有什么区别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17106462/

相关文章:

Javascript 将 int 值转换为八位字节流数组

MQTT 的 JavaScript 客户端不使用 WebSockets

javascript - 将元素始终定位在死点的流体图像上方?

javascript - 如何仅使用 Javascript 一次显示一个数组元素?

html - Ckeditor/WYSIWYG 从 pdf 复制并保留样式/图像?

javascript - 无论如何我们可以设计 select2 的选项

javascript - 如何在运行时通过 JavaScript 将 HTML 表数据放入选定的选项中

javascript - 当我没有点击该项目时,为什么 JavaScript 会执行 "click"事件?

javascript - Angular:找不到名称为: 'date' 的控件

javascript - 通过 JavaScript 或 JQuery 操作 SVG 文件(对象)中的元素