Document Object Model (DOM) in JavaScript

Inhaltsverzeichnis

1. Was ist DOM
2. Elemente auswählen
3. getElementById()
4. querySelector()
5. querySelectorAll()
6. Neue Elemente hinzufügen
7. CSS-Stile ändern
8. So überwachen Sie Ereignisse

1. Was ist DOM

DOM Document Object Model ist eine Programmierschnittstelle für HTML- und XML-Dokumente. Es verwendet einen logischen Baum, um ein Dokument darzustellen. Der Endpunkt jedes Zweigs des Baums ist ein node . Jeder Knoten enthält objects , mit denen Elemente im Dokument erstellt, geändert oder gelöscht werden können. Diesen Elementen können auch Ereignisse hinzugefügt werden, um die Seite dynamischer zu gestalten.

DOM behandelt ein HTML-Dokument als einen Knotenbaum, wobei ein Knoten ein HTML-Element darstellt. Der folgende HTML-Code dient dem besseren Verständnis der DOM-Baumstruktur.

<!DOCTYPE html>
<html lang="de">
    <Kopf>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
        <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
        <title>DOM-Baumstruktur</title>
    </Kopf>
    <Text>
        <h1>DOM-Objektmodell</h1>
        <h2>DOM-Baumstruktur</h2>
    </body>
</html>

Das Dokument wird als Stammknoten bezeichnet und enthält einen untergeordneten Knoten, <html> -Element. Das <html> -Element enthält zwei untergeordnete Elemente, nämlich die Elemente <head> und <body>.

Sowohl <head> als auch <body> haben ihre eigenen untergeordneten Elemente, wie unten gezeigt:

Auf diese Elemente im Dokument kann über JavaScript zugegriffen und sie können geändert werden. Im Folgenden wird die Verwendung von JavaScript zur Manipulation DOM vorgestellt.

2. Elemente auswählen

Wie wähle ich Elemente in einem Dokument aus? Es gibt verschiedene Möglichkeiten, Elemente in einem HTML-Dokument auszuwählen. Hier sind drei davon:

getElementById()： Gibt ein Element zurück, das einer bestimmten ID entspricht.
querySelector()： Gibt das erste HTMLElement -Objekt im Dokument zurück, das dem angegebenen Selektor oder der angegebenen Selektorgruppe entspricht.
querySelectorAll()： Gibt eine Liste von Elementen im Dokument zurück, die mit der angegebenen Selektorgruppe übereinstimmen (mithilfe einer tiefenorientierten, vorgeordneten Durchsuchung der Knoten des Dokuments).

3. getElementById()

In HTML ist id die eindeutige Kennung eines HTML-Elements. Das bedeutet, dass Sie für zwei verschiedene Elemente nicht dieselbe ID festlegen können. Sie müssen sicherstellen, dass die ID im gesamten Dokument eindeutig ist.

In JavaScript können Sie das HTML-Tag mithilfe seines ID-Namens abrufen.

<!DOCTYPE html>
<html lang="de">
    <Kopf>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
        <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
        <title>DOM-Baumstruktur</title>
    </Kopf>
    <Text>
        <h1>DOM-Objektmodell</h1>
        <h2>DOM-Baumstruktur</h2>
        <p id="intro">DOM steht für Document Object Model und ist eine Programmierschnittstelle. </p>

        <Skripttyp="text/javascript">
            const elemIntro = document.getElementById("intro");
            console.log(elementIntro);
        </Skript>
    </body>
</html>

Öffnen Sie die Entwicklertools:

Wenn Sie den Textinhalt eines Objekts abrufen müssen, können Sie textContent oder innerText verwenden:

<!DOCTYPE html>
<html lang="de">
    <Kopf>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
        <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
        <title>DOM-Baumstruktur</title>
    </Kopf>
    <Text>
        <h1>DOM-Objektmodell</h1>
        <h2>DOM-Baumstruktur</h2>
        <p id="intro">DOM steht für Document Object Model und ist eine Programmierschnittstelle. </p>

        <Skripttyp="text/javascript">
            const elemIntro = document.getElementById("intro");
            console.log(elementIntro);
            // Den Textinhalt innerhalb des Elements abrufen const elemText = elemIntro.textContent; // elemIntro.innerText 
            console.log(elementText);
        </Skript>
    </body>
</html>

Öffnen Sie den Controller, um Folgendes anzuzeigen:

4. querySelector()

Verwenden Sie diese Methode, um Elemente mit einem oder mehreren CSS-Selektoren zu finden. Im Folgenden werden die Informationen zum Kinoprogramm am Nationalfeiertag als Beispiel verwendet, um die entsprechenden Titel- und Listenelemente über querySelector() abzurufen.

<!DOCTYPE html>
<html lang="de">
    <Kopf>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
        <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
        <title>DOM-Baumstruktur</title>
    </Kopf>
    <Text>
        <h1>Filmprogramm zum Nationalfeiertag 2021</h1>
        <ul Klasse="Filme">
            <li>Changjin-See</li>
            <li>Meine Väter und ich</li>
            <li>Eisenbahnhelden</li>
        </ul>

        <Skripttyp="text/javascript">
            const elemTitle = document.querySelector("h1");
            const elemList = document.querySelector(".movies");
            console.log("h1");
            console.log(Elementtitel);
            console.log("ul-Filme");
            console.log(Elementliste);
        </Skript>
    </body>
</html>

Öffnen Sie das Dokument im Browser und aktivieren Sie die Entwicklertools. Sie können den folgenden Effekt sehen:

5. querySelectorAll()

Diese Methode findet alle Elemente, die dem CSS-Selektor entsprechen, und gibt eine Liste von Knoten zurück. Lassen Sie uns jedes li-Element des Filmprogramms finden:

<!DOCTYPE html>
<html lang="de">
    <Kopf>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
        <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
        <title>DOM-Baumstruktur</title>
    </Kopf>
    <Text>
        <h1>Filmprogramm zum Nationalfeiertag 2021</h1>
        <ul Klasse="Filme">
            <li>Changjin-See</li>
            <li>Meine Väter und ich</li>
            <li>Eisenbahnhelden</li>
        </ul>

        <Skripttyp="text/javascript">
            const elemTitle = document.querySelector("h1");
            const movieItems = document.querySelectorAll(".movies > li");
            console.log(Filmelemente);
        </Skript>
    </body>
</html>

Der Effekt des Konsolendrucks ist wie folgt:

Die obige Knotenliste kann wie folgt durchlaufen werden:

<!DOCTYPE html>
<html lang="de">
    <Kopf>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
        <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
        <title>DOM-Baumstruktur</title>
    </Kopf>
    <Text>
        <h1>Filmprogramm zum Nationalfeiertag 2021</h1>
        <ul Klasse="Filme">
            <li>Changjin-See</li>
            <li>Meine Väter und ich</li>
            <li>Eisenbahnhelden</li>
        </ul>

        <Skripttyp="text/javascript">
            const elemTitle = document.querySelector("h1");
            const movieItems = document.querySelectorAll(".movies > li");
            movieItems.fürEach((item) => {
                konsole.log(Element);
            });
        </Skript>
    </body>
</html>

Der Effekt des Konsolendrucks ist wie folgt:

6. Neue Elemente hinzufügen

Wie fügen Sie einem Dokument neue Elemente hinzu? Sie können document.createElement() verwenden, um dem DOM-Baum ein neues Element hinzuzufügen, und textContent verwenden, um dem neuen Element Inhalt hinzuzufügen. Das folgende Beispiel fügt der Liste der Kinopläne einen neuen Kinoplan hinzu:

<!DOCTYPE html>
<html lang="de">
    <Kopf>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
        <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
        <title>DOM-Baumstruktur</title>
    </Kopf>
    <Text>
        <h1>Filmprogramm zum Nationalfeiertag 2021</h1>
        <ul Klasse="Filme" id="Filme">
            <li>Changjin-See</li>
            <li>Meine Väter und ich</li>
            <li>Eisenbahnhelden</li>
        </ul>

        <Skripttyp="text/javascript">
            const movieItems = document.getElementById("movies");
            const newMovie = document.createElement("li");
            newMovie.textContent = „Der Adler fängt das Huhn“;
            movieItems.appendChild(neuer Film);
        </Skript>
    </body>
</html>

Nach dem Ausführen ist der Seiteneffekt wie folgt:

7. CSS-Stile ändern

Wie ändere ich Inline-CSS-Stile? Mithilfe des Style-Attributs können Sie den CSS-Stil im HTML-Dokument ändern. Am Beispiel des Kinoprogramms zum Nationalfeiertag ändern Sie die Schriftgröße und Schriftfarbe des h1-Elements des Seitentitels:

<!DOCTYPE html>
<html lang="de">
    <Kopf>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
        <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
        <title>DOM-Baumstruktur</title>
    </Kopf>
    <Text>
        <h1>Filmprogramm zum Nationalfeiertag 2021</h1>
        <ul Klasse="Filme">
            <li>Changjin-See</li>
            <li>Meine Väter und ich</li>
            <li>Eisenbahnhelden</li>
        </ul>

        <Skripttyp="text/javascript">
            const pageTitle = document.querySelector("h1");
            Seitentitel.Stil.Schriftgröße = "24px";
            Seitentitel.Stil.Farbe = "#0000FF";
        </Skript>
    </body>
</html>

Nach dem Ausführen ist der Seiteneffekt wie folgt:

In Bezug auf die Attribute von CSS-Stilen wird in JavaScript camelCase verwendet. Beispielsweise ist das entsprechende Attribut von font-size in JavaScript fontSize und von background-color backgroundColor .

8. So überwachen Sie Ereignisse

Wie verwende ich Ereignisse von Elementen auf der Seite? Im folgenden Beispiel wird mithilfe der Methode addEventListener() durch Klicken auf eine Schaltfläche ein neues Kinoprogramm zur Liste hinzugefügt:

<!DOCTYPE html>
<html lang="de">
    <Kopf>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0" />
        <meta http-equiv="X-UA-kompatibel" content="ie=edge" />
        <title>DOM-Baumstruktur</title>
    </Kopf>
    <Text>
        <h1>Filmprogramm zum Nationalfeiertag 2021</h1>
        <ul id="Filme">
            <li>Changjin-See</li>
            <li>Meine Väter und ich</li>
            <li>Eisenbahnhelden</li>
        </ul>
        <button id="addNew">Füge den Film "Adler fängt Huhn" hinzu</button>
        <Skripttyp="text/javascript">
            const moviesList = document.getElementById("movies");
            const button = document.getElementById("addNew");
            const addNewMovie = (Filmtitel, Elementziel) => {
                const newMovie = document.createElement("li");
                neuerFilm.textinhalt = Filmtitel;
                neuerFilm.Stil.Farbe = "#ff0000";
                elemTarget.appendChild(neuer Film);
            };
            button.addEventListener("klicken", () => {
                addNewMovie("Der Adler fängt das Huhn", moviesList);
            });
        </Skript>
    </body>
</html>

Nach dem Ausführen ist der Seiteneffekt wie folgt:

In tatsächlichen Projekten sind die Ereignisüberwachung und -verarbeitung komplizierter. Für die moderne WEB-Entwicklung haben umfangreiche Front-End-Frameworks die Ereignisverarbeitung bereits sehr gut gekapselt und lassen Entwickler sogar das relevante Wissen zur Ereignisüberwachung vergessen, wie z. B. Ereignisblasenbildung, Ereigniserfassung, Ereignisdelegierung usw., auf das in diesem Artikel nicht näher eingegangen wird.

abschließend:

DOM Document Object Model, eine Programmierschnittstelle für HTML- und XML-Dokumente. Wenn ein Browser ein HTML Dokument zum ersten Mal liest (analysiert), erstellt er ein großes Objekt, ein sehr großes Objekt basierend auf dem HTML-Dokument. Dies ist das DOM. Es handelt sich um eine aus HTML modellierte Baumstruktur. DOM wird zur Interaktion und Änderung DOM -Struktur oder bestimmter Elemente oder Knoten verwendet.

Dies ist das Ende dieses Artikels über das Document Object Model (DOM) in JavaScript . Weitere relevante Inhalte JavaScript Document Object Model (DOM) finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

Das könnte Sie auch interessieren:

JavaScript-Dokumentobjektmodell DOM
JavaScript-Dom-Objektoperationen
Alle Eigenschaften des variablen Dom-Objekts von JavaScript
Beispiel für den Zugriff auf einen angegebenen Knoten in einem DOM-Objekt mit JS
Eine kurze Erläuterung zum Lesen benutzerdefinierter Attribute von DOM-Objekten (Tags) mit JS
Detaillierte Erläuterung der allgemeinen Attributmethoden von Dokumentobjekten in DOM in den JS-Grundlagen
Detaillierte Erläuterung der Attributmethoden von Elementobjekten in DOM in den JS-Grundlagen
JavaScript implementiert den DOM-Objektselektor
Vertieftes Verständnis von JavaScript-DOM-Objekten
JavaScript - DOM-Operation - Detaillierte Erklärung des Window.document-Objekts
jQuery-Objekte und JavaScript-Objekte, also DOM-Objekte, werden ineinander umgewandelt
js Objektbeziehungsdiagramm erleichtert DOM-Operationen
Beispielcode zum Lernen von JavaScript-DOM-Objekten
Detaillierte Erklärung der JavaScript-Operationen an DOM-Objekten

<<: MySQL Flush-List und Flushing-Mechanismus für Dirty Pages

>>: Lösen Sie das Problem, dass Docker-Container sofort nach dem Start beendet werden

Detailliertes Tutorial zur Installation von Protobuf 3 unter Ubuntu

Document Object Model (DOM) in JavaScript

Inhaltsverzeichnis

1. Was ist DOM

2. Elemente auswählen

3. getElementById()

4. querySelector()

5. querySelectorAll()

6. Neue Elemente hinzufügen

7. CSS-Stile ändern

8. So überwachen Sie Ereignisse

Detailliertes Tutorial zur Installation von Protobuf 3 unter Ubuntu

CSS zum Erzielen eines dynamischen Schaltflächeneffekts mit Partikeln

jQuery-Plugin zum Erzielen eines Karusselleffekts

Verwenden Sie JS zum Vergrößern und Verkleinern, wenn Sie die Maus auf das Bild bewegen

Tutorial zur Installation von MySQL unter Linux

WeChat-Applet zum Speichern von Alben und Bildern in Alben

Diskussion über sinnvollere Erstellungsregeln für MySQL-String-Indizes

Beispiele für die Verwendung von React Ref

Detaillierte Erklärung zur Verwendung benutzerdefinierter Parameter in MySQL

Detaillierte Erläuterung der Verarbeitung der drei Docker Nginx-Protokolle

Artikel empfehlen

Detaillierte Erklärung zum Erkennen und Verhindern von JavaScript-Endlosschleifen

MySql-Import - CSV-Datei oder tabulatorgetrennte Datei

Verwenden Sie Docker, um ein Git-Image mithilfe des Klon-Repositorys zu erstellen

Ein IE-Absturzfehler

Implementierung der Nginx-Konfiguration des lokalen Image-Servers

Detaillierte Erklärung des Integer-Datentyps tinyint in MySQL

Verwenden Sie die Clip-Path-Eigenschaft von CSS, um unregelmäßige Grafiken anzuzeigen

SpringBoot integriert Activiti7-Implementierungscode

Vor- und Nachteile von MySQL-Indizes und Richtlinien zum Erstellen von Indizes

Vue implementiert QR-Code-Scanfunktion (mit Stil)

Element Tabelle Tabellenkomponente Mehrfeld (Mehrspalten) Sortiermethode

Zusammenfassung verschiedener Formen der Anwendung von CSS-Stilen in Webseiten

So leeren Sie den Cache nach der Verwendung von Keep-Alive in Vue

Erstellen Sie einen virtuellen Nginx-Host basierend auf Domänenname, Port und IP

Einige allgemeine erweiterte SQL-Anweisungen in MySQL