Html 将脚本放入 head 和 body 有什么区别？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17106462/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What's the difference between putting script in head and body?
提问by Deepika C P
I was getting a problem .
我遇到了问题。
<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>
When I put scripts in head, the result shows 0
当我将脚本放在头中时，结果显示为 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>
When I tried to put scripts in body, the result shows 2. why there is such a difference? what is the main difference?
当我尝试将脚本放入正文时，结果显示 2. 为什么会有这样的差异？主要区别是什么？
回答by Quentin
What's the difference between putting script in head and body?
将脚本放入 head 和 body 有什么区别？
The time that it runs.
它运行的时间。
When I put scripts in head, the result shows 0 Shopping list
当我把脚本放在头中时，结果显示 0 购物清单
The elements you are trying to access don't exist when the script runs (since they appear after the script in the document).
脚本运行时，您尝试访问的元素不存在（因为它们出现在文档中的脚本之后）。
Note that you can write a script so that a function is called later(for various values of laterincluding "when the entire document has loaded") using event handlers.
请注意，您可以编写一个脚本，这样一个函数被调用后（为各种值后，包括“当整个文件已加载”）使用的事件处理程序。
回答by Rinon
It's simple, JavaScript will go from up-down, unless you tell it to do something else. By the time it reaches the li elements, the JavaScript code has already been completed.
很简单，JavaScript 会自上而下，除非你告诉它做其他事情。当它到达 li 元素时，JavaScript 代码已经完成。
If you want to keep it in the head however, you could use the document.ready function and it will load only after the HTML it's loaded.
但是，如果您想将其保留在头脑中，则可以使用 document.ready 函数，它只会在加载 HTML 之后加载。
回答by Darren
Head will get rendered before Body. If you're trying to access your litags in the head, the obvious answer is that they are not created until the browser renders the body section and therefore cannot be referenced.
Head 将在 Body 之前渲染。如果您尝试访问lihead 中的标签，显而易见的答案是它们在浏览器呈现 body 部分之前不会创建，因此无法被引用。
回答by CastenettoA
Because at the time of you calling it in the head, the li doesn't yet exist (As far as the DOM is concerned) – F4r-20 1 min ago
因为在你在头脑中调用它的时候，li 还不存在（就 DOM 而言）——F4r-20 1 分钟前
This is correct. But, try this:
这是对的。但是，试试这个：
<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>回答by Kees Sonnema
When you call:
你打电话时：
alert(document.getElementsByTagName("li").length);
You want to get an element that does not exist yet. because the head is the first thing that runs when you load the page.
您想要获取尚不存在的元素。因为 head 是加载页面时首先运行的东西。
it's searching for the lielement, but it isn't yet there when the head loads.
它正在搜索li元素，但是当头部加载时它还不存在。
You have to put it in the body because then, the list items exist. then it works.
你必须把它放在正文中，因为那样的话，列表项就存在了。那么它的工作原理。
回答by br3w5
When scripts are included in the head they load or run before the content of the page. When you include them in the body they load or run after the preceding html. It's usually good practice to put scripts as close to the end of the body as possible.
当脚本包含在头部时，它们会在页面内容之前加载或运行。当您将它们包含在正文中时，它们会在前面的 html 之后加载或运行。将脚本尽可能靠近正文的末尾通常是一种很好的做法。
回答by Nitin Agrawal
If you put script in head, javascript code gets executed even before controls in body tags are rendered. So if you want to keep your scripts in head tag, make sure they are executed once onload is completed. Below is an example:
如果你把脚本放在 head 中，javascript 代码甚至在 body 标签中的控件被呈现之前就被执行了。因此，如果您想将脚本保留在 head 标记中，请确保在 onload 完成后执行它们。下面是一个例子：
<script type="text/javascript">
function MyFunction() {
alert(document.getElementsByTagName("li").length);
}
window.onload = MyFunction;
</script>
回答by orangeguy
Generally scripts and CSS files must be fit into head, as good practice.
通常脚本和 CSS 文件必须放入 head 中，这是一种很好的做法。
For more details about when to put in head and body tag, refer this link - 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?
有关何时放入 head 和 body 标签的更多详细信息，请参阅此链接 -我应该将 CSS 和 Javascript 代码放在 HTML 网页中的何处？& 我应该在正文中还是在 html 的头部编写脚本？
