it-swarm.com.de

Was ist der Unterschied zwischen dem Einfügen von Drehbüchern in Kopf und Körper?

Ich bekam ein 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>

Wenn ich Skripte in den Kopf stecke, zeigt das Ergebnis 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>

Als ich versucht habe, Skripte in body zu schreiben, zeigt das Ergebnis 2. warum gibt es so einen Unterschied? Was ist der Hauptunterschied?

37
Deepika C P

Was ist der Unterschied zwischen dem Einfügen von Drehbüchern in Kopf und Körper?

Die Zeit, die es läuft.

Wenn ich Skripte in den Kopf stecke, zeigt das Ergebnis 0 Einkaufsliste

Die Elemente, auf die Sie zugreifen möchten, sind bei Ausführung des Skripts nicht vorhanden (da sie nach dem Skript im Dokument angezeigt werden).

Beachten Sie, dass Sie ein Skript schreiben können, damit eine Funktion später aufgerufen wird (für verschiedene Werte von später einschließlich "Wenn das gesamte Dokument geladen wurde") mit Ereignishandler .

17
Quentin

Es ist ganz einfach, JavaScript wird von oben nach unten ausgeführt, es sei denn, Sie weisen es an, etwas anderes zu tun. Bei Erreichen der li-Elemente ist der JavaScript-Code bereits vollständig.

Wenn Sie es jedoch im Kopf behalten möchten, können Sie die Funktion document.ready verwenden, die erst nach dem Laden des HTML geladen wird.

10
Rinon

Der Kopf wird vor dem Körper gerendert. Wenn Sie versuchen, auf Ihre li -Tags im Kopf zuzugreifen, ist die offensichtliche Antwort, dass sie erst erstellt werden, wenn der Browser den Hauptteil wiedergibt und daher nicht darauf verwiesen werden kann.

7
Darren

Weil zu dem Zeitpunkt, als Sie es in den Kopf nannten, das Li noch nicht existiert (soweit es das DOM betrifft) - F4r-20 vor 1 Minute

Das ist richtig. Aber versuchen Sie Folgendes:

<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>
4
CastenettoA

Wenn du anrufst:

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

Sie möchten ein Element erhalten, das noch nicht existiert. weil der Kopf das erste ist, was läuft, wenn Sie die Seite laden.

es sucht nach dem li -Element, ist aber noch nicht da, wenn der Kopf geladen wird.

Sie müssen es in den Text einfügen, da dann die Listenelemente vorhanden sind. dann klappt es.

3
Kees Sonnema

Wenn Skripte im Kopf enthalten sind, werden sie vor dem Inhalt der Seite geladen oder ausgeführt. Wenn Sie sie in den Textkörper einfügen, werden sie nach dem vorhergehenden HTML-Code geladen oder ausgeführt. In der Regel empfiehlt es sich, Skripte so nah wie möglich am Ende des Körpers zu platzieren.

1
br3w5

Wenn Sie ein Skript in head einfügen, wird Javascript-Code ausgeführt, noch bevor Steuerelemente in Body-Tags gerendert werden. Wenn Sie also Ihre Skripte im Head-Tag behalten möchten, stellen Sie sicher, dass sie ausgeführt werden, sobald der Onload abgeschlossen ist. Unten ist ein Beispiel:

 <script type="text/javascript">
function MyFunction() {
    alert(document.getElementsByTagName("li").length);
}
window.onload = MyFunction;
</script>
1
Nitin Agrawal

Im Allgemeinen müssen Skripte und CSS-Dateien als bewährte Methode in den Kopf eingefügt werden.

Weitere Informationen zum Einfügen von Head- und Body-Tags finden Sie unter diesem Link. - Wo soll ich den CSS- und Javascript-Code in eine HTML-Webseite einfügen? & Soll ich ein Skript in den Body schreiben?) oder der Kopf des HTML?

1
orangeguy