logo

JavaScript-Grundlagen Nr. 6:Das Dokumentobjektmodell

Ausgehend von diesem Artikel tauchen wir in die praktische Anwendung der JavaScript-Sprache in der Webentwicklung ein. Wir werden darüber sprechen, wie JavaScript, HTML und CSS zusammenarbeiten können, um Ihre Webseiten ansprechender und interaktiver zu gestalten.

Die DOM-Struktur

Beginnen wir mit einem kurzen Überblick über das Dokumentobjektmodell. Hier ist ein einfaches HTML-Dokument:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Example Page</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div>
        <p>Vestibulum fringilla lorem ac elit suscipit, nec suscipit nunc posuere.</p>
        <p>Proin efficitur eros scelerisque consequat <a href="https://www.ericsdevblog.com/">pulvinar</a>.</p>
    </div>
</body>
</html>

Jedes HTML-Element kann als Box betrachtet werden. Das Beispieldokument hat beispielsweise die folgende Struktur:

Für jede Box gibt es ein entsprechendes Objekt, mit dem wir mithilfe von JavaScript interagieren können, um mehr Details über diese Box herauszufinden, wie z. B. Inhalt, Attribute usw. Diese Art der Darstellung wird als Dokumentobjektmodell oder DOM bezeichnet kurz.

Das zweite wichtige Merkmal dieser DOM-Struktur ist, dass die Boxen alle miteinander verbunden sind, was bedeutet, dass es uns möglich ist, zu jedem anderen Knoten auf der Seite zu wechseln, wenn wir einen Startpunkt auswählen.

Zum Beispiel <body> node hat drei untergeordnete Elemente, <h1> , <p> und <div> . Die <div> node hat zwei weitere Absätze (<p> ) hat untergeordnete Elemente. Um also den Absatz mit einem Link (<a> ) in diesem Beispieldokument können wir von <html> ausgehen bis <body> bis <div> Suchen Sie schließlich <p> Knoten.

JavaScript und HTML

Um JavaScript-Code in ein HTML-Dokument zu importieren, können wir den <script> </script> verwenden Schild. 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example Page</title>
</head>
<body>
    ...

    <!--JavaScript-->
    <script>
        ...
    </script>

    <!--JavaScript in External File-->
    <script src="myScript.js"></script>

</body>
</html>

Es ist üblich, den JavaScript-Code vor das Ende des <body> zu setzen Schild. Es gibt zwei Möglichkeiten, JavaScript einzufügen, genau wie CSS, Sie können es mit HTML zusammenfügen, oder Sie können JavaScript in eine separate Datei einfügen. Für dieses Tutorial werden wir zur Vereinfachung HTML- und JavaScript-Code zusammenfügen.

JavaScript behandelt jede DOM-Box als ein Objekt, und das ermöglicht uns den Zugriff auf jedes Element im HTML-Dokument mit der globalen Bindung document . Beispiel:document.body bezieht sich auf <body> Element des Dokuments. 

<body>
    ...

    <!--JavaScript-->
    <script>
        // Access body element
        let body_element = document.body;

        // Access h1 element
        let h1_element = document.body.firstElementChild;
        console.log(h1_element.tagName);

        // Access paragraph element (with link)
        let p_element = document.body.childNodes[5].lastElementChild;
        console.log(p_element.tagName);
    </script>
</body>

Gehen Sie zu Developer Tools -> Console, und Sie sollten sehen, dass die richtigen Tag-Namen zurückgegeben wurden.

Beachten Sie, dass die Indexnummer, die wir verwenden, um <div> zu lokalisieren Element ist 5, das liegt daran, dass childNodes() -Methode gibt nicht nur Elementknoten zurück, sondern auch Textknoten und Kommentarknoten. Beispielsweise hätte ein Absatzelement einen Elementknoten <p> , und einen Textknoten, der seinen Inhalt darstellt.

In der Webentwicklung ist es möglich, jedes bestimmte Element im Dokument zu erreichen, indem man bei document.body beginnt und einem festen Pfad von Eigenschaften folgen. Obwohl dies möglich ist, ist es dennoch eine schlechte Idee, insbesondere wenn Sie ein großes HTML-Dokument mit einem komplizierten Beziehungsbaum haben. Es ist sehr einfach, einen Fehler zu machen. Glücklicherweise bietet uns JavaScript einige intelligentere Möglichkeiten, Elemente in einem HTML-Dokument zu finden.

Elemente finden

Wir haben bereits erwähnt, dass JavaScript alle HTML-Elemente als Objekte behandelt, was impliziert, dass es eingebaute Methoden gibt, die wir verwenden können. Tatsächlich gibt es drei Methoden, die uns helfen können, Elemente in einer HTML-Datei zu finden, und sie funktionieren tatsächlich sehr ähnlich wie die Selektoren, über die wir in unserem CSS-Kurs gesprochen haben.

Beispielsweise haben alle HTML-Elemente einen getElementsByTagName() -Methode, die uns hilft, Elemente mit einem bestimmten Tag zu finden. 

<body>
    <h1>Example Page</h1>
    <p class="paragraphs">Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </p>
    <div>
        <p class="paragraphs paragraphs_div">Vestibulum fringilla lorem ac elit suscipit, nec suscipit nunc posuere.</p>
        <p class="paragraphs paragraphs_div" id="paragraph_link">Proin efficitur eros scelerisque consequat <a href="https://www.ericsdevblog.com/">pulvinar</a>.</p>
    </div>

    <!--JavaScript-->
    <script>
        // Get all paragraph elements
        let p_elements = document.body.getElementsByTagName("p");
    </script>
</body>

Diese Methode gibt eine Sammlung von Elementen mit dem angegebenen Tag zurück, und Sie können auf jedes einzelne zugreifen, indem Sie die Indexnummer angeben (wie bei einem Array). 

<!--JavaScript-->
<script>
    // Get all paragraph elements
    let p_elements = document.body.getElementsByTagName("p");

    // Get the second paragraph element and print its content
    let second_p = p_elements[1];
    console.log(second_p.innerHTML);
</script>

Verwechseln Sie diese Sammlung jedoch nicht mit einem tatsächlichen Array, sie sind sehr ähnlich, aber nicht ganz gleich. Wir können es nicht mit for/of durchlaufen -Schleife müssen wir die Indexnummern verwenden und die Elemente mit einem regulären for durchlaufen Schleife. Oder wir können diese Sammlung mit Array.from in ein Array umwandeln Methode.

Sobald wir das gesuchte Element gefunden haben, können wir mit dem Punkt (. ) Operator, und wir können auch ihre Werte ändern:

<!--JavaScript-->
<script>
    // Get all paragraph elements
    let p_elements = document.body.getElementsByTagName("p");

    // Get the second paragraph element
    let second_p = p_elements[1];

    // Print its content
    console.log(second_p.innerHTML);

    // Change its content
    second_p.innerHTML = "Changed content.";

    // Print its attributes
    console.log(second_p.attributes);

    // Access one of the attributes
    console.log(second_p.getAttribute("class"));
</script>

Die zweite Methode ist document.getElementById() , wird es verwendet, um ein einzelnes Element zu finden, anstatt eine Sammlung von Elementen zurückzugeben. Beachten Sie, dass diese Methode nicht funktioniert unter jedem Elementobjekt existieren, es gibt keine document.body.getElementById() . 

<!--JavaScript-->
<script>
    // Get an element based on ID
    let element = document.getElementById("paragraph_link");
    console.log(element.innerHTML);
</script>

Die dritte Methode ist die nützlichste, sie hilft uns, Elemente mit demselben Klassennamen zu finden. Das ist getElementsByClassName() , das das gesamte Dokument durchsucht, um eine Sammlung von Elementen mit dem angegebenen Klassennamen zu finden.

Elemente hinzufügen und löschen

Abschließend ist es an der Zeit, darüber zu sprechen, wie diese HTML-Elemente manipuliert werden können, sobald wir sie gefunden haben. Tatsächlich kann fast alles in der DOM-Struktur geändert werden.

Zum Beispiel können wir ein Element wie dieses entfernen:

// Get an element based on ID, and then remove it from the page
let element = document.getElementById("paragraph_link");
element.remove();

Oder wir können ein neues Element erstellen und es der DOM-Struktur hinzufügen:

// Create new paragraph element
let new_p = document.createElement("p");

// Create content for the new p element
let new_text = document.createTextNode("This is a new paragraph.");

// Append the content to the p element node
new_p.appendChild(new_text);

// Add the new paragraph to the DOM structure
let element = document.getElementById("paragraph_link");
element.append(new_p);

Wie bereits erwähnt, sollte ein Absatzelement einen <p> haben Elementknoten, gefolgt von einem Textknoten, der seinen Inhalt darstellt.

Wir können auch ein Element durch ein anderes ersetzen:

// Replace a paragraph with the new paragraph
let element = document.getElementById("paragraph_link");
element.replaceWith(new_p);

In diesem Artikel haben wir kurz darüber gesprochen, wie man HTML-Elemente mit JavaScript findet und manipuliert. Möglicherweise haben Sie jedoch bemerkt, dass alle Änderungen sofort vorgenommen werden, wenn wir unseren Browser aktualisieren, was nicht sehr interaktiv ist. Im nächsten Artikel werden wir besprechen, welche anderen Ereignisse wir verwenden können, um JavaScript zum Ausführen einer Aktion auszulösen.