javascript - 将脚本放入头部和身体有什么区别？

Question

我遇到了问题。

<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. 为什么会有这样的差异？主要区别是什么？

score 25 · Accepted Answer

将脚本放入头部和身体有什么区别？

它运行的时间。

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

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

请注意，您可以编写脚本，以便稍后使用事件处理程序调用函数（对于稍后的各种值，包括“加载整个文档时”）。

score 15 · Accepted Answer

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

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

score 10 · Accepted Answer

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

score 6 · Accepted Answer

因为在您在头脑中调用它时，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>

score 4 · Accepted Answer

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

score 3 · Accepted Answer

一般来说，脚本和 CSS 文件必须适合 head，这是一种很好的做法。

有关何时放入 head 和 body 标记的更多详细信息，请参阅此链接 -我应该将 CSS 和 Javascript 代码放在 HTML 网页中的什么位置？ & 我应该在 html 的正文还是头部编写脚本？

score 3 · Accepted Answer

你打电话时：

alert(document.getElementsByTagName("li").length);

您想获得一个尚不存在的元素。因为头部是加载页面时首先运行的东西。

它正在搜索li元素，但是当头部加载时它还不存在。

你必须把它放在正文中，因为这样，列表项就存在了。然后它工作。

score 1 · Accepted Answer

如果将脚本放在 head 中，javascript 代码甚至会在 body 标记中的控件呈现之前执行。因此，如果您想将脚本保留在 head 标记中，请确保它们在 onload 完成后执行。下面是一个例子：

 <script type="text/javascript">
function MyFunction() {
    alert(document.getElementsByTagName("li").length);
}
window.onload = MyFunction;
</script>

score 0 · Accepted Answer

以下代码执行 head 标签中的脚本。一次不使用 JQuery，然后使用指示在加载文档时显示警报的 JQuery$(document).reaady()

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <script src="jquery-3.5.1.min.js"></script>
    <script type="text/javascript">
      // First alert will show # of opttions as 0, because the document is not ready yet
      alert(document.getElementsByTagName("li").length);
      // First alert will show the correct # of opttions as 2
      $(document).ready(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>

score 0 · Accepted Answer

HTML 文档以自上而下的方式执行。

在您执行 HTML 文档的情况下，它将首先执行 head。正如你所看到的，你在头部写了一个脚本标签。
所以，这里将首先执行一个脚本标签。在脚本标签内你要做什么，你会找到身体标签内可用的 li 标签的长度。
但此时，浏览器还没有执行 body 标签。
因此，您的脚本将得到 0 作为结果。
alert(document.getElementsByTagName("li").length);

javascript - 将脚本放入头部和身体有什么区别？

10 回答 10

Related

Reference