将脚本放入 head 和 body 有什么区别？

IT技术 javascript html
2021-03-10 11:57:04

我遇到了问题。

<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>

当我把脚本放在头中时，结果显示为 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. 为什么会有这么大的差异？主要区别是什么？

6个回答

将脚本放入 head 和 body 有什么区别？

它运行的时间。

当我把脚本放在头里时，结果显示 0 购物清单

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

请注意，您可以编写一个脚本，这样一个函数被调用后（为各种值后，包括“当整个文件已加载”）使用的事件处理程序。

因为重要的是代码行的执行时间，而不是声明的时间。如果它在一个运行较晚的函数中，那很好。
2021-04-16 11:57:04
@Borna — 请参阅答案的最后一段。
2021-04-26 11:57:04
我真的没有在那里看到答案......我明白我可以用事件处理程序实现什么，但这不是我要问你的。我想知道为什么头部脚本可以处理 element.innerHTML 但 element.lenght 不能。只是我感到困惑，因为您说如果尝试从这些元素上方的脚本（在我们的示例中为 head 标记）访问它，则元素不存在。请试着理解我，谢谢。
2021-05-03 11:57:04
你能解释一下为什么我可以从头部获得一个带有脚本的元素的innerHTML，但问题中的脚本无法获得长度。谢谢！
2021-05-08 11:57:04

很简单，JavaScript 会自上而下，除非你告诉它做其他事情。当它到达 li 元素时，JavaScript 代码已经完成。

但是，如果您想将其保留在头脑中，您可以使用 document.ready 函数，它只会在加载 HTML 之后加载。

Head 将在 Body 之前渲染。如果您尝试访问li头部中的标签，显而易见的答案是它们在浏览器呈现正文部分之前不会创建，因此无法被引用。

因为当你在头脑中调用它时，li 还不存在（就 DOM 而言） – F4r-20 1 分钟前

这是对的。但是，试试这个：

<head>
      <meta http-equiv="content-type" content="text/html; charset=utf-8" />
      <script type="text/javascript">
        window.onload = function(){ 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>

当脚本包含在头部时，它们在页面内容之前加载或运行。当您将它们包含在正文中时，它们会在前面的 html 之后加载或运行。将脚本尽可能靠近正文的末尾通常是一种很好的做法。

其它你可能感兴趣的问题
上一篇嵌入没有 iframe 的外部页面？ 下一篇JSX (React) 中的大括号是什么意思？