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

Answer 1

将脚本放在头部和身体之间有什么区别？

它运行的时间。

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

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

请注意，您可以使用{{编写一个脚本，以便稍后调用的函数（对于以后的各种值，包括“当整个文档已加载时”） 3}}

Answer 2

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

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

Answer 3

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

Answer 4

致电时：

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

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

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

你必须把它放在体内，因为那样，列表项就存在了。那就行了。

Answer 5

因为当你在头部调用它时，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>

Answer 6

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

Answer 7

如果你把脚本放在头上，即使在渲染body标签中的控件之前，javascript代码也会被执行。因此，如果您希望将脚本保留在head标记中，请确保在onload完成后执行它们。以下是一个例子：

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

Answer 8

通常情况下，脚本和CSS文件必须符合标准。

有关何时放入头部和身体标记的详细信息，请参阅此链接 - Where should I put the CSS and Javascript code in an HTML webpage? ＆安培; Should I write script in the body or the head of the html?

Answer 9

以下代码执行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>

Answer 10

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

就您而言，当您执行 HTML 文档时，它将首先执行 head。正如你所看到的，你在头部内部写了一个脚本标签。
所以，这里会先执行一个脚本标签。在 script 标签内，你要做什么，你会找到 body 标签内可用的 li 标签的长度。
但此时，浏览器还没有执行 body 标签。
因此，您的脚本将得到 0 作为结果。
警报（document.getElementsByTagName（“li”）。长度）；

把脚本放在头部和身体之间有什么区别？

10 个答案: