Orlok: Body

Beitrag lesen

Hallo

das body-object ist null wärend der laufzeit. muss das erst geschlossen werden damit man es ansteuern kann? wie <body>..</body>???

es ist standardmäßig schon vorhanden - wenn man es nicht kaputt macht. Hier ein bisschen Hintergrundwissen für Dich:

Damit er lernt, wie man sehr umständlich das Problem löst, dass man nur eine Handlerfunktion als Objekteigenschaft hinterlegen kann?

Ich weiß, es klingt verrückt, aber ich glaube da gibt es noch eine bessere Möglichkeit als in diesem insgesamt doch recht antiquierten Tutorial:

window.addEventListener('load', foo);
window.addEventListener('load', bar);
window.addEventListener('load', baz);
// ...

Davon abgesehen, ist body nicht „standardmäßig schon vorhanden“, wie du sagst.

Zwar ist body kein Pflichtelement weil es obligatorisch ist, aber das bedeutet eben nicht, dass es vom Browser quasi sofort eingefügt wird:

<!doctype html>

<html lang="de">
  <head>
    <meta charset="utf-8">
    <title> Hallo Welt </title>
    <script>

      console.log(document.body ? true : false); // false

    </script>
  </head>
</html>

Die Konstruktion des Parsebaums ist Teil eines inkrementellen Prozesses und als state machine implementiert, das heißt, erst wenn der Parser in den insertion modeafter head“ wechselt und gemäß dem Fall, dass der Tokenizer kein öffnendes body-Tag ausspuckt, wird body automatisch ergänzt:

<!doctype html>

<html lang="de">
  <head>
    <meta charset="utf-8">
    <title> Hallo Welt </title>
  </head>
  <p> Hallo Welt </p>
  <script>

    console.log(document.body ? true : false); // true;

  </script>
</html>

Das Element p darf in head nicht vorkommen, daher wechselt der Zustand zu „after head“ und da hier vom Tokenizer kein öffnendes body-Tag geliefert wurde, wird das Element entsprechend automatisch eingefügt und es geht weiter „in body“.

Anders aber hier:

<!doctype html>

<html lang="de">
  <head>
    <meta charset="utf-8">
    <title> Hallo Welt </title>
  </head>
  <script>

    console.log(document.body ? true : false); // false;

  </script>
  <p> Hallo Welt </p>
</html>

Zwar signalisiert das schließende head-Tag, dass wir uns nun im Zustand „after head“ befinden sollten, aber da kein öffnendes body-Tag folgt und script sowohl in head als auch in body vorkommen darf, muss der Parser hier eine Entscheidung treffen, ob es sich bei script um ein falsch plaziertes Element handelt, welches eigentlich zu head gehört, oder ob das Element Kind von body sein soll.

Im Zweifel wird script hier als metadata content angesehen und entsprechend in den head verfrachtet, so dass der gleiche Code später im Browser tatsächlich so aussieht:

<!doctype html>

<html lang="de">
  <head>
    <meta charset="utf-8">
    <title> Hallo Welt </title>
    <script>

      console.log(document.body ? true : false); // false;

    </script>
  </head>
  <body>
    <p> Hallo Welt </p>
  </body>
</html>

Wenn ich in JavaScript also zum frühestmöglichen Zeitpunkt auf body zugreifen will, muss ich script direkt nach dem öffnenden body-Tag notieren, oder das Element im Script selbst erstellen…

Ersteres wäre hier in diesem konkreten Fall wahrscheinlich sogar die bessere Lösung, denn wenn wir JavaScript nur benutzen, um den „Platzhalter“ wieder auszublenden, wenn die Seite fertig geladen ist, in dem wir die entsprechende Klasse zuweisen, dann passiert für Besucher ohne JavaScript nichts und sie bekommen den Seiteninhalt gar nicht zu Gesicht:

<!doctype html>

<html lang="de">
  <head>
  <!-- ... -->
  </head>
  <body>
    <script>

      var div = document.createElement('div');
      document.body.appendChild(div);

      window.addEventListener('load', function ( ) {
        div.className = 'invisible';                         // display: none;
      });

    </script>
    <!-- ... -->
  </body>
</html>

Aber wie ich schon sagte, halte ich das ganze Vorhaben ohnehin für falsch, denn gerade die Tatsache, dass Browser so konzipiert sind, die Elemente so schnell wie möglich zu rendern, statt mit der Anzeige zu warten bis alles geladen ist, sollte ein klares Indiz dafür sein, dass Benutzer eben nicht gerne warten, und nichts anderes bewirkt dieser „Startbildschirm“!

Eine gute Erklärung, warum das hier sinnvoll sein soll, habe ich jedenfalls noch nicht gelesen…

Gruß,

Orlok

0 49

createAttribut is not a Function

mb
  • javascript
  1. 0
    Der Martin
    1. 0
      MudGuard
      1. 0
        Der Martin
        1. 0
          mb
          1. 0
            Felix Riesterer
            1. 0
              mb
              1. 0
                Gunnar Bittersmann
                1. 0
                  mb
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      mb
              2. 0
                JürgenB
            2. 0
              mb
            3. 1

              Body

              Orlok
              • browser
              • html
              • javascript
              1. 0
                Orlok
                • korrektur
                1. 0
                  mb
              2. 0
                Gunnar Bittersmann
                1. 0
                  1unitedpower
                  1. 0
                    Orlok
                    1. 0
                      Orlok
                      • korrektur
                      • zu diesem forum
                      1. 1

                        Bearbeitungszeitraum

                        Auge
                        • zu diesem forum
                        1. 0
                          Orlok
                          1. 0
                            woodfighter
                            1. 0
                              Auge
                              1. 0
                                Christian Kruse
                                1. 0
                                  Christian Kruse
                                2. 0
                                  Auge
                                  1. 0
                                    Christian Kruse
                                    1. 0
                                      Auge
                          2. 1
                            Tabellenkalk
                          3. 0
                            Auge
                            1. 0
                              Orlok
                              1. 0
                                Matthias Apsel
                            2. 0
                              Matthias Apsel
                              1. 0
                                Auge
                              2. 0
                                Christian Kruse
                                1. 0
                                  Matthias Apsel
                                  1. 0
                                    Christian Kruse
                                    1. 0
                                      Matthias Apsel
                                      1. 0
                                        Gunnar Bittersmann
                                        1. 0
                                          Gunnar Bittersmann
                          4. 0
                            Christian Kruse
    2. 0
      Orlok
      • html
      1. 0
        Der Martin
    3. 0
      mb
      1. 0
        Orlok
        • javascript
        • usability
        1. 0
          Der Martin
          1. 0
            Orlok
            • javascript
            • menschelei
        2. 0
          mb