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

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>

Run Code Online (Sandbox Code Playgroud)

当我把脚本放在头部时,结果显示为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>

Run Code Online (Sandbox Code Playgroud)

当我试图将脚本放入正文时,结果显示2.为什么存在这样的差异？主要区别是什么？

Answer 1

Que*_*tin 17

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

它运行的时间.

当我把脚本放在头部时,结果显示0购物清单

脚本运行时,您尝试访问的元素不存在(因为它们出现在文档中的脚本之后).

请注意,您可以编写一个脚本,这样一个函数被调用后(为各种值后,包括"当整个文件已加载")使用的事件处理程序.

我真的没有在那里看到答案......我理解我可以用事件处理程序实现什么,但那不是我问你的问题.我想知道为什么来自head的脚本可以处理element.innerHTML但是element.lenght不能.这只是我感到困惑,因为你说如果试图从这些元素上方的脚本访问它(在我们的例子中是head标签),那么元素就不存在了.请尽量了解我,谢谢. (2认同)

Answer 2

小智 11

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

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

Answer 3

Dar*_*ren 8

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

Answer 4

br3*_*3w5 6

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

Answer 5

Cas*_*toA 6

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	12 年，8 月前
查看次数：	44715 次
最近记录：	7 年，8 月前