[英]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.