JavaScript/DOM

Aus SELFHTML-Wiki
< JavaScript(Weitergeleitet von JavaScript/Objekte/DOM)
Wechseln zu: Navigation, Suche

Das DOM (Document Object Model) ist die Schnittstelle zwischen HTML und dynamischem JavaScript. Alle Elemente werden zu Objekten, die dynamisch aufgerufen, verändert, hinzugefügt und gelöscht werden können.


DOM


Inhaltsverzeichnis

[Bearbeiten] Allgemeines

Eine Webseite liegt dem Browser zunächst als bloßer Text, der mit der Auszeichnungssprache HTML formatiert ist, vor. Noch während der Browser den Code über das Netz empfängt, verarbeitet er ihn Stück für Stück. Diese Aufgabe übernimmt der sogenannte Parser (englisch parse = einen Satz in seine grammatikalischen Einzelteile zerlegen).

Der Parser überführt den HTML-Code in eine Objektstruktur, die dann im Arbeitsspeicher vorgehalten wird. Diese Objektstruktur besteht aus verschachtelten Knoten, allen voran Elementknoten, Attributknoten und Textknoten, die in einer Baumstruktur angeordnet sind.

Der Browser nutzt für alle weiteren Operationen diese Objektstruktur, nicht den HTML-Quellcode, an dem der Webautor üblicherweise arbeitet. Insbesondere CSS und JavaScript beziehen sich nicht auf den HTML-Code als Text, sondern auf den entsprechenden Elementenbaum im Speicher.

DOM - Baumstruktur einer Webseite

Die einzelnen Bestandteile einer solchen Baumstruktur werden als Knoten bezeichnet. Das zentrale Objekt des DOM ist deshalb das Objekt Node (node = Knoten). Es gibt verschiedene Knotentypen. Innerhalb eines gewöhnlichen HTML-Dokuments gibt es auf jeden Fall drei wichtige Knotentypen, die Sie unterscheiden müssen:

  • Elementknoten
  • Attributknoten
  • Textknoten

Dieser Elementenbaum ist jedoch nicht statisch, sondern kann durch DOM-Manipulation ausgelesen, verändert und erweitert werden.

Diese Methoden des document-Objekts ermöglichen es, auf jeden beliebigen Elementknoten direkt zuzugreifen:

  • getElementById(): kann auf Elemente zugreifen, die ein dokumentweit eindeutiges id-Attribut enthalten
  • getElementsByName(): kann auf Elemente zugreifen, die einen Namen besitzen (er muss nicht unbedingt eindeutig sein)
  • getElementsByTagName(): kann auf alle Elemente zugreifen in der Form: "liefere mir das 27. td-Element im Dokument".
  • querySelector(): gibt das erste Element zurück, das dem angegebenen CSS-Selektor entspricht.
  • querySelectorAll(): gibt eine Liste von Elementen zurück, die dem angegebenen CSS-Selektor (auch mehrere, durch Komma getrennte, Angaben möglich) entsprechen

Ausgehend von einem ermittelten Elementknoten lässt sich dann schnell auf dessen Attribute und Inhalt zugreifen.

Sie können aber auch mit JavaScript/DOM/Document/createElement ein Element neu erzeugen und dann mit

in den Elementenbaum einhängen.

[Bearbeiten] Whitespace

Wie im oberen Abschnitt schon erwähnt, sind Webseiten Text-Dateien, die zur besseren Übersicht oft durch Zeilenumbrüche und einrückende Leerzeichen formatiert werden. Dies stellt Sie manchmal vor ein Problem, da folgender Code nicht wie oben dargestellt geparst wird:

Beispiel
<main>
  <h1>Überschrift</h1>
  <!-- Hier ist ein Kommentar -->
  <p>
    Textinhalt
    <img src="bild.jpg" alt="">
  </p>
</main>

In Wirklichkeit sieht er so aus:

DOM - Whitespace im Elementenbaum

Alle Leerzeichen und Zeilenumbrüche erzeugen Textknoten. Da dies aber nicht innerhalb von Tags gilt, könnten Sie HTML-Markup alternativ so auszeichnen:[1]

Beispiel
<main
  ><h1>Überschrift</h1
  ><!-- Hier ist ein Kommentar --
  ><p>
    Textinhalt
    <img src="bild.jpg" alt=""
  ></p
></main>

Bei dynamisch erzeugtem HTML-Markup tritt dieses Problem nicht auf, da diese immer aneinanderfolgen.

[Bearbeiten] Quellen

  1. MDN: " Whitespace: Making Things easier

[Bearbeiten] Weblinks

[Bearbeiten] Siehe auch

Meine Werkzeuge
Namensräume

Varianten
Aktionen
Übersicht
Schnell‑Index
Mitmachen
Werkzeuge
Spenden
SELFHTML