Startseite » Codierung » 15 JavaScript-Methoden für die DOM-Manipulation für Webentwickler

    15 JavaScript-Methoden für die DOM-Manipulation für Webentwickler

    Als Webentwickler müssen Sie häufig die DOM, das Objektmodell, das von Browsern verwendet wird Geben Sie die logische Struktur an von Webseiten, und basierend auf dieser Struktur zu HTML-Elemente auf dem Bildschirm darstellen.

    HTML definiert das Standard-DOM-Struktur. In vielen Fällen möchten Sie dies jedoch mit JavaScript manipulieren, normalerweise um dies zu tun fügen Sie zusätzliche Funktionen hinzu zu einer Website.

    IMAGE: Google-Entwickler

    In diesem Beitrag finden Sie eine Liste von 15 grundlegende JavaScript-Methoden Das Hilfe bei der DOM-Manipulation. Sie würden diese Methoden wahrscheinlich häufig in Ihrem Code verwenden, und Sie werden in unseren JavaScript-Tutorials auch darauf eingehen.

    1. querySelector ()

    Das querySelector () Methode gibt das erste Element zurück, das mit einem oder mehreren CSS-Selektoren übereinstimmt. Wenn keine Übereinstimmung gefunden wird, wird es zurückgegeben Null.

    Vor querySelector () wurde eingeführt, die Entwickler weit verbreitet getElementById () Methode welche holt ein Element mit einem angegebenen Ich würde Wert.

    Obwohl getElementById () ist immer noch eine nützliche Methode, aber mit der neueren querySelector () und querySelectorAll () Methoden, zu denen wir frei sind Zielelemente basierend auf einem beliebigen CSS-Selektor, So haben wir mehr Flexibilität.

    Syntax
    var ele = document.querySelector (Selektor);
    • ele - Erstes passendes Element oder Null (wenn kein Element mit den Selektoren übereinstimmt)
    • Wähler - einen oder mehrere CSS-Selektoren, wie z "#fooId", ".fooClassName", ".class1.class2", oder ".class1, .class2"
    Code-Beispiel

    In diesem Beispiel der erste

    wird mit ausgewählt querySelector () Methode und ihre Farbe wird in rot geändert.

     
    Absatz eins
     
    Absatz zwei
     
    div eins
     
    Absatz drei
     
    Div zwei
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'rot';
    Interaktive Demo

    Testen Sie die querySelector () Methode in der folgenden interaktiven Demo. Geben Sie einfach eine Auswahl ein, die denjenigen entspricht, die Sie in den blauen Kästchen finden (z. #drei) und klicken Sie auf die Schaltfläche Auswählen. Beachten Sie dies, wenn Sie eingeben .Block, nur seine erste Instanz wird ausgewählt.

    2. querySelectorAll ()

    nicht wie querySelector () das gibt nur die erste Instanz aller übereinstimmenden Elemente zurück, querySelectorAll () gibt alle Elemente zurück, die der angegebenen CSS-Auswahl entsprechen.

    Die übereinstimmenden Elemente werden als zurückgegeben NodeList Objekt, 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.
    • Wähler - einen oder mehrere CSS-Selektoren, wie z "#fooId", ".fooClassName", ".class1.class2", oder ".class1, .class2"
    Code-Beispiel

    Im folgenden Beispiel wird derselbe HTML-Code wie im vorherigen verwendet. In diesem Beispiel werden jedoch alle Absätze mit ausgewählt querySelectorAll (), und sind blau gefärbt.

     
    Absatz eins
     
    Absatz zwei
     
    div eins
     
    Absatz drei
     
    Div zwei
     
     var Absätze = document.querySelectorAll ('p'); für (var p von Absätzen) p.style.color = 'blue';

    3. addEventListener ()

    Veranstaltungen Verweisen Sie 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 Hör mal zu für diese Ereignisse in Elementen und etwas tun, wenn das Ereignis stattgefunden hatte.

    Es gibt drei Möglichkeiten Weisen Sie einem bestimmten Ereignis eine Funktion zu.

    Ob foo () ist eine benutzerdefinierte Funktion, die Sie registrieren können als Klickereignis-Listener (nennen Sie es, wenn das Schaltflächenelement angeklickt wird) auf drei Arten:

    1.  
    2.  var btn = document.querySelector ('button'); btn.onclick = foo;
    3.  var btn = document.querySelector ('button'); btn.addEventListener ('click', foo);

    Die Methode addEventListener () (die dritte Lösung) hat einige Profis; Dies ist der neueste Standard, der die Zuweisung von mehr als einer Funktion als Ereignis-Listener zu einem Ereignis ermöglicht, und bietet 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.
    • Hörer - Normalerweise eine JavaScript-Funktion.
    • Optionen - (optional) Ein Objekt mit einem Satz boolescher Eigenschaften (unten aufgeführt).
    Optionen Was passiert, wenn es eingestellt ist? wahr?
    Erfassung

    Stoppt das Blubbern von Ereignissen, d. H. Verhindert den Aufruf von Ereignis-Listenern für denselben Ereignistyp in den Vorfahren des Elements.

    Um diese Funktion zu verwenden, können Sie zwei Syntax verwenden:

    1. ele.addEventListener (evt, Listener, true)
    2. ele.addEventListener (evt, Listener, capture: true);
    Einmal

    Listener wird nur beim ersten Auftreten des Ereignisses aufgerufen, dann wird es automatisch vom Ereignis getrennt und wird nicht mehr durch das Ereignis ausgelöst.
    passiv

    Die Standardaktion des Ereignisses kann nicht mit der Methode compareDefault () beendet werden.
    Code-Beispiel

    In diesem Beispiel fügen wir einen Klickereignislistener hinzu foo, zum 

     var btn = document.querySelector ('button'); btn.addEventListener ('click', foo); function foo () alert ('hallo');
    Interaktive Demo

    Weisen Sie das zu foo () Benutzerdefinierte Funktion als Ereignis-Listener für eines der drei folgenden Ereignisse: Eingang, klicken oder Mouseover & Auslösen des ausgewählten Ereignisses im unteren Eingabefeld durch Schweben, Klicken oder Eingeben.

    4. removeEventListener ()

    Das removeEventListener () Methode entfernt einen Ereignis-Listener zuvor mit der addEventListener () Methode von dem Ereignis, auf das es wartet.

    Syntax
    ele.removeEventListener (evt, Listener, [Optionen]);

    Verwendet dieselbe Syntax wie zuvor addEventListener () Methode (außer für die Einmal Option ist ausgeschlossen). Die Optionen werden verwendet, um den zu entfernenden Listener sehr genau zu identifizieren.

    Code-Beispiel

    Dem Code-Beispiel folgend haben wir verwendet addEventListener (), Hier entfernen wir den Click-Event-Listener foo von dem