[英]What's the difference between putting script in head and 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>
当我将脚本放在头中时，结果显示为 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. 为什么会有这样的差异？ 主要区别是什么？
将脚本放入 head 和 body 有什么区别？
它运行的时间。
当我把脚本放在头里时，结果显示 0 购物清单
当脚本运行时，您尝试访问的元素不存在（因为它们出现在文档中的脚本之后）。
请注意，您可以编写一个脚本，这样的功能是后来被称为（为以后包括“当整个文件已加载”不同的值）使用的事件处理程序。
很简单，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 之后加载或运行。 将脚本尽可能靠近正文的末尾通常是一种很好的做法。
你打电话的时候：
alert(document.getElementsByTagName("li").length);
您想要获取尚不存在的元素。 因为 head 是加载页面时首先运行的东西。
它正在搜索li元素，但是当头部加载时它还不存在。
你必须把它放在正文中，因为那样的话，列表项就存在了。 那么它的工作原理。
通常脚本和 CSS 文件必须放入 head 中，这是一种很好的做法。
有关何时放入 head 和 body 标签的更多详细信息，请参阅此链接 -我应该将 CSS 和 Javascript 代码放在 HTML 网页中的何处？ &我应该在正文中还是在 html 的头部编写脚本？
如果你把脚本放在 head 中，javascript 代码甚至在 body 标签中的控件被呈现之前就会被执行。 因此，如果您想将脚本保留在 head 标记中，请确保在 onload 完成后执行它们。 下面是一个例子：
<script type="text/javascript">
function MyFunction() {
alert(document.getElementsByTagName("li").length);
}
window.onload = MyFunction;
</script>
以下代码执行 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>
HTML 文档以自上而下的方式执行。
就您而言，当您执行 HTML 文档时，它将首先执行 head。 正如你所看到的，你在头部内部写了一个脚本标签。
因此，这里将首先执行脚本标记。 在脚本标签中，您将要执行的操作是找到 body 标签内可用的 li 标签的长度。
但此时，浏览器还没有执行 body 标签。
因此，您的脚本将获得 0 作为结果。
警报（document.getElementsByTagName（“li”）。长度）；
将javascript放在头部或身体之间有区别吗？
[英]is there a difference between putting a javascript in the head or in the body?
$（document）.ready（）和包含身体末尾的脚本有什么区别？
[英]What's the difference between $(document).ready() and including a script at the end of the body?
什么是优点和缺点：将javascript放在头部并放在身体关闭之前
[英]What's Pros and Cons: putting javascript in head and putting just before the body close
onLoad，onDomready，No wrap-in之间有什么区别 <head> ，没有包装 <body> ？
[英]What is the difference between onLoad, onDomready, No wrap - in <head>, and No wrap - in <body>?
此JavaScript代码有什么问题？ （主体脚本调用head函数）
[英]What's wrong with this javascript code? (body script calling head function)
有什么区别 <head> 和 <asp:Content ID=“HeaderContent” …> ？
[英]What's the difference between <head> and <asp:Content ID=“HeaderContent” …>?
包含时有什么区别<script> tag in HTML's header or body
[英]What is the difference when including <script> tag in HTML's header or body
将 javascript 放入文件和脚本标签有什么区别？
[英]What is the difference in putting a javascript in a file and in a script tag?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.