Die Grundlagen der DOM -Manipulation in Vanille JavaScript (keine jQuery)

Dieser Artikel, Teil unserer modernen JavaScript Anthologie, untersucht die Funktionen von Vanilla JavaScript für die DOM -Manipulation und zeigt, dass es sich um eine robuste Alternative zu JQuery handelt. Zugang zur vollständigen Anthologie über SitePoint Premium.

Während JQuery häufig die Anlaufstelle für DOM-Manipulation ist, bietet Vanilla JavaScript effiziente native Methoden. Dieser Artikel behandelt wichtige DOM -Manipulationsaufgaben: Abfragen und Ändern des DOM, Verwaltung von Klassen und Attributen, Ereignisbehandlungen und Animation. Schließlich erstellen wir eine leichte benutzerdefinierte DOM -Bibliothek.

Key Takeaways:

Vanille JavaScript liefert leistungsstarke DOM -Manipulationstools, insbesondere relevant, wenn der IE -Unterstützung abnehmend ist.
• und .querySelector() bieten eine effiziente Elementauswahl; Ersteres gibt das erste Spiel zurück, während der letztere alle Übereinstimmungen als Nodelist zurückgibt. .querySelectorAll()
Elementklassen und Attribute mithilfe von
• Methoden und .classList, das die Leistung des Manipulierens der DOM gegenüber HTML -Attributen, direkt ändern. .setAttribute().
.
• Verwenden Sie .addEventListener() für die Ereignishandhabung, wodurch mehrere Hörer verschiedener Typen in einem einzelnen Element ermöglicht werden und mehr Flexibilität als .onclick.
bietet
• Verbesserung der Leistung und des Code-Klarheit durch Erstellen von Helferfunktionen oder Mini-Libraren, um sich wiederholte DOM-Aufgaben zu erledigen, und die Komfort von JQuery mit nativem JavaScript replizieren.

DOM Manipulation: Abfragen des DOM

(Hinweis: Dieser Artikel bietet einen hochrangigen Überblick über die Vanilla-Dom-API. Für umfassende Details finden Sie im Mozilla-Entwicklernetzwerk.)

Verwenden Sie .querySelector() mit CSS -Selektoren, um Elemente zu zielen:

const myElement = document.querySelector('#foo > div.bar');

Dies wählt das erste Matching -Element aus. .matches() prüft, ob ein Element mit einem Selektor übereinstimmt:

myElement.matches('div.bar') === true;

.querySelectorAll() ruft alle passenden Elemente ab:

const myElements = document.querySelectorAll('.bar');

Abfrage innerhalb eines übergeordneten Elements verbessert die Leistung:

const myChildElement = myElement.querySelector('input[type="submit"]');

Im Gegensatz zu Live -Sammlungen aus Methoden wie getElementsByTagName() gibt .querySelectorAll() einen statischen Nodelist zurück, der nicht dynamisch aktualisiert wird. Dies wirkt sich auf die Leistung aus und erfordert eine explizite Iteration.

Arbeiten mit Nodelists

.querySelectorAll() Gibt einen Nodelist zurück, kein Array. Konvertieren Sie es in ein Array für Standard -Array -Methoden:

const myElement = document.querySelector('#foo > div.bar');

nodelistische Eigenschaften wie children, firstElementChild, nextElementSibling usw. bieten bequemen Zugriff auf verwandte Knoten. Denken Sie daran, dass childNodes alle Knotentypen enthält, nicht nur Elemente. Verwenden Sie nodeType oder instanceof, um Knotentypen zu überprüfen.

Ändern von Klassen und Attributen

Verwenden Sie .classList Methoden zur effizienten Klassenmanipulation:

myElement.matches('div.bar') === true;

Zugriff auf die Elementeigenschaften direkt:

const myElements = document.querySelectorAll('.bar');

.getAttribute(), .setAttribute() und .removeAttribute(), ändern Sie HTML -Attribute direkt, wodurch der Browser -Neutrauen ausgelöst wird. Verwenden Sie diese sparsam, hauptsächlich für Attribute, die DOM -Eigenschaften -Äquivalente fehlen oder wenn Änderungen über Operationen wie Klonen bestehen.

Hinzufügen von CSS -Stilen

Stile mit Kamel-Eigenschaftsnamen anwenden:

const myChildElement = myElement.querySelector('input[type="submit"]');

.window.getComputedStyle() ruft berechnete Stilwerte ab:

Array.from(myElements).forEach(doSomethingWithEachElement);

Ändern des DOM

Verwenden Sie appendChild(), insertBefore() und removeChild() für die Elementmanipulation. cloneNode() erstellt Kopien; Verwenden Sie das Boolesche Argument für ein tiefes Klonen. Erstellen Sie neue Elemente mit createElement() und Textknoten mit createTextNode().

Elementeigenschaften: Innerhtml und TextContent

.innerHTML und .textContent HTML bzw. Klartextinhalt verwalten. Das Ändern von .innerHTML ersetzt den Inhalt vollständig; Das Anhängen mit .innerHTML = ist weniger effizient als ein Anhang einzelner Knoten. Verwenden Sie DocumentFragment, um mehrere Anhänge zu optimieren.

Hören Sie sich Ereignisse

bevorzugt .addEventListener() über die direkte Zuweisung von Ereigniseigenschaften (z. B. onclick) für Flexibilität und mehrere Zuhörer. Verwenden Sie event.target, um auf das ausgelöste Element zuzugreifen. .preventDefault() verhindert Standardaktionen; .stopPropagation() stoppt das Ereignis sprudeln. Das optionale dritte Argument für addEventListener() bietet Konfigurationsoptionen (capture, once, passive). Die Ereignisdelegation verbessert die Effizienz und verarbeitet dynamisch hinzugefügte Elemente.

Animation

Verwenden Sie requestAnimationFrame() für reibungslose Animationen, vermeiden Sie Layout -Thrashing.

schreibe deine eigenen Helfermethoden

Erstellen Sie benutzerdefinierte Helferfunktionen, um die DOM -Manipulation zu optimieren und die Bequemlichkeit von JQuery zu spiegeln. Dieses Beispiel zeigt eine grundlegende benutzerdefinierte $ -Funktion:

myElement.classList.add('foo');
myElement.classList.remove('bar');
myElement.classList.toggle('baz');

Dies ermöglicht mehr präzise Code, während die Vorteile von Vanille JavaScript beibehalten.

Schlussfolgerung

Vanilla JavaScript bietet robuste DOM -Manipulationsfunktionen und beseitigt häufig die Notwendigkeit externer Bibliotheken. Während einige Aspekte möglicherweise mehr ausführlicher als Die Wahl hängt von den Projektbedürfnissen und den Entwicklerpräferenzen ab.

(FAQS -Abschnitt für die Kürze weggelassen, die in der Eingabe bereitgestellten Informationen sind jedoch bereits oben abgedeckt.)

Das obige ist der detaillierte Inhalt vonDie Grundlagen der DOM -Manipulation in Vanille JavaScript (keine jQuery). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!