JavaScript-将脚本放在头部和身体中有什么区别？-堆栈溢出

顺晟科技

2022-10-19 12:41:56

147

我遇到了一个问题。

当我将脚本放入head中时，结果显示0

当我试图将脚本放入body中时，结果显示为2。为什么会有这样的区别？主要区别是什么？

顺晟科技：

如果将脚本放在head中，javascript代码甚至在呈现body标记中的控件之前就会执行。因此，如果您希望将脚本保存在head标签中，请确保在onload完成后执行这些脚本。下面是一个示例:

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

它正在搜索元素，但当磁头加载时，它还没有在那里。

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

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

但是，如果您想把它保存在头部，可以使用document.ready函数，它只在加载HTML之后才加载。

下面的代码执行head标记中的脚本。一次不使用JQuery，然后使用JQuery，JQuery指示在加载文档时显示警报

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

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

在您的例子中，当您执行HTML文档时，它将首先执行head。正如您所看到的，您在head中编写了一个脚本标记。
所以，这里将首先执行一个脚本标记。在脚本标记中，您要做的是找到body标记中可用的li标记的长度。
但是现在浏览器还没有执行body标记。
所以，脚本的结果将是0。
alert（document.getElementsByTagName（“Li”）.length）；

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

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

这是正确的。但是，请尝试以下操作:

头部将在身体之前呈现。如果您试图访问head中的标记，显而易见的答案是，在浏览器呈现body部分之前，它们不会被创建，因此无法被引用。

把脚本放在头上和身体上有什么区别？

运行时间。

当我将脚本放入head中时，结果显示0个购物列表

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

注意，您可以编写一个脚本，以便使用事件处理程序.

调用函数以后（对于以后的各种值，包括“加载整个文档时”）

通常，脚本和CSS文件必须与head相匹配，这是一个很好的做法。

有关何时放入head和body标记的详细信息，请参阅此链接-在HTML网页中应该将CSS和Javascript代码放入何处？ (&A) 应该在HTML的正文还是标题中编写脚本？

上一篇：JavaScript-我希望我的下拉下一篇：JavaScript-如何在材料UI

网站建设

Html

JavaScript-将脚本放在头部和身体中有什么区别？-堆栈溢出