15 JavaScript-Methoden zur DOM-Manipulation für Web-Entwickler

Absatz eins
Absatz zwei
 Teil eins 
Absatz 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 - Ein NodeList 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 eins 
Absatz 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):

1.  Aufmerksam 

2.  var btn = document.querySelector ('Schaltfläche'); btn.onclick = foo; 

3.  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).

Codebeispiel

In diesem Beispiel fügen wir dem HTML-Tag einen Klickereignis-Listener namens foo .

 Klick mich 

 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 dem childEle als letztes Kind hinzugefügt wird.
• childEle - Das HTML-Element, das als letztes Kind von ele hinzugefügt wurde.

Codebeispiel

In diesem Beispiel fügen wir ein Element als Kind von ein

Element mit den 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 von childEle .
• childEle - Das childEle von ele .

Codebeispiel

In diesem Beispiel entfernen wir das Element, das wir als Kind hinzugefügt haben

Tag im Code-Beispiel für die vorherige 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 von ele, das oldChildEle ersetzen oldChildEle .
• oldChildEle - oldChildEle von ele, das durch newChildEle ersetzt wird.

Codebeispiel

In diesem Beispiel ist das untergeordnete Element des

Das übergeordnete Element wird durch ein neu erstelltes Tag ersetzt.

 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 des ele Elements.
• ele - Das HTML-Element, das kopiert werden soll.
• deep - (optional) Ein boolescher Wert. Wenn es auf true, hat dupeEle alle dupeEle Elemente, die ele hat. Wenn es auf false, wird es ohne seine dupeEle Elemente geklont.

Codebeispiel

In diesem Beispiel erstellen wir eine Kopie für das Element mit cloneNode(), und fügen es dann zu

als ein appendChild() Element mit der oben erwähnten appendChild() -Methode.

Als Ergebnis,

enthält zwei Elemente, beide mit der 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 - Ein refEle von ele vor dem newEle 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

Elternelement

 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

Verwenden der appendChild() -Methode.

Als Ergebnis werden fünf Zeilen - die jeweils eine Zelle mit einer Zahl von 1 bis 5 als Inhalt enthalten - in die Tabelle eingefügt.

 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 - Ein CSSStyleDeclaration Objekt, das von der Methode zurückgegeben wird. Es enthält alle CSS-Eigenschaften und ihre Werte des ele Elements.
• ele - Das HTML-Element, von dem CSS-Eigenschaftswerte abgerufen werden.
• pseudoEle - (optional) Eine Zeichenfolge, die ein pseudoEle (z. B. ':after' ). Wenn dies erwähnt wird, werden die CSS-Eigenschaften des angegebenen ele das mit ele verknüpft ist, zurückgegeben.

Codebeispiel

In diesem Beispiel erhalten und alarmieren wir den berechneten width von a

Element mithilfe der 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

Verwenden Sie dazu die Methode 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

Element mit Hilfe der Methode 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

Element. Als Ergebnis der

wird nicht mehr bearbeitet werden können.

 Hallo 

 var div = document.querySelector ('div'); div.removeAttribute ('contenteditable'); 

50+ Seiten zum Herunterladen kostenloser Soundeffekte für fast alles

Stellen Sie sich einen Film oder ein Video ohne Soundeffekte vor. Selbst ein großartiger Film wie Titanic würde nichts weiter als ein Witz sein, wenn es keine "Wham" -, "Bam" - und "Smash" -Sounds darin gibt. Hintergrundmusik und Soundeffekte sind wichtig, um ein Video (oder sogar eine Audioproduktion) in vollem Umfang in Szene zu setzen.E

(Tech- und Design-Tipps)

Ultimativer Leitfaden zur Einrichtung Ihres ersten Online-Shops

E-Commerce ist der beliebteste Geschäftstrend in unserer futuristischen Gesellschaft, da die meisten modernen Städte mit Internet ausgestattet sind und es so einfach ist, Zahlungen überall auf der Welt per Internetverbindung zu senden. Zusammen mit diesen Technologien sind Hunderttausende neuer digitaler Webshops entstanden, die sowohl physische als auch digitale Produkte an einen globalen Marktplatz verkaufen.Ge

(Tech- und Design-Tipps)



Interessante Artikel

20+ Bookmarklet Alternative zu Ihren bevorzugten Erweiterungen

Google Panda: 5 Tipps, die Sie kennen sollten

5 neue Programmiersprachen zum Lernen im Jahr 2017

10 Gründe, warum Sie jetzt zu Opera Browser wechseln sollten