53

問題が発生していました。

<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 に入れると、結果は 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>

スクリプトを body に入れようとすると、結果は 2. なぜこのような違いがあるのですか? 主な違いは何ですか？

4

10 に答える 10

25

スクリプトを頭に入れることと体に入れることの違いは何ですか?

それが実行される時間。

頭にスクリプトを入れると、結果に 0 ショッピング リストが表示されます

アクセスしようとしている要素は、スクリプトの実行時に存在しません (ドキュメント内のスクリプトの後に表示されるため)。

イベント ハンドラーを使用して、関数が後で呼び出されるようにスクリプトを記述できることに注意してください( 「ドキュメント全体が読み込まれたとき」を含む、後のさまざまな値に対して) 。

于 2013-06-14T10:33:01.153 に答える
10

頭は体の前にレンダリングされます。head 内のタグにアクセスしようとしている場合li、明らかな答えは、ブラウザーが body セクションをレンダリングするまで作成されないため、参照できないということです。

于 2013-06-14T10:33:56.840 に答える
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>

于 2013-06-14T10:40:49.203 に答える
3

通常、スクリプトと CSS ファイルは頭に収める必要があります。

head タグと body タグを挿入するタイミングの詳細については、このリンクを参照してください - CSS と Javascript コードを HTML Web ページに配置する必要があります & html の body と head のどちらにスクリプトを記述すればよいですか?

于 2013-10-24T08:45:23.667 に答える
3

電話すると:

alert(document.getElementsByTagName("li").length);

まだ存在しない要素を取得したい。ページを読み込んだときに最初に実行されるのは head であるためです。

要素を検索してliいますが、ヘッドがロードされたときにまだそこにありません。

リスト項目が存在するため、本文に配置する必要があります。それは動作します。

于 2013-06-14T10:35:59.917 に答える