53

我遇到了问题。

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

4

10 回答 10

25

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

它运行的时间。

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

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

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

于 2013-06-14T10:33:01.153 回答
15

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

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

于 2013-06-14T10:34:51.693 回答
10

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

于 2013-06-14T10:33:56.840 回答
6

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

于 2013-06-14T10:40:49.203 回答
4

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

于 2013-06-14T10:34:55.767 回答
3

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

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

于 2013-10-24T08:45:23.667 回答
3

你打电话时：

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

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

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

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

于 2013-06-14T10:35:59.917 回答
1

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

 <script type="text/javascript">
function MyFunction() {
    alert(document.getElementsByTagName("li").length);
}
window.onload = MyFunction;
</script>
于 2013-06-14T10:54:11.387 回答
0

以下代码执行 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>
于 2020-09-05T21:15:33.023 回答
0

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

  • 在您执行 HTML 文档的情况下，它将首先执行 head。正如你所看到的，你在头部写了一个脚本标签。

  • 所以，这里将首先执行一个脚本标签。在脚本标签内你要做什么，你会找到身体标签内可用的 li 标签的长度。

  • 但此时，浏览器还没有执行 body 标签。

  • 因此，您的脚本将得到 0 作为结果。

    alert(document.getElementsByTagName("li").length);
于 2021-05-15T18:21:13.117 回答