DOM Tutorial
Erste Schritte mit DOM

Bemerkungen

Versionen

Vorhandene HTML-Elemente abrufen

Eine der häufigsten Aufgaben ist das Abrufen eines vorhandenen Elements aus dem DOM, um es zu bearbeiten. Am häufigsten werden diese Methoden in einem document , da es sich um den Stammknoten handelt, aber alle diese Methoden funktionieren für jedes HTML-Element in der Baumstruktur. Sie werden nur Kinder von dem Knoten zurückgeben, auf dem sie ausgeführt werden.

Abruf nach ID

var element = document.getElementById("logo");

element enthält das (einzige) Element, dessen id Attribut auf "Logo" gesetzt ist, oder enthält null wenn kein solches Element vorhanden ist. Wenn mehrere Elemente mit dieser ID vorhanden sind, ist das Dokument ungültig und alles kann passieren.

Abrufen nach Tag-Namen

var elements = document.getElementsByTagName("a");

elements enthalten eine Live- HTMLCollection (ein Array-ähnliches Objekt) aller Link-Tags im Dokument. Diese Sammlung ist mit dem DOM synchronisiert, sodass alle an dem DOM vorgenommenen Änderungen in dieser Sammlung übernommen werden. Die Sammlung bietet Direktzugriff und hat eine Länge.

var element = elements[0];
//Alternative
element = elements.item(0);

element enthält das erste HTML-Link-Element oder null wenn der Index außerhalb der Grenzen liegt

var length = elements.length;

length ist gleich der Anzahl der HTML-Linkelemente, die sich derzeit in der Liste befinden. Diese Nummer kann sich ändern, wenn das DOM geändert wird.

Abrufen nach Klasse

var elements = document.getElementsByClassName("recipe");

elements enthalten eine Live- HTMLCollection (ein Array-ähnliches Objekt) aller Elemente, deren class "Rezept" enthält. Diese Sammlung ist mit dem DOM synchronisiert, sodass alle an dem DOM vorgenommenen Änderungen in dieser Sammlung übernommen werden. Die Sammlung bietet Direktzugriff und hat eine Länge.

var element = elements[0];
//Alternative
element = elements.item(0);

element enthält das erste HTML-Element mit dieser Klasse. Wenn keine solchen Elemente vorhanden sind, hat element den Wert im ersten Beispiel undefined und im zweiten Beispiel null .

var length = elements.length;

length ist gleich der Anzahl der HTML-Elemente, die derzeit die Klasse "Rezept" haben. Diese Nummer kann sich ändern, wenn das DOM geändert wird.

Abrufen nach Name

var elements = document.getElementsByName("zipcode");

elements werden ein live enthalten NodeList (ein Array-ähnliches Objekt) alle Elemente mit ihrem name auf „zipcode“. Diese Sammlung ist mit dem DOM synchronisiert, sodass alle an dem DOM vorgenommenen Änderungen in dieser Sammlung übernommen werden. Die Sammlung bietet Direktzugriff und hat eine Länge.

var element = elements[0];
//Alternative
element = elements.item(0);

element enthält das erste HTML-Element mit diesem Namen.

var length = elements.length;

length ist gleich der Anzahl der HTML-Elemente, die aktuell "zipcode" als Namensattribut haben. Diese Nummer kann sich ändern, wenn das DOM geändert wird.

Fertig machen

Das DOM (Document Object Model) ist die Programmierschnittstelle für HTML- und XML-Dokumente. Es definiert die logische Struktur von Dokumenten und die Art und Weise, wie auf ein Dokument zugegriffen und es bearbeitet wird.

Die Hauptimplementierer der DOM-API sind Webbrowser. Die Spezifikationen werden von den W3C- und den WHATWG- Gruppen standardisiert, und das Objektmodell gibt das logische Modell für die Programmierschnittstelle an.

Die Darstellung der DOM-Struktur ähnelt einer baumartigen Ansicht, wobei jeder Knoten ein Objekt ist, das einen Teil des Markups darstellt. Je nach Typ erbt jedes Element auch spezifische und gemeinsam genutzte Funktionen.

Der Name "Document Object Model" wurde gewählt, weil es sich um ein "Objektmodell" im traditionellen objektorientierten Design handelt: Dokumente werden mithilfe von Objekten modelliert. Das Modell umfasst nicht nur die Struktur eines Dokuments, sondern auch das Verhalten eines Dokuments und die Objekte, aus denen es zusammengesetzt ist. Mit anderen Worten, in dem Beispiel-HTML-Diagramm stellen die Knoten keine Datenstruktur dar, sie repräsentieren Objekte, die Funktionen und Identität haben. Als Objektmodell identifiziert das Dokumentobjektmodell Folgendes:

• die Schnittstellen und Objekte, die zur Darstellung und Bearbeitung eines Dokuments verwendet werden
• Semantik dieser Schnittstellen und Objekte - einschließlich Verhalten und Attributen
• die Beziehungen und Kooperationen zwischen diesen Schnittstellen und Objekten

Warten Sie, bis DOM geladen ist

Verwenden Sie DOMContentLoaded wenn der mit DOM interagierende <script> Code im Abschnitt <head> ist. Wenn der Code nicht in den DOMContentLoaded Callback eingeschlossen ist, werden Fehler wie DOMContentLoaded

Kann nichts von null lesen

document.addEventListener('DOMContentLoaded', function(event) {
    // Code that interacts with DOM
});

^{https://html.spec.whatwg.org/multipage/syntax.html#the-end}

Alternative zu DOMContentLoaded

Eine Alternative (geeignet für IE8 )

// Alternative to DOMContentLoaded
document.onreadystatechange = function() {
    if (document.readyState === "interactive") {
        // initialize your DOM manipulation code here
    }
}

^{https://developer.mozilla.org/de/docs/Web/API/Document/readyState}

Verwenden Sie innerHTML

HTML

<div id="app"></div>

JS

document.getElementById('app').innerHTML = '<p>Some text</p>'

und jetzt sieht HTML so aus

<div id="app">
    <p>Some text</p>
</div>

HTML-Auszeichnung

Beispieleingabe:

<html>
  <head>
    <title>the title</title>
    <link href='css/app.css' type='text/css' rel='stylesheet'>
    <script src='js/app.js'></script>
  </head>
  <body>
    <h1>header</h1>
    <div>
      <p>hello!</p>
    </div>
  </body>
</html>

Ausgabe des DOM-Elements:

                             ------------                             
                             | document |    <--- DOM root object.                           
                             ------------                             
                                  |                                   
                                  |                                   
                             ------------                             
                             |   html   |     <--- document.documentElement                  
                             ------------                             
                    ______________|______________                     
                    |                           |                     
               ------------                ------------               
               |   head   |                |   body   |               
               ------------                ------------               
      ______________|______________             |______________       
      |             |             |             |             |       
 ------------  ------------  ------------  ------------  ------------ 
 |  title   |  |   link   |  |  script  |  |    h1    |  |   div    | 
 ------------  ------------  ------------  ------------  ------------ 
                                                              |       
                                                              |       
                                                         ------------ 
                                                         |    p     | 
                                                         ------------ 

Alle obigen Elemente erben von der HTMLElement-Schnittstelle und werden je nach Tag angepasst