15 JavaScript-Methoden zur DOM-Manipulation für Web-Entwickler
Als Webentwickler müssen Sie häufig das DOM manipulieren, das Objektmodell, das von Browsern verwendet wird, um die logische Struktur von Webseiten festzulegen und basierend auf dieser Struktur HTML-Elemente auf dem Bildschirm zu rendern .
HTML definiert die Standard-DOM-Struktur . In vielen Fällen möchten Sie dies jedoch mit JavaScript ändern, normalerweise, um einer Website zusätzliche Funktionen hinzuzufügen .
In diesem Post finden Sie eine Liste von 15 grundlegenden JavaScript-Methoden, die die DOM-Manipulation unterstützen . Sie werden diese Methoden wahrscheinlich häufig in Ihrem Code verwenden, und Sie werden auch in unseren JavaScript-Lernprogrammen darauf stoßen.1. querySelector()
Die Methode querySelector()
gibt das erste Element zurück, das einem oder mehreren CSS-Selektoren entspricht . Wenn keine Übereinstimmung gefunden wird, wird null
.
Bevor querySelector()
eingeführt wurde, verwendeten Entwickler häufig die Methode getElementById()
, die ein Element mit einem angegebenen id
Wert getElementById()
.
Obwohl getElementById()
immer noch eine nützliche Methode ist, aber mit den neueren querySelector()
und querySelectorAll()
können wir Elemente basierend auf einem beliebigen CSS-Selektor gezielt ansprechen, wodurch wir mehr Flexibilität haben.
Syntax
var ele = document.querySelector (Selektor);
ele
- erstes übereinstimmendes Element odernull
(wenn kein Element den Selektoren entspricht)selector
- ein oder mehrere CSS-Selektoren wie"#fooId"
,".fooClassName"
,".class1.class2"
oder".class1, .class2"
Codebeispiel
In diesem Beispiel der erste
querySelector()
und seine Farbe wird in rot geändert.Absatz eins
Absatz zwei
Teil einsAbsatz drei
div zwei
var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'rot';
Interaktive Demo
Testen Sie die Methode querySelector()
in der folgenden interaktiven Demo. #three
Sie einfach einen Selektor ein, der den blauen Kästchen entspricht (z. B. #three
), und klicken Sie auf die Schaltfläche Auswählen. Beachten Sie, dass bei der .block
nur die erste Instanz ausgewählt wird.
2. querySelectorAll()
Im Gegensatz zu querySelector()
, das nur die erste Instanz aller übereinstimmenden Elemente querySelectorAll()
, gibt querySelectorAll()
alle Elemente zurück, die dem angegebenen CSS-Selektor entsprechen .
Die übereinstimmenden Elemente werden als NodeList
Objekt zurückgegeben, das ein leeres Objekt ist, wenn keine übereinstimmenden Elemente gefunden werden.
Syntax
var eles = document.querySelectorAll (Selektor);
eles
- EinNodeList
Objekt mit allen übereinstimmenden Elementen als Eigenschaftswerte. Das Objekt ist leer, wenn keine Übereinstimmungen gefunden werden.selector
- ein oder mehrere CSS-Selektoren wie"#fooId"
,".fooClassName"
,".class1.class2"
oder".class1, .class2"
Codebeispiel
Das folgende Beispiel verwendet denselben HTML-Code wie der vorherige. In diesem Beispiel werden jedoch alle Absätze mit querySelectorAll()
ausgewählt und blau dargestellt.
Absatz eins
Absatz zwei
Teil einsAbsatz drei
div zwei
var absatz = document.querySelectorAll ('p'); für (var p von Absätzen) p.style.color = 'blau';
3. addEventListener()
Ereignisse beziehen sich auf das, was mit einem HTML-Element geschieht, z. B. Klicken, Fokussieren oder Laden, auf das wir mit JavaScript reagieren können. Wir können JS-Funktionen zuweisen, um auf diese Ereignisse in Elementen zu warten und etwas zu tun, wenn das Ereignis aufgetreten ist.
Es gibt drei Möglichkeiten, wie Sie einem bestimmten Ereignis eine Funktion zuweisen können .
Wenn foo()
eine benutzerdefinierte Funktion ist, können Sie sie auf drei Arten als Klickereignis-Listener registrieren (rufen Sie sie auf, wenn auf das Schaltflächenelement geklickt wird):
var btn = document.querySelector ('Schaltfläche'); btn.onclick = foo;
var btn = document.querySelector ('Schaltfläche'); btn.addEventListener ('click', foo);
Die Methode addEventListener()
(die dritte Lösung) hat einige addEventListener()
; Es ist der neueste Standard - die Zuweisung von mehr als einer Funktion als Ereignis-Listener zu einem Ereignis zu ermöglichen - und enthält eine Reihe nützlicher Optionen.
Syntax
ele.addEventListener (evt, Listener, [Optionen]);
ele
- Das HTML-Element, auf das der Ereignis-Listener wartet.evt
- Die gezielte Veranstaltung.listener
- In der Regel eine JavaScript-Funktion.options
- (optional) Ein Objekt mit einer Reihe boolescher Eigenschaften (siehe unten).
Optionen | Was passiert, wenn es auf true ? |
capture | Stoppt das Bubbling von Ereignissen, dh verhindert den Aufruf von Ereignis-Listenern für den gleichen Ereignistyp in den Ahnen des Elements. Um diese Funktion zu verwenden, können Sie 2 Syntaxen verwenden:
|
once | Der Listener wird nur beim ersten Auftreten des Ereignisses aufgerufen, dann wird er automatisch vom Ereignis getrennt und wird nicht mehr ausgelöst. |
passive | Die Standardaktion des Ereignisses kann nicht mit der preventDefault () -Methode gestoppt werden. |
Codebeispiel
In diesem Beispiel fügen wir dem HTML-Tag einen Klickereignis-Listener namens foo
.
var btn = document.querySelector ('Schaltfläche'); btn.addEventListener ('click', foo); Funktion foo () {Alarm ('Hallo'); }
Interaktive Demo
Weisen Sie die benutzerdefinierte Funktion foo()
als Ereignis-Listener für jedes der drei folgenden Ereignisse zu: input
, click
oder mouseover
& triggern Sie das ausgewählte Ereignis im unteren Eingabefeld, indem click
mouseover
, click
oder mouseover
.
4. removeEventListener()
Die removeEventListener()
-Methode trennt einen zuvor mit der addEventListener()
-Methode hinzugefügten Ereignislistener von dem Ereignis, auf das er addEventListener()
.
Syntax
ele.removeEventListener (evt, Listener, [Optionen]);
Verwendet die gleiche Syntax wie die oben erwähnte addEventListener()
-Methode (außer für die once
Option). Die Optionen werden verwendet, um sehr spezifisch zu sein, um den Hörer zu identifizieren, der getrennt werden soll.
Codebeispiel
Nach dem Code-Beispiel, das wir bei addEventListener()
, entfernen wir hier den Klick-Ereignis-Listener namens foo
aus dem Element.
btn.removeEventListener ('click', foo);
5. createElement()
Die createElement()
-Methode erstellt ein neues HTML-Element, das den Namen des zu erstellenden HTML-Tags verwendet, z. B. 'p'
oder 'div'
.
Sie können dieses Element später zur Webseite hinzufügen, indem Sie verschiedene Methoden für die DOM-Einfügung verwenden, z. B. AppendChild()
(siehe später in diesem Beitrag).
Syntax
document.createElement (TagName);
tagName
- Der Name des HTML-Tags, das Sie erstellen möchten.
Codebeispiel
Mit dem folgenden Beispiel können Sie ein neues Absatzelement erstellen:
var pEle = document.createElement ('p')
6. appendChild()
Die appendChild()
-Methode fügt dem HTML-Element, das diese Methode aufruft, ein Element als letztes Kind hinzu .
Das einzufügende Kind kann entweder ein neu erstelltes Element oder ein bereits vorhandenes Element sein . Im letzteren Fall wird es von seiner vorherigen Position zu der Position des letzten Kindes bewegt.
Syntax
ele.appendChild (KindEle)
ele
- Das HTML-Element, zu demchildEle
als letztes Kind hinzugefügt wird.childEle
- Das HTML-Element, das als letztes Kind vonele
hinzugefügt wurde.
Codebeispiel
In diesem Beispiel fügen wir ein Element als Kind von ein
appendChild()
und den zuvor erwähnten createElement()
-Methoden.var div = document.querySelector ('div'); var strong = document.createElement ('stark'); strong.textContent = 'Hallo'; div.appendChild (stark);
Interaktive Demo
In der folgenden interaktiven Demo sind die Buchstaben von #a
bis #a
die #a
der #parent-one
, #parent-two
und #parent-three
ID-Selektoren.
appendChild()
Sie sich an, wie die Methode appendChild()
funktioniert, indem Sie einen Eltern- und einen Kind-Selektornamen in die folgenden Eingabefelder eingeben. Sie können auch Kinder auswählen, die zu einem anderen Elternteil gehören.
7. removeChild()
Die Methode removeChild()
entfernt ein angegebenes removeChild()
Element aus dem HTML-Element, das diese Methode aufruft.
Syntax
ele.removeChild (KindEle)
ele
- Das Elternelement vonchildEle
.childEle
- DaschildEle
vonele
.
Codebeispiel
In diesem Beispiel entfernen wir das Element, das wir als Kind hinzugefügt haben
appendChild()
-Methode.div.removeChild (stark);
8. replaceChild()
Die Methode replaceChild()
ersetzt ein replaceChild()
Element durch ein anderes, das zum übergeordneten Element gehört, das diese Methode aufruft.
Syntax
ele.replaceChild (newChildEle, oldChileEle)
ele
- Elternelement, dessen Kinder ersetzt werden sollen.newChildEle
-newChildEle
vonele
, dasoldChildEle
ersetzenoldChildEle
.oldChildEle
-oldChildEle
vonele
, das durchnewChildEle
ersetzt wird.
Codebeispiel
In diesem Beispiel ist das untergeordnete Element des
Hallo
var em = document.createElement ('em'); var strong = document.querySelector ('stark'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.replaceChild (em, stark);
9. cloneNode()
Wenn Sie ein neues Element erstellen müssen, das mit einem bereits vorhandenen Element auf der Webseite cloneNode()
, können Sie einfach eine Kopie des bereits vorhandenen Elements mithilfe der cloneNode()
-Methode cloneNode()
.
Syntax
var dupeEle = ele.cloneNode([deep])
dupeEle
- Kopie desele
Elements.ele
- Das HTML-Element, das kopiert werden soll.deep
- (optional) Ein boolescher Wert. Wenn es auftrue
, hatdupeEle
alledupeEle
Elemente, dieele
hat. Wenn es auffalse
, wird es ohne seinedupeEle
Elemente geklont.
Codebeispiel
In diesem Beispiel erstellen wir eine Kopie für das Element mit cloneNode()
, und fügen es dann zu
appendChild()
Element mit der oben erwähnten appendChild()
-Methode.Als Ergebnis,
hello
Zeichenfolge als Inhalt.Hallo
var strong = document.querySelector ('stark'); var Kopie = strong.cloneNode (true); var div = document.querySelector ('div'); div.appendChild (kopieren);
10. insertBefore()
Die insertBefore()
-Methode fügt ein bestimmtes insertBefore()
Element vor einem anderen insertBefore()
Element hinzu . Die Methode wird vom übergeordneten Element aufgerufen.
Wenn das referenzierte untergeordnete Element nicht vorhanden ist oder an seiner Stelle explizit null
, wird das einzufügende appendChild()
Element als letztes appendChild()
Element des übergeordneten Elements hinzugefügt (ähnlich wie appendChild()
).
Syntax
ele.insertBefore (newEle, refEle);
ele
- Elternelement.newEle
- Neues HTML-Element, das eingefügt werden soll.refEle
- EinrefEle
vonele
vor demnewEle
eingefügt wird.
Codebeispiel
In diesem Beispiel erstellen wir ein neues Element mit etwas Text darin und fügen es vor dem Element innerhalb des Elements hinzu
Hallo
var em = document.createElement ('em'); var strong = document.querySelector ('stark'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.insertBefore (em, stark);
Interaktive Demo
Diese interaktive Demo funktioniert ähnlich wie unsere vorherige Demo, die zur Methode appendChild()
. Hier müssen Sie nur die ID-Selektoren von zwei #a
Elementen (von #a
bis #r
) in die Eingabefelder insertBefore()
und Sie können sehen, wie die insertBefore()
-Methode das erste angegebene Kind vor das zweite Kind verschiebt.
11. createDocumentFragment()
Die createDocumentFragment()
-Methode ist möglicherweise nicht so bekannt wie die anderen in dieser Liste, ist jedoch eine wichtige Methode, insbesondere wenn Sie mehrere Elemente in einer createDocumentFragment()
einfügen möchten, beispielsweise mehrere Zeilen zu einer Tabelle hinzufügen.
Es erstellt ein DocumentFragment
Objekt, das im Wesentlichen ein DOM-Knoten ist, der nicht Teil der DOM-Struktur ist . Es ist wie ein Puffer, in dem wir zuerst andere Elemente (zB mehrere Zeilen) hinzufügen und speichern können, bevor wir sie zum gewünschten Knoten im DOM-Baum hinzufügen (zB zu einer Tabelle).
Warum fügen wir nicht einfach Elemente direkt in den DOM-Baum ein? Da DOM-Einfügung Layoutänderungen verursacht, ist dies ein teurer Browserprozess, da mehrere aufeinanderfolgende Elementeinfügungen zu mehr Layoutänderungen führen.
Auf der anderen Seite verursacht das Hinzufügen von Elementen zu einem DocumentFragment
Objekt keine Änderungen des Layouts. Sie können daher beliebig viele Elemente hinzufügen, bevor Sie sie an die DOM-Struktur übergeben, wodurch an dieser Stelle nur eine Änderung des Layouts verursacht wird.
Syntax
document.createDocumentFragment ()
Codebeispiel
In diesem Beispiel erstellen wir mehrere Tabellenzeilen und createElement()
mit der createElement()
-Methode, fügen sie dann einem DocumentFragment
Objekt hinzu und fügen dieses Dokumentfragment schließlich zu einem HTML- createElement()
hinzu
var table = document.querySelector ("Tabelle"); var df = dokument.createDocumentFragment (); für (var i = 0; i <5; i ++) {var td = document.createElement ("td"); var tr = document.createElement ("tr"); td.textContent = i; tr.appendChild (td) df.appendChild (tr); } table.appendChild (df);
12. getComputedStyle()
Manchmal möchten Sie die CSS-Eigenschaftswerte eines Elements überprüfen, bevor Sie Änderungen vornehmen. Sie können die ele.style
verwenden, um das ele.style
zu tun. Die Methode getComputedStyle()
wurde jedoch nur für diesen Zweck erstellt. Sie gibt die schreibgeschützten berechneten Werte aller CSS-Eigenschaften eines angegebenen HTML-Elements zurück.
Syntax
var style = getComputedStyle (ele, [pseudoEle])
style
- EinCSSStyleDeclaration
Objekt, das von der Methode zurückgegeben wird. Es enthält alle CSS-Eigenschaften und ihre Werte desele
Elements.ele
- Das HTML-Element, von dem CSS-Eigenschaftswerte abgerufen werden.pseudoEle
- (optional) Eine Zeichenfolge, die einpseudoEle
(z. B.':after'
). Wenn dies erwähnt wird, werden die CSS-Eigenschaften des angegebenenele
das mitele
verknüpft ist, zurückgegeben.
Codebeispiel
In diesem Beispiel erhalten und alarmieren wir den berechneten width
von a
getComputedStyle()
-Methode.var style = getComputedStyle (document.querySelector ('div')); Warnung (style.width);
13. setAttribute()
Die Methode setAttribute()
fügt einem HTML-Element entweder ein neues Attribut hinzu oder aktualisiert den Wert eines bereits vorhandenen Attributs.
Syntax
ele.setAttribute (Name, Wert);
ele
- Das HTML-Element, zu dem ein Attribut hinzugefügt wird oder dessen Attribut aktualisiert wird.name
- Der Name des Attributs.value
- Der Wert des Attributs.
Codebeispiel
In diesem Beispiel fügen wir das Attribut contenteditable
zu a hinzu
setAttribute()
, die den Inhalt editierbar macht.Hallo
var div = document.querySelector ('div'); div.setAttribute ('contenteditable', '')
14. getAttribute()
Die Methode getAttribute()
gibt den Wert eines angegebenen Attributs zurück, das zu einem bestimmten HTML-Element gehört.
Syntax
ele.getAttribute (Name);
ele
- Das HTML-Element, von dem das Attribut angefordert wird.name
- Der Name des Attributs.
Codebeispiel
In diesem Beispiel warnen wir den Wert des contenteditable
Attributs, das zu
getAttribute()
.Hallo
var div = document.querySelector ('div'); Warnung (div.getAttribute ('contenteditable'))
15. removeAttribute()
Die removeAttribute()
-Methode entfernt ein bestimmtes Attribut eines bestimmten HTML-Elements.
Syntax
ele.removeAttribute(name);
ele
- Das HTML-Element, dessen Attribut entfernt werden soll.name
- Der Name des Attributs.
Codebeispiel
In diesem Beispiel entfernen wir das contenteditable
Attribut aus dem
Hallo
var div = document.querySelector ('div'); div.removeAttribute ('contenteditable');
Wie man aus Writer's Block entkommen kann
Wenn Sie dies lesen, bedeutet das, dass Sie wahrscheinlich nach dem Zaubertrick oder dem goldenen Geheimnis suchen, um eine Flucht vor dieser Mauer zu finden, die all Ihre inspirierenden Ideen ausblendet. Davor wird es Ihnen helfen, zu verstehen, worum es bei einem Schriftsteller geht . Dafür muss ich mich einer kurzen Hintergrundgeschichte hingeben.
Dieses Tool zeigt, was WordPress Plugins & Tools andere Sites verwenden
Bist du jemals auf einem Blog gelandet und hast gedacht "Ich frage mich, welches WP-Thema sie verwenden"?Nun, Sie können die Antwort schnell mit dem passend benannten What WordPress Theme Is That finden? Tool, das vollständig in Ihrem Browser ausgeführt wird. Es funktioniert, indem Sie alle Daten von der Website ziehen und das Stylesheet durchsuchen . D