Was ist das Dokumentobjektmodell und warum sollten Sie wissen, wie es verwendet wird?

Sie haben also HTML studiert, Ihre ersten Tags erstellt, etwas über CSS gelernt, wunderschöne Formulare, erstaunliche Schaltflächen und reaktionsschnelle Seiten erstellt und begonnen, allen zu zeigen, wie erstaunlich das alles war.

Aber dann entscheiden Sie, dass Sie einen weiteren Schritt in Ihrem Lernen machen möchten, und Sie haben sich gefragt: „Wie kann ich meiner Seite eine Animation hinzufügen? Ich wünschte, diese Schaltfläche hätte eine Animation auf meiner Seite erstellt, als ich darauf geklickt habe! “

Nun, hier kommt das DOM, um Ihr Problem zu lösen. Sie haben wahrscheinlich viel darüber gehört, wissen aber möglicherweise noch nicht, was es ist und welche Probleme es löst. Also lasst uns eintauchen.

Also, was ist das DOM?

Kennst du all die coolen Animationen, die du siehst und die dich dazu bringen zu denken: "Wow, ich wünschte ich könnte so etwas machen"? Alle diese Animationen werden durch Manipulieren des DOM erstellt. Ich werde Ihnen jetzt erklären, wie Sie damit beginnen, es zu manipulieren und Ihre Websites cooler aussehen zu lassen.

Das DOM (Document Object Model) ist eine Schnittstelle, die darstellt, wie Ihre HTML- und XML-Dokumente vom Browser gelesen werden. Es ermöglicht einer Sprache (JavaScript), Ihre Website zu bearbeiten, zu strukturieren und zu gestalten. Nachdem der Browser Ihr HTML-Dokument gelesen hat, erstellt er einen Repräsentationsbaum namens Document Object Model und definiert, wie auf diesen Baum zugegriffen werden kann.

Vorteile

Durch die Manipulation des DOM haben Sie unendlich viele Möglichkeiten. Sie können Anwendungen erstellen, die die Daten der Seite aktualisieren, ohne dass eine Aktualisierung erforderlich ist. Sie können auch Anwendungen erstellen, die vom Benutzer angepasst werden können, und dann das Layout der Seite ohne Aktualisierung ändern. Sie können Elemente ziehen, verschieben und löschen.

Wie gesagt, Sie haben unendlich viele Möglichkeiten - Sie müssen nur Ihre Kreativität einsetzen.

Darstellung durch den Browser

Im obigen Bild sehen wir den Repräsentationsbaum und wie er vom Browser erstellt wird. In diesem Beispiel haben wir vier wichtige Elemente, die Sie häufig sehen werden:

  1. Dokument : Es werden alle HTML- Dokumente behandelt.
  2. Elemente : Alle Tags in Ihrem HTML oder XML werden zu einem DOM-Element.
  3. Text : Der gesamte Inhalt der Tags.
  4. Attribute : Alle Attribute eines bestimmten HTML- Elements. Im Bild ist das Attribut class = ”hero” ein Attribut aus dem < p> -Element.

Manipulieren des DOM

Jetzt kommen wir zum besten Teil: Beginn der Manipulation des DOM. Zuerst erstellen wir ein HTML-Element als Beispiel, um einige Methoden und die Funktionsweise von Ereignissen zu sehen.

      Entendendo o DOM (Document Object Model) 

00:00:00

Start Stop Reset

Sehr einfach, oder? Jetzt lernen wir mehr über DOM-Methoden: wie wir unsere Elemente erhalten und mit der Manipulation beginnen.

Methoden

Das DOM hat viele Methoden. Sie sind die Verbindung zwischen unseren Knoten (Elementen) und Ereignissen, über die wir später mehr erfahren werden. Ich werde Ihnen einige der wichtigsten Methoden zeigen und wie sie angewendet werden. Es gibt viel mehr Methoden, die ich Ihnen hier nicht zeigen werde, aber Sie können alle Methoden hier sehen.

getElementById ()

Diese Methode gibt das Element zurück, das die übergebene Namens- ID enthält . Wie wir wissen, id sollte ‚s eindeutig sein, so dass es eine sehr hilfreiche Methode ist wollen nur das Element , das Sie zu erhalten.

var myStart = document.getElementsById('start');

myStart : Unser Variablenname, der unserer übergebenen ID ähnelt .

Start : ID übergeben. Und falls wir keine ID mit diesem bestimmten Namen haben, wird null zurückgegeben .

getElementsByClassName ()

Diese Methode gibt ein HTMLCollection alle diese Elemente die spezifischen Namen enthalten Klasse übergeben.

var myContainer = document.getElementsByClassName('container');

myContainer : Unser Variablenname, der unserer Klasse ähnelt, wurde übergeben.

.container : Unsere Klasse hat bestanden. Falls wir keine Klasse mit diesem bestimmten Namen haben, wird null zurückgegeben .

getElementsByTagName ()

Dies funktioniert genauso wie die oben beschriebenen Methoden: Es wird auch eine HTMLCollection zurückgegeben, diesmal jedoch mit einem einzigen Unterschied: Es werden alle Elemente mit dem übergebenen Tag-Namen zurückgegeben.

var buttons = document.getElementsByTagName('button');

Schaltflächen : Unser Variablenname, der unserem übergebenen Tag-Namen ähnelt .

button : Tag-Name , den wir erhalten möchten.

querySelector ()

Es gibt das erste Element zurück , an das der spezifische CSS-Selektor übergeben wurde. Denken Sie daran, dass der Selektor der CSS-Syntax folgen sollte . Falls Sie keinen Selektor haben , wird null zurückgegeben .

var resetButton = document.querySelector('#reset');

resetButton : Unser Variablenname, der unserem ausgewählten Selektor ähnelt .

#Rueck : Selektor übergeben, und wenn Sie keine haben Wähler , dass es Übereinstimmungen gibt null .

querySelectorAll ()

Sehr ähnlich der querySelector () -Methode, jedoch mit einem einzigen Unterschied: Sie gibt alle Elemente zurück , die mit dem übergebenen CSS-Selektor übereinstimmen . Der Selektor sollte auch der CSS-Syntax folgen . Falls Sie keinen Selektor haben , wird null zurückgegeben .

var myButtons = document.querySelector('#buttons');

myButtons : Unser Variablenname, der unseren übergebenen Selektoren ähnelt .

#buttons : Wähler bestanden, wenn Sie keine haben Wähler , die es passt wieder null .

Dies sind einige der am häufigsten verwendeten DOM-Methoden. Es gibt mehrere weitere Methoden, die Sie verwenden können, z. B. createElement (), mit dem ein neues Element in Ihrer HTML-Seite erstellt wird, und setAttribute (), mit dem Sie neue Attribute für HTML-Elemente festlegen können. Sie können sie auf eigene Faust erkunden.

Auch hier finden Sie alle Methoden auf der linken Seite unter Methoden . Ich empfehle Ihnen wirklich, sich einige der anderen anzuschauen, da Sie möglicherweise bald eine davon benötigen.

Jetzt lernen wir etwas über Ereignisse - schließlich können wir ohne sie keine Animationen auf unseren Seiten erstellen.

Veranstaltungen

Die DOM-Elemente haben Methoden , wie wir gerade besprochen haben, aber sie haben auch Ereignisse . Diese Ereignisse sind dafür verantwortlich, Interaktivität auf unserer Seite zu ermöglichen. Aber eines wissen Sie vielleicht nicht: Ereignisse sind auch Methoden .

klicken

Eines der am häufigsten verwendeten Ereignisse ist das Klickereignis. Wenn der Benutzer auf ein bestimmtes Element klickt, wird eine Aktion ausgeführt.

myStart.addEventListener('click', function(event) {
// Do something here.
}, false);

Die Parameter addEventListener () sind:

  1. Der Typ des gewünschten Ereignisses (in diesem Fall ' Klicken ').
  2. Eine Rückruffunktion
  3. Die useCapture ist standardmäßig false. Es zeigt an, ob Sie das Ereignis „erfassen“ möchten oder nicht.

wählen

Dieses Ereignis ist für den Fall vorgesehen, dass Sie etwas versenden möchten, wenn ein bestimmtes Element ausgewählt ist. In diesem Fall sind wir Gonna Versand eine einfache Benachrichtigung .

myStart.addEventListener('select', function(event) {
alert('Element selected!');
}, false);

Dies sind einige der am häufigsten verwendeten Ereignisse. Natürlich haben wir viele andere Ereignisse, die Sie verwenden können, z. B. Drag & Drop-Ereignisse. Wenn ein Benutzer beginnt, ein Element zu ziehen, können Sie eine Aktion ausführen, und wenn er dieses Element löscht, können Sie eine andere Aktion ausführen.

Jetzt werden wir sehen, wie wir das DOM durchlaufen und einige Eigenschaften verwenden können.

Durchqueren des DOM

Sie können das DOM durchlaufen und einige Eigenschaften verwenden, die wir jetzt sehen werden. Mit diesen Eigenschaften können Sie Elemente, Kommentare, Text usw. zurückgeben.

.childNodes

Diese Eigenschaft gibt eine Knotenliste der untergeordneten Knoten des angegebenen Elements zurück. Es gibt Text, Kommentare usw. zurück. Wenn Sie es also verwenden möchten, sollten Sie vorsichtig sein.

var container = document.querySelector('.container');
var getContainerChilds = container.childNodes;

.erstes Kind

Diese Eigenschaft gibt das erste untergeordnete Element des angegebenen Elements zurück.

var container = document.querySelector('.container');
var getFirstChild = container.firstChild;

.Knotenname

Diese Eigenschaft gibt den Namen des angegebenen Elements zurück. In diesem Fall haben wir ein div übergeben , sodass es " div " zurückgibt .

var container = document.querySelector('.container');
var getName = container.nodeName;

.nodeValue

Diese Eigenschaft ist spezifisch für Texte und Kommentare , da sie den Wert des aktuellen Knotens zurückgibt oder festlegt . In diesem Fall wird, da wir ein div übergeben haben, null zurückgegeben .

var container = document.querySelector('.container')
var getValue = container.nodeValue;

.nodeType

Diese Eigenschaft gibt den Typ des angegebenen Elements zurück. In diesem Fall wird " 1 " zurückgegeben.

var container = document.querySelector('.container')
var getValue = container.nodeType;

Aber was bedeutet " 1 " überhaupt? Dies ist im Grunde der Knotentyp des angegebenen Elements. In diesem Fall ist es ein _ELEMENT_NODE_ und gibt null zurück. Wenn dies ein Attribut wäre, würde es als " 2 " an uns und den Attributwert zurückgegeben.

Weitere Informationen zu nodeTypes finden Sie hier.

Elemente

Diese Eigenschaften geben anstelle der oben genannten nur Elemente zurück . Sie werden häufiger verwendet und empfohlen, da sie weniger Verwirrung stiften und leichter zu verstehen sind.

.Elternknoten

Diese Eigenschaft gibt das übergeordnete Element des angegebenen Knotens zurück.

var container = document.querySelector('.container')
var getParent = container.parentNode;

.firstElementChild

Gibt das erste untergeordnete Element des angegebenen Elements zurück.

var container = document.querySelector('.container')
var getValue = container.firstElementChild;

.lastElementChild

Gibt das letzte untergeordnete Element des angegebenen Elements zurück.

var container = document.querySelector('.container')
var getValue = container.lastElementChild;

Dies sind einige der vielen Eigenschaften, über die das DOM verfügt. Es ist sehr wichtig, dass Sie die Grundlagen des DOM, seine Funktionsweise sowie seine Methoden und Eigenschaften kennen, da Sie es eines Tages möglicherweise benötigen.

Fazit

Das DOM bietet uns mehrere wichtige APIs für die Erstellung fantastischer und innovativer Anwendungen. Wenn Sie die Grundlagen verstehen, können Sie unglaubliche Dinge erschaffen. Wenn Sie mehr über das DOM erfahren möchten, klicken Sie hier und lesen Sie alle MDN-Dokumente.

? F ollow mir auf Twitter!

F ollow mich auf GitHub!

Ich bin auf der Suche nach einer entfernten Gelegenheit. Wenn ich also etwas davon hören möchte, kontaktieren Sie mich bitte!