Einführung. DOM-Manipulation im reinen JavaScript-Dom-Objektmodell

In dieser Lektion schauen wir uns an, was das DOM ist, warum es benötigt wird und wie es aufgebaut ist.

Was ist DOM?

Wenn ein Browser eine Seite anfordert und als Antwort vom Server den HTML-Quellcode erhält, muss er diesen zunächst analysieren. Beim Analysieren und Parsen von HTML-Code erstellt der Browser darauf basierend einen DOM-Baum.

Nach Abschluss dieser und einer Reihe anderer Aktionen beginnt der Browser mit der Darstellung der Seite. Dabei verwendet er natürlich bereits den von ihm erstellten DOM-Baum und nicht den ursprünglichen HTML-Code.

DOM ist ein Dokumentobjektmodell, das der Browser auf der Grundlage des vom Server empfangenen HTML-Codes im Speicher des Computers erstellt.

Einfach ausgedrückt ist HTML-Code der Text einer Seite und DOM eine Reihe verwandter Objekte, die vom Browser beim Parsen seines Textes erstellt werden.

In Chrome kann der Quellcode der Seite, die der Browser empfängt, auf der Registerkarte „Quelle“ im Bereich „Web Developer Tools“ angezeigt werden.

Chrome verfügt nicht über ein Tool, mit dem Sie den erstellten DOM-Baum anzeigen können. Es gibt jedoch eine Darstellung dieses DOM-Baums in Form von HTML-Code, diese ist auf der Registerkarte „Elemente“ verfügbar. Diese DOM-Darstellung ist für einen Webentwickler natürlich viel praktischer. Daher gibt es kein Tool, das das DOM als Baumstruktur darstellen würde.

Objekte in diesem Modell werden aus fast allem gebildet, was in HTML enthalten ist (Tags, Textinhalte, Kommentare usw.), einschließlich des Dokuments selbst. Die Beziehungen zwischen diesen Objekten im Modell werden basierend darauf gebildet, wie die HTML-Elemente im Code relativ zueinander positioniert sind.

In diesem Fall kann das DOM des Dokuments nach seiner Erstellung geändert werden. Wenn sich das DOM ändert, zeichnet der Browser das Seitenbild fast augenblicklich neu. Dadurch entspricht die Darstellung unserer Seite immer dem DOM.

Um das DOM programmgesteuert zu lesen und zu ändern, stellt uns der Browser eine DOM-API oder anders gesagt eine Programmierschnittstelle zur Verfügung. Einfach ausgedrückt ist die DOM-API eine Sammlung einer großen Anzahl verschiedener Objekte, ihrer Eigenschaften und Methoden, die wir zum Lesen und Ändern des DOM verwenden können.

Um mit dem DOM zu arbeiten, wird in den meisten Fällen JavaScript verwendet, weil... Heute ist es die einzige Programmiersprache, in der Skripte in einem Browser ausgeführt werden können.

Warum brauchen wir die DOM-API? Wir brauchen es, damit wir es können mit JavaScript Wechseln Sie die Seite im Handumdrehen, d. h. Machen Sie es dynamisch und interaktiv.

Die DOM-API stellt uns (Entwicklern) eine Vielzahl von Methoden zur Verfügung, mit denen wir alles auf der Seite ändern und mit dem Benutzer interagieren können. Diese. Mit dieser Softwareschnittstelle können wir komplexe Schnittstellen und Formulare erstellen, Benutzeraktionen verarbeiten, verschiedene Elemente auf der Seite hinzufügen und entfernen, deren Inhalte, Eigenschaften (Attribute) ändern und vieles mehr.

Heutzutage gibt es im Web praktisch keine Seiten mehr, deren Szenarien mit dem DOM nicht funktionieren würden.

Woraus besteht der HTML-Code einer Seite?

Bevor Sie mit dem Studium des Dokumentobjektmodells fortfahren, müssen Sie sich zunächst daran erinnern, was der Quellcode einer Webseite (HTML-Dokument) ist.

Der Quellcode einer Webseite besteht aus Tags, Attributen, Kommentaren und Text. Tags sind das grundlegende syntaktische Konstrukt von HTML. Die meisten von ihnen sind gepaart. In diesem Fall öffnet einer davon und der andere schließt. Ein solches Tag-Paar bildet ein HTML-Element. HTML-Elemente können haben Zusätzliche Optionen– Attribute.

Um in einem Dokument bestimmte Markups zu erstellen, werden einige Elemente in anderen platziert. Dadurch kann ein HTML-Dokument als eine Reihe ineinander verschachtelter HTML-Elemente dargestellt werden.

Betrachten Sie als Beispiel den folgenden HTML-Code:

Seitentitel Artikeltitel Artikelabschnitt

Inhalt des Artikels

In diesem Code ist das Stammelement HTML. Es enthält Kopf- und Körperelemente. Das Kopfelement enthält einen Titel und der Körper enthält ein h1 und ein div. Das div-Element wiederum enthält h2 und p .

Schauen wir uns nun an, wie der Browser einen DOM-Baum basierend auf HTML-Code erstellt.

Wie ist der DOM-Baum eines Dokuments aufgebaut?

Wie bereits oben beschrieben, baut der Browser einen Baum auf Basis von HTML-Elementen und anderen Entitäten auf Quellcode Seiten. Bei der Durchführung dieses Prozesses wird die Verschachtelung der Elemente ineinander berücksichtigt.

Dadurch nutzt der Browser den resultierenden DOM-Baum nicht nur für seine Arbeit, sondern stellt uns auch eine API dafür zur Verfügung angenehmes Arbeiten damit über JavaScript.

Beim Aufbau des DOM erstellt der Browser Objekte (DOM-Baumknoten) aus HTML-Elementen, Text, Kommentaren und anderen Entitäten dieser Sprache.

In den meisten Fällen sind Webentwickler nur an Objekten (Knoten) interessiert, die aus HTML-Elementen gebildet werden.

Gleichzeitig erstellt der Browser nicht nur Objekte aus HTML-Elementen, sondern verbindet diese auch mit bestimmten Verbindungen miteinander, je nachdem, wie sie im Code zueinander in Beziehung stehen.

Elemente, die sich direkt in einem Element befinden, sind in Bezug auf dieses Element untergeordnete Elemente. Und er ist für jeden von ihnen ein Elternteil. Darüber hinaus sind alle diese Elemente im Verhältnis zueinander Geschwister (Brüder).

Darüber hinaus hat in HTML jedes Element immer ein übergeordnetes Element (das HTML-Element, in dem es sich direkt befindet). In HTML kann ein Element nicht mehrere übergeordnete Elemente haben. Die einzige Ausnahme ist das HTML-Element. Er hat keine Eltern.

Um einen DOM-Baum zu erhalten, während der Browser ihn erstellt, müssen Sie lediglich alle Elemente entsprechend ihrer Beziehung zueinander „anordnen“.

Die Erstellung des DOM-Baums erfolgt von oben nach unten.

In diesem Fall ist die Wurzel des DOM-Baums immer das Dokument selbst (der Dokumentknoten). Als nächstes wird der Baum abhängig von der Struktur des HTML-Codes erstellt.

Der HTML-Code, den wir oben betrachtet haben, hätte beispielsweise den folgenden DOM-Baum:

Ganz oben in diesem Baum befindet sich der Dokumentknoten. Dieser Knoten ist mit HTML verknüpft, er ist dessen untergeordneter Knoten. Der HTML-Knoten wird erstellt HTML-Element(...). Die Knoten head(...) und body(...) haben eine übergeordnete Beziehung zu HTML. Im Verhältnis zueinander sind sie Geschwister, weil einen Elternteil haben. Der Kopfknoten ist mit dem Titel verknüpft (lt;title>...), er ist sein untergeordneter Knoten. Die Knoten h1 und div sind mit body verknüpft, dem übergeordneten Knoten. Der div-Knoten ist mit h2(...) und p() verbunden, sie sind seine untergeordneten Knoten.

Der Baum beginnt, wie oben erwähnt, mit dem Dokumentobjekt (Knoten). Es verfügt wiederum über einen untergeordneten Knoten, der durch das HTML-Element (...) gebildet wird. Die Elemente head(...) und body(...) liegen in HTML vor und sind daher dessen untergeordnete Elemente. Als nächstes ist der Kopfknoten der übergeordnete Knoten von title (lt;title>...). Die Elemente h1 und div sind im Körper verschachtelt, d. h. sie sind dessen untergeordnete Elemente. Das div enthält direkt die Elemente h2 (...) und p(). Das bedeutet, dass der Div-Knoten für jeden von ihnen der übergeordnete Knoten ist.

So einfach lässt sich ein DOM-Baum in einem Browser auf Basis von HTML-Code erstellen.

Warum müssen Sie wissen, wie der DOM-Baum aufgebaut ist? Erstens ist es ein Verständnis für das Umfeld, in dem Sie etwas ändern möchten. Zweitens beschränken sich die meisten Aktionen bei der Arbeit mit dem DOM auf die Suche (Auswahl) der erforderlichen Elemente. Ohne zu wissen, wie der DOM-Baum aufgebaut ist und welche Verbindungen zwischen den Knoten bestehen, wird es ziemlich schwierig sein, ein bestimmtes Element darin zu finden.

Übung

Erstellen Sie basierend auf dem in der Abbildung gezeigten DOM-Baum HTML-Code.

Diese Veröffentlichung geht einer Reihe von Artikeln darüber voraus alternative Wege Arbeiten mit XML. „Alternativ“, weil sich die Arbeit mit XML in 1C in der Regel auf das Parsen von XML durch sequentielles Lesen beschränkt – zeilenweises Parsen des Textinhalts. Aber es gibt auch andere Möglichkeiten.

Beispielsweise mithilfe der XML-Abfragesprache xPath oder XSL-Transformationsvorlagen. Diese Optionen werden in zukünftigen Artikeln besprochen. Sie alle basieren jedoch auf einer grundlegenden DOM-Darstellung von XML-Dokumenten. Was DOM (Document Object Model) ist, wird in der Veröffentlichung erläutert.

DOM basiert auf der Darstellung eines Dokuments beliebiger Struktur in Form eines Knotenbaums, wobei jeder Knoten (Knoten) ein Element, ein Attribut eines Elements, einen Textwert eines Elements usw. darstellt. Die Verbindung zwischen Knoten sind nach dem Prinzip „Eltern – Untergebene“ aufgebaut. Der Dokumentstamm (DOM-Baum) hat kein übergeordnetes Element. Ein Dead-End-Element hat kein untergeordnetes Element (solche Elemente werden abstrakt als Blätter des Baums bezeichnet). Somit kann das DOM nicht nur für XML, sondern für praktisch jedes strukturierte Dokument (HTML, XHTML) erstellt werden. So erstellt beispielsweise der Browser des Benutzers, der den HTML-Code einer Webseite aus dem Internet empfängt, den DOM-Baum dieser Seite im RAM des Computers des Benutzers.

Das DOM-Modell wird geöffnet reichlich Möglichkeiten zur Manipulation von Dokumentdaten. Sie können neue Knoten erstellen, sie auf verschiedenen Baumebenen einfügen, Knoten kopieren, Knoten löschen, mit verschiedenen Parametern nach Knoten suchen und vieles mehr.

DOM-Modell XML-Dokument ist in der folgenden Abbildung deutlich dargestellt.

Jede moderne Programmiersprache enthält Werkzeuge (Parser) zum Arbeiten mit einem solchen Baum. Der XML-Parser empfängt den String-Inhalt als Eingabe, erstellt einen Knotenbaum im RAM und führt Manipulationen mit den Baumdaten durch. Der Vorteil dieses Ansatzes gegenüber der zeilenweisen Analyse liegt auf der Hand: Mit einer Abfrage an den Baum können Sie die erforderlichen Daten auswählen, ohne Zeile für Zeile das gesamte Dokument durchzugehen, da der RAM eine vollständige Darstellung der Elemente mit allen enthält Beziehungen.

In der 1C-Plattform wird das DOM-Modell durch ein spezielles Objekt DocumentDOM dargestellt, das wiederum mithilfe des BuilderDOM-Objekts und seiner Read-Methode erstellt wird. Die Eingabe für diese Methode ist normalerweise entweder ein XML-Reader- oder ein HTML-Reader-Objekt, das XML- oder HTML-Textinhalte direkt aus Dateien liest oder aus einer Zeichenfolge lädt. Nun, dann gibt es eine Reihe von Konstruktionen, mit denen Sie Daten aus dem Objektmodell des gelesenen Dokuments extrahieren können.

Von allen Optionen ist aus meiner Sicht die Option Nr. 1 mit der Methode CalculateXPathExpression die interessanteste. Der nächste Artikel wird ihm gewidmet sein.

Vorteile der zeilenweisen Analyse: Der Ressourcenbedarf ist geringer. Nachteile: Es dauert lange, Daten abzurufen, Sie müssen die gesamte Datei Zeile für Zeile lesen, Komplexität Programmcode beim Parsen von XML-Dokumenten mit komplexer Struktur.

Der Vorteil des Samplings über das DOM: Geschwindigkeit des Datensamplings, Einfachheit des Programmcodes. Nachteile: Beanspruchung von Ressourcen, Aufwand für Konstruktion und Abfragen an das DOM Rom und Rechenleistung.

Das DOM wird oft als DOM-Baum bezeichnet, da es aus einem Baum von Objekten besteht, die als Knoten bezeichnet werden. In haben Sie erfahren, was das Document Object Model (DOM) ist, wie Sie über die Konsole auf das Dokumentobjekt zugreifen und seine Eigenschaften ändern und welchen Unterschied zwischen HTML-Quellcode und DOM besteht.

In diesem Tutorial lernen Sie die HTML-Terminologie kennen, die Sie für die Arbeit mit JavaScript und dem DOM benötigen, lernen, was ein DOM-Baum und Knoten sind, und lernen, die häufigsten Knotentypen zu identifizieren. Sie können in der Konsole auch ein JavaScript-Programm erstellen, um das DOM interaktiv zu ändern.

HTML-Terminologie

Das Verständnis von HTML- und JavaScript-Begriffen ist für die Arbeit mit dem DOM von entscheidender Bedeutung. Werfen wir einen kurzen Blick auf die Grundbegriffe.

Schauen Sie sich dieses HTML-Element an:

Heim

Es enthält einen Anker, der einen Link zu index.html darstellt.

eine Markierung
href – Attribut
html – Attributwert
Startseite – Text.

Alles zwischen den öffnenden und schließenden Tags stellt ein HTML-Element dar.

Kehren wir zur Datei index.html aus dem vorherigen Handbuch zurück:

Das DOM lernen

Dokumentobjektmodell

Der einfachste Weg, mit JavaScript auf ein Element zuzugreifen, ist das id-Attribut. Fügen wir den obigen Link mit der ID="nav" zur Datei index.html hinzu.

...

Dokumentobjektmodell
Heim

...

Laden (oder aktualisieren) Sie die Seite in Ihrem Browserfenster und sehen Sie im DOM nach, ob der Code aktualisiert wurde.

Verwenden Sie dann die Methode getElementById(), um auf das gesamte Element zuzugreifen. Geben Sie in der Konsole Folgendes ein:

document.getElementById("nav");
Heim

Die Methode getElementById() ruft das gesamte Element ab. Anstatt dieses Objekt und diese Methode jedes Mal eingeben zu müssen, wenn Sie auf einen Navigationslink zugreifen müssen, können Sie das Element jetzt in eine Variable einfügen, um die Arbeit damit zu erleichtern.

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

Die Variable navLink enthält den Anker. Hier können Sie Attribute und Werte einfach ändern. Um beispielsweise die Position des Links zu ändern, ändern Sie das href-Attribut:

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

Sie können den Text auch ändern, indem Sie die Eigenschaft textContent neu zuweisen:

navLink.textContent = „Zu Wikipedia navigieren“;

Wenn Sie dieses Element nun in der Konsole anzeigen oder das Elements-Tag überprüfen, sehen Sie, wie es aktualisiert wurde.

navLink;
Navigieren Sie zu Wikipedia

Die Änderungen werden sich auch im Frontend widerspiegeln.

Durch das Aktualisieren der Seite werden alle ursprünglichen Werte zurückgegeben.

An dieser Stelle sollten Sie verstehen, wie Sie mit der Dokumentmethode auf ein Element zugreifen, wie Sie ein Element einer Variablen zuweisen und wie Sie Eigenschaften und Werte eines Elements ändern.

Baum- und DOM-Knoten

Alle Elemente im DOM werden als Knoten definiert. Es gibt viele Arten von Knoten, aber es gibt drei Haupttypen, mit denen Sie am häufigsten arbeiten werden:

Elementknoten

Textknoten

Kommentarknoten

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 HTML-Kommentar– Kommentarknoten. Neben diesen drei Knotentypen ist das Dokumentobjekt selbst ein Dokumentknoten, der der Wurzelknoten aller anderen Knoten ist.

Das DOM besteht aus einer Baumstruktur verschachtelter Knoten, die oft als DOM-Baum bezeichnet wird. Sie wissen wahrscheinlich, was es ist Familienstammbaum ist eine schematische Darstellung der Familienbande, die aus Eltern, Kindern und der unmittelbaren Familie besteht. Knoten im DOM werden aufgrund ihrer Beziehung zu anderen Knoten auch als übergeordnete und untergeordnete Knoten bezeichnet.

Erstellen Sie beispielsweise eine nodes.html-Datei. Fügen Sie einen Textknoten sowie Kommentar- und Elementknoten hinzu.

Lernen Sie etwas über Knoten

Ein Elementknoten

Ein Textknoten.

Der HTML-Elementknoten ist der übergeordnete Knoten. head und body sind untergeordnete HTML-Knoten. Der Körper enthält drei untergeordnete Knoten, die sich alle auf derselben Ebene befinden. Der Knotentyp hat keinen Einfluss auf die Verschachtelungsebene.

Hinweis: Bei der Arbeit mit HTML-generiertem DOM werden durch die Einrückung des HTML-Quellcodes viele leere Textknoten erstellt, die auf der Registerkarte „DevTools-Elemente“ nicht sichtbar sind. Mehr dazu unter dem Link.

Definieren eines Knotentyps

Jeder Knoten in einem Dokument hat einen Typ, auf den über die Eigenschaft nodeType zugegriffen wird. Das Mozilla Developer Network verfügt über eine aktualisierte Liste aller Knotentypkonstanten. Nachfolgend finden Sie eine Tabelle der häufigsten Knotentypen.

Auf der Registerkarte „Elemente“ der Entwicklertools stellen Sie möglicherweise fest, dass immer dann, wenn Sie auf eine Zeile im DOM klicken und diese markieren, daneben der Wert == $0 angezeigt wird. Das ist sehr bequeme Weise Zugriff auf das aktuell aktive Element.

Klicken Sie in der node.html-Konsole auf das erste Element im Textkörper (h1).

Ermitteln Sie mithilfe der Konsole mithilfe der Eigenschaft „nodeType“ den Typ des ausgewählten Knotens.

$0.nodeType;
1

Wenn Sie das h1-Element auswählen, sehen Sie 1 als Ausgabe, die sich auf ELEMENT_NODE bezieht. Machen Sie dasselbe mit den anderen Knoten und sie geben 3 bzw. 8 zurück.

Wenn Sie wissen, wie Sie auf ein Element zugreifen, können Sie den Typ des Knotens sehen, ohne die Elemente im DOM hervorzuheben.

document.body.nodeType;
1

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

Ändern des DOM mithilfe von Ereignissen

Bisher haben Sie gesehen, wie man das DOM in der Konsole ändert, und solche Änderungen sind bekanntermaßen nur vorübergehend; Bei jeder Aktualisierung der Seite gehen alle Änderungen verloren. In haben Sie die Hintergrundfarbe der Seite in der Konsole aktualisiert. Versuchen Sie, das, was Sie in diesem Tutorial gelernt haben, mit dem zu kombinieren, was Sie bereits wissen, um eine interaktive Schaltfläche zu erstellen, deren Hintergrundfarbe sich ändert.

Gehen Sie zurück zur Datei index.html und fügen Sie ein Schaltflächenelement mit einer ID hinzu. Sie müssen auch einen Link hinzufügen neue Datei in das neue js-Verzeichnis js/scripts.js.

Das DOM lernen

Dokumentobjektmodell
Hintergrundfarbe ändern

Ein Ereignis in JavaScript ist eine Aktion, die der Benutzer ausführt. Der Benutzer bewegt die Maus über ein Element, klickt darauf oder auf eine bestimmte Taste auf der Tastatur – das sind alles Ereignisse. In diesem speziellen Fall muss die Schaltfläche eine Aktion ausführen, wenn der Benutzer darauf klickt. Dazu müssen Sie einen Ereignis-Listener hinzufügen. Erstellen Sie eine scripts.js-Datei und speichern Sie sie in einem neuen js-Verzeichnis. In der Datei müssen Sie ein Schaltflächenelement definieren und es einer Variablen zuweisen.

Mithilfe der Methode addEventListener() wartet die Schaltfläche auf Klicks und führt ihre Funktion nach dem Klick aus.

...
button.addEventListener("click", () => (
// Aktion wird hier stattfinden
});

Innerhalb der Funktion müssen Sie den Code aus dem vorherigen Handbuch einfügen, um die Hintergrundfarbe in Fuchsia zu ändern.

...

So sieht das Skript aus:

let button = document.getElementById("changeBackground");
button.addEventListener("click", () => (
document.body.style.backgroundColor = "fuchsia";
});

Speichern und schließen Sie die Datei. Aktualisieren Sie die Seite index.html in Ihrem Browser. Drücken Sie Neuer Knopf, und die Hintergrundfarbe der Seite ändert sich.

Stichworte: ,

Normalerweise verwenden Entwickler jQuery, wenn sie etwas mit dem DOM tun müssen. Allerdings kann nahezu jede DOM-Manipulation in reinem JavaScript mithilfe der DOM-API durchgeführt werden.

Schauen wir uns diese API genauer an:

Am Ende schreiben Sie Ihre eigene einfache DOM-Bibliothek, die in jedem Projekt verwendet werden kann.

DOM-Abfragen

DOM-Abfragen werden mit der Methode .querySelector() durchgeführt, die einen beliebigen CSS-Selektor als Argument verwendet.

Const myElement = document.querySelector("#foo > div.bar")

Es wird das erste passende Element zurückgegeben. Sie können das Gegenteil tun – prüfen Sie, ob das Element mit dem Selektor übereinstimmt:

MyElement.matches("div.bar") === true

Wenn Sie alle Elemente abrufen möchten, die einem Selektor entsprechen, verwenden Sie das folgende Konstrukt:

Const myElements = document.querySelectorAll(".bar")

Wenn Sie wissen, auf welches übergeordnete Element Sie verweisen möchten, können Sie einfach seine untergeordneten Elemente durchsuchen, anstatt den gesamten Code zu durchsuchen:

Const myChildElemet = myElement.querySelector("input") // Statt: // document.querySelector("#foo > div.bar input")

Es stellt sich die Frage: Warum dann andere, weniger praktische Methoden wie .getElementsByTagName() verwenden? Es gibt ein kleines Problem: Das Ausgabeergebnis von .querySelector() wird nicht aktualisiert, und wenn wir hinzufügen neues Element(Siehe), es wird sich nicht ändern.

Const elements1 = document.querySelectorAll("div") const elements2 = document.getElementsByTagName("div") const newElement = document.createElement("div") document.body.appendChild(newElement) elements1.length === elements2.length // FALSCH

Außerdem sammelt querySelectorAll() alles in einer Liste, was es nicht sehr effizient macht.

Wie arbeite ich mit Listen?

Darüber hinaus weist .querySelectorAll() zwei kleine Einschränkungen auf. Sie können nicht einfach Methoden für die Ergebnisse aufrufen und erwarten, dass sie auf jedes einzelne angewendet werden (wie Sie es vielleicht von jQuery gewohnt sind). In jedem Fall müssen Sie alle Elemente in einer Schleife durchlaufen. Zweitens ist das zurückgegebene Objekt eine Liste von Elementen und kein Array. Daher funktionieren Array-Methoden nicht. Natürlich gibt es Methoden für Listen, etwa .forEach() , aber leider sind sie nicht für alle Fälle geeignet. Daher ist es besser, die Liste in ein Array umzuwandeln:

// Verwenden von Array.from() Array.from(myElements).forEach(doSomethingWithEachElement) // Oder Array-Prototyp (vor ES6) Array.prototype.forEach.call(myElements, doSomethingWithEachElement) // Einfacher: .forEach.call( myElements , doSomethingWithEachElement)

Jedes Element verfügt über einige Eigenschaften, die auf eine „Familie“ verweisen.

MyElement.children myElement.firstElementChild myElement.lastElementChild myElement. previousElementSibling myElement.nextElementSibling

Da die Element-Schnittstelle von der Node-Schnittstelle geerbt wird, sind auch die folgenden Eigenschaften vorhanden:

MyElement.childNodes myElement.firstChild myElement.lastChild myElement. previousSibling myElement.nextSibling myElement.parentNode myElement.parentElement

Die ersten Eigenschaften beziehen sich auf das Element und die letzten (mit Ausnahme von .parentElement) können Listen von Elementen beliebigen Typs sein. Dementsprechend können Sie den Elementtyp überprüfen:

MyElement.firstChild.nodeType === 3 // Dieses Element wird ein Textknoten sein

Klassen und Attribute hinzufügen

Hinzufügen neue Klasse sehr einfach:

MyElement.classList.add("foo") myElement.classList.remove("bar") myElement.classList.toggle("baz")

Das Hinzufügen einer Eigenschaft zu einem Element erfolgt auf die gleiche Weise wie für jedes andere Objekt:

// Den Attributwert abrufen const value = myElement.value // Das Attribut als Elementeigenschaft festlegen myElement.value = "foo" // Для установки нескольких свойств используйте.Object.assign() Object.assign(myElement, { value: "foo", id: "bar" }) // Удаление атрибута myElement.value = null !}

Sie können die Methoden .getAttibute() , .setAttribute() und .removeAttribute() verwenden. Sie ändern sofort die HTML-Attribute des Elements (im Gegensatz zu den DOM-Eigenschaften), was zu einem erneuten Rendern des Browsers führt (Sie können alle Änderungen sehen, indem Sie das Element mit den Entwicklertools des Browsers untersuchen). Solche Neuzeichnungen erfordern nicht nur mehr Ressourcen als das Festlegen von DOM-Eigenschaften, sondern können auch zu unerwarteten Fehlern führen.

Typischerweise werden sie für Elemente verwendet, die keine entsprechenden DOM-Eigenschaften haben, wie zum Beispiel colspan . Oder wenn ihre Verwendung wirklich notwendig ist, beispielsweise für HTML-Eigenschaften bei der Vererbung (siehe).

CSS-Stile hinzufügen

Sie werden auf die gleiche Weise wie andere Eigenschaften hinzugefügt:

MyElement.style.marginLeft = "2em"

Einige spezifische Eigenschaften können mit .style festgelegt werden, aber wenn Sie die Werte nach einigen Berechnungen erhalten möchten, ist es besser, window.getComputedStyle() zu verwenden. Diese Methode empfängt ein Element und gibt eine CSSStyleDeclaration zurück, die die Stile sowohl des Elements selbst als auch seines übergeordneten Elements enthält:

Window.getComputedStyle(myElement).getPropertyValue("margin-left")

Ändern des DOM

Sie können Elemente verschieben:

// Element1 als letztes Kind von Element2 anhängen element1.appendChild(element2) // Element2 als Kind von Element1 vor Element3 einfügen element1.insertBefore(element2, element3)

Wenn Sie es nicht verschieben möchten, aber eine Kopie einfügen müssen, verwenden Sie:

// Einen Klon erstellen const myElementClone = myElement.cloneNode() myParentElement.appendChild(myElementClone)

Die Methode .cloneNode() akzeptiert einen booleschen Wert als Argument. Wenn dieser Wert wahr ist, werden auch untergeordnete Elemente geklont.

Natürlich können Sie neue Elemente erstellen:

Const myNewElement = document.createElement("div") const myNewTextNode = document.createTextNode("some text")

Und fügen Sie sie dann wie oben gezeigt ein. Sie können ein Element nicht direkt löschen, aber Sie können dies über das übergeordnete Element tun:

MyParentElement.removeChild(myElement)

Sie können sich auch indirekt an uns wenden:

MyElement.parentNode.removeChild(myElement)

Methoden für Elemente

Jedes Element verfügt über Eigenschaften wie .innerHTML und .textContent , sie enthalten HTML-Code und dementsprechend den Text selbst. Das folgende Beispiel ändert den Inhalt eines Elements:

// HTML ändern myElement.innerHTML = ` Neuer Inhalt ( el.addEventListener("change", function (event) ( console.log(event.target.value) )) ))

Verhindern von Standardaktionen

Verwenden Sie dazu die Methode .preventDefault(), die Standardaktionen blockiert. Beispielsweise wird die Formularübermittlung blockiert, wenn die Autorisierung aktiviert ist Client-Seite war nicht erfolgreich:

MyForm.addEventListener("submit", Funktion (Ereignis) ( const name = this.querySelector("#name") if (name.value === "Donald Duck") { alert("You gotta be kidding!") event.preventDefault() } }) !}

Die Methode .stopPropagation() hilft, wenn Sie einem untergeordneten Element einen bestimmten Event-Handler und dem übergeordneten Element einen zweiten Event-Handler für dasselbe Ereignis zugewiesen haben.

Wie bereits erwähnt, akzeptiert die Methode .addEventListener() ein optionales drittes Argument in Form eines Konfigurationsobjekts. Dieses Objekt muss eine der folgenden booleschen Eigenschaften enthalten (standardmäßig alle auf „false“ gesetzt):

Capture: Das Ereignis wird vor jedem anderen Element unten im DOM an dieses Element angehängt;
einmal: ein Ereignis kann nur einmal zugewiesen werden;
passiv: event.preventDefault() wird ignoriert (Ausnahme bei Fehler).

Die gebräuchlichste Eigenschaft ist .capture und sie kommt so häufig vor, dass es dafür eine Abkürzung gibt: Anstatt sie in einem Konfigurationsobjekt zu übergeben, übergeben Sie einfach ihren Wert hier:

MyElement.addEventListener(type, listener, true)

Handler werden mit der Methode .removeEventListener() entfernt, die zwei Argumente benötigt: den Ereignistyp und einen Verweis auf den zu entfernenden Handler. Die Once-Eigenschaft kann beispielsweise so implementiert werden:

MyElement.addEventListener("change", Funktionslistener (Ereignis) ( console.log(event.type + " wurde ausgelöst am " + this) this.removeEventListener("change", listener) ))

Nachlass

Nehmen wir an, Sie haben ein Element und möchten einen Event-Handler für alle seine untergeordneten Elemente hinzufügen. Dann müssten Sie sie wie oben gezeigt mit der Methode myForm.querySelectorAll("input") durchlaufen. Sie können dem Formular jedoch einfach Elemente hinzufügen und deren Inhalt mithilfe von event.target überprüfen.

MyForm.addEventListener("change", function (event) ( const target = event.target if (target.matches("input")) ( console.log(target.value) ) ))

Ein weiterer Vorteil dieser Methode besteht darin, dass der Handler automatisch an neue untergeordnete Elemente angehängt wird.

Animation

Der einfachste Weg, Animationen hinzuzufügen, ist die Verwendung von CSS mit der Eigenschaft „transition“. Für mehr Flexibilität (zum Beispiel bei Spielen) ist JavaScript jedoch besser geeignet.

Es ist keine gute Idee, die Methode window.setTimeout() aufzurufen, bis die Animation endet, da Ihre Anwendung möglicherweise einfriert, insbesondere bei mobile Geräte. Es ist besser, window.requestAnimationFrame() zu verwenden, um alle Änderungen bis zum nächsten Neuzeichnen zu speichern. Es nimmt eine Funktion als Argument an, die wiederum einen Zeitstempel erhält:

Const start = window.performance.now() const duration = 2000 window.requestAnimationFrame(function fadeIn (now)) ( const progress = now - start myElement.style.opacity = progress / duration if (progress< duration) { window.requestAnimationFrame(fadeIn) } }

Auf diese Weise wird eine sehr flüssige Animation erreicht. In seinem Artikel geht Mark Brown auf dieses Thema ein.

Schreiben unserer eigenen Bibliothek

Die Tatsache, dass Sie im DOM ständig über Elemente iterieren müssen, um Operationen an Elementen auszuführen, kann im Vergleich zur jQuery-Syntax $(".foo").css((color: "red")) recht mühsam erscheinen. Aber warum schreiben Sie nicht ein paar eigene Methoden, um diese Aufgabe zu erleichtern?

Const $ = function $ (selector, context = document) ( const elements = Array.from(context.querySelectorAll(selector)) return ( elements, html (newHtml) ( this.elements.forEach(element => ( element.innerHTML = newHtml )) return this ), css (newCss) ( this.elements.forEach(element => ( Object.assign(element.style, newCss) )) return this ), on (event, handler, options) ( this.elements .forEach(element => ( element.addEventListener(event, handler, options) )) return this ) ) )

In dieser Lektion schauen wir uns an, was das DOM ist, warum es benötigt wird und wie es aufgebaut ist.

Was ist DOM?

DOM ist ein Dokumentobjektmodell, das der Browser auf der Grundlage des vom Server empfangenen HTML-Codes im Speicher des Computers erstellt.

Einfach ausgedrückt ist HTML-Code der Text einer Seite und DOM eine Reihe verwandter Objekte, die vom Browser beim Parsen seines Textes erstellt werden.

In Chrome kann der Quellcode der Seite, die der Browser empfängt, auf der Registerkarte „Quelle“ im Bereich „Web Developer Tools“ angezeigt werden.

Um mit dem DOM zu arbeiten, wird in den meisten Fällen JavaScript verwendet, weil... Heute ist es die einzige Programmiersprache, in der Skripte in einem Browser ausgeführt werden können.

Warum brauchen wir die DOM-API? Wir benötigen es, damit wir mit JavaScript die Seite im Handumdrehen ändern können, d. h. Machen Sie es dynamisch und interaktiv.

Heutzutage gibt es im Web praktisch keine Seiten mehr, deren Szenarien mit dem DOM nicht funktionieren würden.

Woraus besteht der HTML-Code einer Seite?

Bevor Sie mit dem Studium des Dokumentobjektmodells fortfahren, müssen Sie sich zunächst daran erinnern, was der Quellcode einer Webseite (HTML-Dokument) ist.

Betrachten Sie als Beispiel den folgenden HTML-Code:

Seitentitel Artikeltitel Artikelabschnitt

Inhalt des Artikels

Schauen wir uns nun an, wie der Browser einen DOM-Baum basierend auf HTML-Code erstellt.

Wie ist der DOM-Baum eines Dokuments aufgebaut?

Wie bereits oben beschrieben, erstellt der Browser einen Baum basierend auf HTML-Elementen und anderen Entitäten des Seitenquellcodes. Bei der Durchführung dieses Prozesses wird die Verschachtelung der Elemente ineinander berücksichtigt.

Dadurch nutzt der Browser den resultierenden DOM-Baum nicht nur für seine Arbeit, sondern stellt uns auch eine API für die bequeme Arbeit damit über JavaScript zur Verfügung.

Beim Aufbau des DOM erstellt der Browser Objekte (DOM-Baumknoten) aus HTML-Elementen, Text, Kommentaren und anderen Entitäten dieser Sprache.

In den meisten Fällen sind Webentwickler nur an Objekten (Knoten) interessiert, die aus HTML-Elementen gebildet werden.

Um einen DOM-Baum zu erhalten, während der Browser ihn erstellt, müssen Sie lediglich alle Elemente entsprechend ihrer Beziehung zueinander „anordnen“.

Die Erstellung des DOM-Baums erfolgt von oben nach unten.

In diesem Fall ist die Wurzel des DOM-Baums immer das Dokument selbst (der Dokumentknoten). Als nächstes wird der Baum abhängig von der Struktur des HTML-Codes erstellt.

Der HTML-Code, den wir oben betrachtet haben, hätte beispielsweise den folgenden DOM-Baum:

Ganz oben in diesem Baum befindet sich der Dokumentknoten. Dieser Knoten ist mit HTML verknüpft, er ist dessen untergeordneter Knoten. Der HTML-Knoten wird durch das HTML-Element (...) gebildet. Die Knoten head(...) und body(...) haben eine übergeordnete Beziehung zu HTML. Im Verhältnis zueinander sind sie Geschwister, weil einen Elternteil haben. Der Kopfknoten ist mit dem Titel verknüpft (lt;title>...), er ist sein untergeordneter Knoten. Die Knoten h1 und div sind mit body verknüpft, dem übergeordneten Knoten. Der div-Knoten ist mit h2(...) und p() verbunden, sie sind seine untergeordneten Knoten.

So einfach lässt sich ein DOM-Baum in einem Browser auf Basis von HTML-Code erstellen.

Übung

Erstellen Sie basierend auf dem in der Abbildung gezeigten DOM-Baum HTML-Code.