de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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 oder null (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

wird mit der Methode querySelector() und seine Farbe wird in rot geändert.

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.   
  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).
OptionenWas 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:

  1. ele.addEventListener(evt, listener, true)
  2. ele.addEventListener(evt, listener, {capture:true});
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 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'); 

Wie man aus Writer's Block entkommen kann

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.

(Tech- und Design-Tipps)

Dieses Tool zeigt, was WordPress Plugins & Tools andere Sites verwenden

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

(Tech- und Design-Tipps)