TOC

Grundlegendes zur DOM-Struktur und den Knoten

Einführung

Das DOM wird oft als * DOM-Baum * bezeichnet und besteht aus einem Baum von Objekten, die als * Knoten * bezeichnet werden. In der Introduction to the DOM ging es darum, was das Document Object Model (DOM) ist und wie auf das `+ document + zugegriffen werden kann `Objekt und ändern Sie seine Eigenschaften mit der console und dem Unterschied zwischen HTML-Quellcode und dem DOM.

In diesem Lernprogramm werden die HTML-Terminologie, die für die Arbeit mit JavaScript und dem DOM von wesentlicher Bedeutung ist, sowie die DOM-Struktur, die Knoten und die Identifizierung der am häufigsten verwendeten Knotentypen beschrieben. Schließlich werden wir über die Konsole hinausgehen und ein JavaScript-Programm erstellen, um das DOM interaktiv zu ändern.

HTML-Terminologie

Das Verständnis der HTML- und JavaScript-Terminologie ist wichtig, um zu verstehen, wie mit dem DOM gearbeitet wird. Sehen wir uns kurz einige HTML-Begriffe an.

Schauen wir uns zunächst dieses HTML-Element an.

<a href="index.html">Home</a>

Hier haben wir ein Ankerelement, das einen Link zu + index.html enthält.

  • + a + ist das * tag *

  • + href + ist das * Attribut *

  • + index.html + ist der * Attributwert *

  • + Home + ist der * Text *.

Alles zwischen dem öffnenden und schließenden Tag zusammen ergibt das gesamte HTML-Element.

Wir werden mit dem "+ index.html +" aus dem vorheriges Tutorial arbeiten:

index.html

<!DOCTYPE html>
<html lang="en">

 <head>
   <title>Learning the DOM</title>
 </head>

 <body>
   <h1>Document Object Model</h1>
 </body>

</html>

Der einfachste Weg, mit JavaScript auf ein Element zuzugreifen, ist das Attribut "+ id ". Fügen wir den obigen Link in Ihre Datei " index.html" mit der "+ id" von "+ nav +" ein.

index.html

...
<body>
 <h1>Document Object Model</h1>

</body>
...

Laden Sie die Seite in Ihrem Browserfenster oder laden Sie sie erneut und überprüfen Sie das DOM, um sicherzustellen, dass der Code aktualisiert wurde.

Wir werden die Methode "+ getElementById () +" verwenden, um auf das gesamte Element zuzugreifen. Geben Sie in der Konsole Folgendes ein:

document.getElementById('nav');
Output<a id="nav" href="index.html">Home</a>

Wir haben das gesamte Element mit + getElementById () + abgerufen. Anstatt dieses Objekt und diese Methode jedes Mal einzugeben, wenn wir auf den Link "+ nav +" zugreifen möchten, können wir das Element in eine Variable einfügen, um die Arbeit damit zu vereinfachen.

let navLink = document.getElementById('nav');

Die + navLink + Variable enthält unser Ankerelement. Von hier aus können wir Attribute und Werte leicht ändern. Zum Beispiel können wir ändern, wohin der Link geht, indem wir das Attribut + href + ändern:

navLink.href = 'https://www.wikipedia.org';

Wir können den Textinhalt auch ändern, indem wir die Eigenschaft + textContent + neu zuweisen:

navLink.textContent = 'Navigate to Wikipedia';

Wenn wir jetzt unser Element entweder in der Konsole oder durch Überprüfen des Elements-Tags anzeigen, können wir sehen, wie das Element aktualisiert wurde.

navLink;
Output<a id="nav" href="https://www.wikipedia.org/">Navigate to Wikipedia</a>

Dies spiegelt sich auch im Frontend der Website wider.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/updated-DOM-link.png [Aktualisierter Link über DOM]

Durch das Aktualisieren der Seite werden die ursprünglichen Werte wiederhergestellt.

An dieser Stelle sollten Sie wissen, wie Sie mit der Methode "+ document +" auf ein Element zugreifen, ein Element einer Variablen zuweisen und Eigenschaften und Werte im Element ändern.

Der DOM-Baum und die Knoten

Alle Elemente im DOM sind als * Knoten * definiert. Es gibt viele Arten von Knoten, aber es gibt drei Hauptknoten, mit denen wir am häufigsten arbeiten:

  • * Element * -Knoten

  • * Text * Knoten

  • * Kommentar * Knoten

Wenn ein HTML-Element ein Element im DOM ist, wird es als * Elementknoten * bezeichnet. Jeder einzelne Text außerhalb eines Elements ist ein * Textknoten *, und ein HTML-Kommentar ist ein * Kommentarknoten *. Zusätzlich zu diesen drei Knotentypen ist das "+ Dokument" selbst ein "Dokument" -Knoten, der die Wurzel aller anderen Knoten ist.

Das DOM besteht aus einer * Baum * -Struktur verschachtelter Knoten, die oft als * DOM-Baum * bezeichnet wird. Möglicherweise kennen Sie einen Stammbaum der Vorfahren, der aus Eltern, Kindern und Geschwistern besteht. Die Knoten im DOM werden abhängig von ihrer Beziehung zu anderen Knoten auch als Eltern, Kinder und Geschwister bezeichnet.

Erstellen Sie zur Veranschaulichung eine + node.html + - Datei. Wir werden Text-, Kommentar- und Elementknoten hinzufügen.

node.html

<!DOCTYPE html>
<html>

 <head>
   <title>Learning About Nodes</title>
 </head>

 <body>
   <h1>An element node</h1>
   <!-- a comment node -->
   A text node.
 </body>

</html>

Der Elementknoten "+ html" ist der übergeordnete Knoten. + head und` + body` sind Geschwister, Kinder von + html. + body + enthält drei untergeordnete Knoten, die alle Geschwister sind - der Knotentyp ändert nicht die Ebene, auf der er verschachtelt ist.

Knotentyp identifizieren

Jeder Knoten in einem Dokument hat einen * Knotentyp *, auf den über die Eigenschaft + nodeType + zugegriffen wird. Das Mozilla Developer Network verfügt über eine aktuelle Liste von alle Knotentypkonstanten. Nachfolgend finden Sie eine Tabelle der häufigsten Knotentypen, mit denen wir in diesem Lernprogramm arbeiten.

Node Type Value Example

ELEMENT_NODE

1

The <body> element

TEXT_NODE

3

Text that is not part of an element

COMMENT_NODE

8

<!-- an HTML comment -->

Auf der Registerkarte "Elemente" der Entwicklertools stellen Sie möglicherweise fest, dass bei jedem Klicken und Hervorheben einer Zeile im DOM der Wert "+ == $ 0 " daneben angezeigt wird. Dies ist eine sehr praktische Methode, um auf das derzeit aktive Element in den Entwicklertools zuzugreifen, indem Sie " $ 0 +" eingeben.

Klicken Sie in der Konsole von * node.html * auf das erste Element im + body +, bei dem es sich um ein + h1 + Element handelt.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/highlighted-line.png [DOM-Knotentyp]

Rufen Sie in der Konsole den * Knotentyp * des aktuell ausgewählten Knotens mit der Eigenschaft + nodeType + ab.

$0.nodeType;
Output1

Wenn das + h1 + Element ausgewählt ist, sehen Sie + 1 + als Ausgabe, was mit + ELEMENT_NODE + korreliert. Tun Sie dasselbe für den Text und den Kommentar, und sie geben jeweils + 3 + und + 8 + aus.

Wenn Sie wissen, wie auf ein Element zugegriffen wird, können Sie den Knotentyp sehen, ohne das Element im DOM hervorzuheben.

document.body.nodeType;
Output1

Zusätzlich zu "+ nodeType " können Sie auch die Eigenschaft " nodeValue " verwenden, um den Wert eines Text- oder Kommentarknotens abzurufen, und " nodeName +", um den Tag-Namen eines Elements abzurufen.

Ändern des DOM mit Ereignissen

Bisher haben wir nur gesehen, wie das DOM in der Konsole geändert werden kann. Dies ist nur vorübergehend. Bei jeder Aktualisierung der Seite gehen die Änderungen verloren. Im Tutorial Introduction to the DOM haben wir die Hintergrundfarbe des Körpers über die Konsole aktualisiert. Wir können das, was wir in diesem Tutorial gelernt haben, kombinieren, um eine interaktive Schaltfläche zu erstellen, die dies beim Klicken tut.

Gehen wir zurück zu Ihrer "+ index.html" -Datei und fügen ein "+ button" -Element mit einer "+ id " hinzu. Wir fügen auch einen Link zu einer neuen Datei in einem neuen ` js ` Verzeichnis ` js / scripts.js +` hinzu.

index.html

<!DOCTYPE html>
<html lang="en">

 <head>
   <title>Learning the DOM</title>
 </head>

 <body>
   <h1>Document Object Model</h1>
   <button id="changeBackground">Change Background Color</button>

   <script src="scripts.js"></script>
 </body>

</html>

Ein * Ereignis * in JavaScript ist eine Aktion, die der Benutzer ausgeführt hat. Wenn der Benutzer mit der Maus über ein Element fährt oder auf ein Element klickt oder eine bestimmte Taste auf der Tastatur drückt, sind dies alle Arten von Ereignissen. In diesem speziellen Fall soll unsere Schaltfläche zuhören und bereit sein, eine Aktion auszuführen, wenn der Benutzer darauf klickt. Wir können dies tun, indem wir unserer Schaltfläche einen * Ereignis-Listener * hinzufügen.

Erstellen Sie die Datei "+ scripts.js " und speichern Sie sie im neuen Verzeichnis " js ". In der Datei finden wir zuerst das Element " button +" und weisen es einer Variablen zu.

js / scripts.js

let button = document.getElementById('changeBackground');

Mit der Methode + addEventListener () + weisen wir die Schaltfläche an, auf einen Klick zu warten und nach dem Klicken eine Funktion auszuführen.

js / scripts.js

...
button.addEventListener('click', () => {
 // action will go here
});

Schließlich schreiben wir innerhalb der Funktion denselben Code aus dem previous tutorial, um die Hintergrundfarbe in "+ fuchsia +" zu ändern .

js / scripts.js

...
document.body.style.backgroundColor = 'fuchsia';

Hier ist unser gesamtes Skript:

js / scripts.js

let button = document.getElementById('changeBackground');

button.addEventListener('click', () => {
 document.body.style.backgroundColor = 'fuchsia';
});

Wenn Sie diese Datei gespeichert haben, aktualisieren Sie "+ index.html" im Browser. Klicken Sie auf die Schaltfläche, und das Ereignis wird ausgelöst.

image: https: //assets.digitalocean.com/articles/eng_javascript/dom/event-button.png [Hintergrund mit Ereignissen ändern]

Die Hintergrundfarbe der Seite wurde aufgrund des JavaScript-Ereignisses in Fuchsia geändert.

Fazit

In diesem Lernprogramm haben wir die Terminologie überprüft, die es uns ermöglicht, das DOM zu verstehen und zu ändern. Wir haben gelernt, wie das DOM als Knotenstruktur aufgebaut ist, die normalerweise aus HTML-Elementen, Text oder Kommentaren besteht, und haben ein Skript erstellt, mit dem ein Benutzer eine Website ändern kann, ohne Code manuell in die Entwicklerkonsole eingeben zu müssen.

Related