So ändern Sie Attribute, Klassen und Stile im DOM

Einführung

Im vorherigen Tutorial in diesemseries, „https://www.digitalocean.com/community/tutorials/how-to-make-changes-to-the-dom[How To Take Changes to the DOM], Wir haben erläutert, wie Elemente mit integrierten Methoden aus dem Document Object Model (DOM) erstellt, eingefügt, ersetzt und entfernt werden. Indem Sie Ihre Kenntnisse in der Manipulation des DOM verbessern, können Sie die interaktiven Funktionen von JavaScript besser nutzen und Webelemente ändern.

In diesem Lernprogramm erfahren Sie, wie Sie das DOM weiter ändern, indem Sie Stile, Klassen und andere Attribute von HTML-Elementknoten ändern. Auf diese Weise erhalten Sie ein besseres Verständnis für die Bearbeitung wesentlicher Elemente im DOM.

Überprüfung der Auswahl von Elementen

Bis vor kurzem wurde eine beliebte JavaScript-Bibliothek namensjQuery am häufigsten verwendet, um Elemente im DOM auszuwählen und zu ändern. jQuery vereinfachte das Auswählen eines oder mehrerer Elemente und das gleichzeitige Anwenden von Änderungen auf alle Elemente. In „https://www.digitalocean.com/community/tutorials/how-to-access-elements-in-the-dom[How To Access Elements in the DOM“ (Zugriff auf Elemente im DOM) haben wir die DOM-Methoden für das Greifen und Arbeiten überprüft Knoten in Vanille JavaScript.

Zur Überprüfung sinddocument.querySelector() unddocument.getElementById() die Methoden, mit denen auf ein einzelnes Element zugegriffen wird. Wenn Sie im folgenden Beispiel eindiv mit einemid-Attribut verwenden, können Sie auf beide Arten auf dieses Element zugreifen.

Demo ID

DiequerySelector()-Methode ist insofern robuster, als sie ein Element auf der Seite mit einem beliebigen Auswahltyp auswählen kann.

// Both methods will return a single element
const demoId = document.querySelector('#demo-id');

Wenn Sie auf ein einzelnes Element zugreifen, können Sie einen Teil des Elements, z. B. den darin enthaltenen Text, problemlos aktualisieren.

// Change the text of one element
demoId.textContent = 'Demo ID text updated.';

Wenn Sie jedoch mit einem gemeinsamen Selektor, z. B. einer bestimmten Klasse, auf mehrere Elemente zugreifen, müssen Sie alle Elemente in der Liste durchlaufen. Im folgenden Code haben wir zweidiv-Elemente mit einem gemeinsamen Klassenwert.

Demo Class 1
Demo Class 2

Wir werdenquerySelectorAll() verwenden, um alle Elemente mitdemo-class zu erfassen, undforEach(), um sie zu durchlaufen und eine Änderung anzuwenden. Es ist auch möglich, auf ein bestimmtes Element mitquerySelectorAll() zuzugreifen, wie Sie es mit einem Array tun würden - unter Verwendung der Klammernotation.

// Get a NodeList of all .demo elements
const demoClasses = document.querySelectorAll('.demo-class');

// Change the text of multiple elements with a loop
demoClasses.forEach(element => {
  element.textContent = 'All demo classes updated.';
});

// Access the first element in the NodeList
demoClasses[0];

Dies ist einer der wichtigsten Unterschiede beim Übergang von jQuery zu Vanille-JavaScript. Viele Beispiele zum Ändern von Elementen erklären nicht, wie diese Methoden und Eigenschaften auf mehrere Elemente angewendet werden.

Die Eigenschaften und Methoden in diesem Artikel werden häufig anevent listeners angehängt, um auf Klicks, Hovers oder andere Auslöser zu reagieren.

[.note] #Note: Die MethodengetElementsByClassName() undgetElementsByTagName() geben HTML-Sammlungen zurück, die keinen Zugriff auf dieforEach()-Methode vonquerySelectorAll() haben. In diesen Fällen müssen Sie einen Standardfor loop verwenden, um die Sammlung zu durchlaufen.
#

Attribute ändern

Attribute sind Werte, die zusätzliche Informationen zu HTML-Elementen enthalten. Sie kommen normalerweise inname/value Paaren vor und können je nach Element wesentlich sein.

Einige der häufigsten HTML-Attribute sind dassrc-Attribut einesimg-Tags, dashref einesa-Tags,class,id undstyle. Eine vollständige Liste der HTML-Attribute finden Sie inattribute listim Mozilla Developer Network. Benutzerdefinierte Elemente, die nicht Teil des HTML-Standards sind, werden mitdata- vorangestellt.

In JavaScript gibt es vier Methoden zum Ändern von Elementattributen:

Methode Beschreibung Beispiel

Methode	Beschreibung	Beispiel
`hasAttribute()`	Gibt einen`true` oder`false` Booleschen Wert zurück	`element.hasAttribute('href');`
`getAttribute()`	Gibt den Wert eines angegebenen Attributs oder`null` zurück	`element.getAttribute('href');`
`setAttribute()`	Fügt den Wert eines angegebenen Attributs hinzu oder aktualisiert ihn	`element.setAttribute('href', 'index.html');`
`removeAttribute()`	Entfernt ein Attribut aus einem Element	`element.removeAttribute('href');`

hasAttribute()

Gibt einentrue oderfalse Booleschen Wert zurück

element.hasAttribute('href');

getAttribute()

Gibt den Wert eines angegebenen Attributs odernull zurück

element.getAttribute('href');

setAttribute()

Fügt den Wert eines angegebenen Attributs hinzu oder aktualisiert ihn

element.setAttribute('href', 'index.html');

removeAttribute()

Entfernt ein Attribut aus einem Element

element.removeAttribute('href');

Erstellen wir eine neue HTML-Datei mit einemimg-Tag mit einem Attribut. Wir stellen einen Link zu einem öffentlichen Bild her, das über eine URL verfügbar ist. Sie können es jedoch gegen ein alternatives lokales Bild austauschen, wenn Sie offline arbeiten.

attributes.html

Wenn Sie die obige HTML-Datei in einen modernen Webbrowser laden und die integriertenDeveloper Console öffnen, sollte Folgendes angezeigt werden:

First rendering of classes.html

Jetzt können wir alle Attributmethoden im laufenden Betrieb testen.

// Assign image element
const img = document.querySelector('img');

img.hasAttribute('src');                // returns true
img.getAttribute('src');                // returns "...shark.png"
img.removeAttribute('src');             // remove the src attribute and value

Zu diesem Zeitpunkt haben Sie das Attributsrc und den mitimg verknüpften Wert entfernt. Sie können dieses Attribut jedoch zurücksetzen und den Wert einem alternativen Bild mitimg.setAttribute() zuweisen:

img.setAttribute('src', 'https://js-tutorials.nyc3.digitaloceanspaces.com/octopus.png');

Second rendering of classes.html

Schließlich können wir das Attribut direkt ändern, indem wir dem Attribut als Eigenschaft des Elements einen neuen Wert zuweisen und diesrc auf dieshark.png-Datei zurücksetzen

img.src = 'https://js-tutorials.nyc3.digitaloceanspaces.com/shark.png';

Jedes Attribut kann auf diese Weise sowie mit den oben genannten Methoden bearbeitet werden.

Die MethodenhasAttribute() undgetAttribute() werden normalerweise mitconditional statements verwendet, und die MethodensetAttribute() undremoveAttribute() werden verwendet, um das DOM direkt zu modifizieren.

Klassen ändern

Das Attributclass entsprichtCSS class selectors. Dies ist nicht zu verwechseln mitES6 classes, einer speziellen Art von JavaScript-Funktion.

CSS-Klassen werden verwendet, um Stile auf mehrere Elemente anzuwenden, im Gegensatz zu IDs, die nur einmal pro Seite vorhanden sein können. In JavaScript haben wir die EigenschaftenclassName undclassList, um mit dem Klassenattribut zu arbeiten.

Method/Property Beschreibung Beispiel

Method/Property	Beschreibung	Beispiel
`className`	Ruft den Klassenwert ab oder legt diesen fest	`element.className;`
`classList.add()`	Fügt einen oder mehrere Klassenwerte hinzu	`element.classList.add('active');`
`classList.toggle()`	Schaltet eine Klasse ein oder aus	`element.classList.toggle('active');`
`classList.contains()`	Überprüft, ob ein Klassenwert vorhanden ist	`element.classList.contains('active');`
`classList.replace()`	Ersetzen Sie einen vorhandenen Klassenwert durch einen neuen Klassenwert	`element.classList.replace('old', 'new');`
`classList.remove()`	Entfernen Sie einen Klassenwert	`element.classList.remove('active');`

className

Ruft den Klassenwert ab oder legt diesen fest

element.className;

classList.add()

Fügt einen oder mehrere Klassenwerte hinzu

element.classList.add('active');

classList.toggle()

Schaltet eine Klasse ein oder aus

element.classList.toggle('active');

classList.contains()

Überprüft, ob ein Klassenwert vorhanden ist

element.classList.contains('active');

classList.replace()

Ersetzen Sie einen vorhandenen Klassenwert durch einen neuen Klassenwert

element.classList.replace('old', 'new');

classList.remove()

Entfernen Sie einen Klassenwert

element.classList.remove('active');

Wir werden eine weitere HTML-Datei erstellen, um mit den Klassenmethoden zu arbeiten, mit zwei Elementen und einigen Klassen.

classes.html








    Div 1
    Div 2

Wenn Sie die Dateiclasses.html in einem Webbrowser öffnen, sollten Sie ein Rendering erhalten, das wie folgt aussieht:

First rendering of classes.html

Die EigenschaftclassName wurde eingeführt, um Konflikte mit dem Schlüsselwortclassin JavaScript und anderen Sprachen, die Zugriff auf das DOM haben, zu vermeiden. MitclassName können Sie der Klasse direkt einen Wert zuweisen.

// Select the first div
const div = document.querySelector('div');

// Assign the warning class to the first div
div.className = 'warning';

Wir haben die in den CSS-Werten vonclasses.html definierte Klassewarning den erstendiv zugewiesen. Sie erhalten folgende Ausgabe:

Second rendering of classes.html

Beachten Sie, dass das Element überschrieben wird, wenn bereits Klassen für das Element vorhanden sind. Sie können mit der EigenschaftclassNamemehrere durch Leerzeichen getrennte Klassen hinzufügen oder sie ohne Zuweisungsoperatoren verwenden, um den Wert der Klasse für das Element abzurufen.

Die andere Möglichkeit, Klassen zu ändern, besteht in der EigenschaftclassList, die einige hilfreiche Methoden enthält. Diese Methoden ähneln den Methoden jQueryaddClass,removeClass undtoggleClass.

// Select the second div by class name
const activeDiv = document.querySelector('.active');

activeDiv.classList.add('hidden');                // Add the hidden class
activeDiv.classList.remove('hidden');             // Remove the hidden class
activeDiv.classList.toggle('hidden');             // Switch between hidden true and false
activeDiv.classList.replace('active', 'warning'); // Replace active class with warning class

Nachdem Sie die oben genannten Methoden ausgeführt haben, sieht Ihre Webseite folgendermaßen aus:

Final rendering of classes.html

Anders als im Beispiel vonclassNamewird durch die Verwendung vonclassList.add() eine neue Klasse zur Liste der vorhandenen Klassen hinzugefügt. Sie können auch mehrere Klassen als durch Kommas getrennte Zeichenfolgen hinzufügen. Es ist auch möglich,setAttribute zu verwenden, um die Klasse eines Elements zu ändern.

Stile ändern

Die Eigenschaftstyle repräsentiert die Inline-Stile eines HTML-Elements. Oft werden Stile über ein Stylesheet auf Elemente angewendet, wie wir es zuvor in diesem Artikel getan haben, aber manchmal müssen wir einen Inline-Stil direkt hinzufügen oder bearbeiten.

Wir werden ein kurzes Beispiel erstellen, um Bearbeitungsstile mit JavaScript zu demonstrieren. Unten finden Sie eine neue HTML-Datei mitdiv, auf die einige Inline-Stile angewendet werden, um ein Quadrat anzuzeigen.

styles.html

Div

Beim Öffnen in einem Webbrowser sehen diestyles.html ungefähr so aus:

First rendering of styles.html

Eine Option zum Bearbeiten der Stile istsetAttribute().

// Select div
const div = document.querySelector('div');

// Apply style to div
div.setAttribute('style', 'text-align: center');

Dadurch werden jedoch alle vorhandenen Inline-Stile aus dem Element entfernt. Da dies wahrscheinlich nicht der beabsichtigte Effekt ist, ist es besser, das Attributstyledirekt zu verwenden

div.style.height = '100px';
div.style.width = '100px';
div.style.border = '2px solid black';

CSS-Eigenschaften werden in Kebab-Groß- und Kleinbuchstaben geschrieben, die durch Bindestriche voneinander getrennt sind. Es ist wichtig zu beachten, dass CSS-Eigenschaften in Kebab-Groß- / Kleinschreibung nicht für die JavaScript-Stileigenschaft verwendet werden können. Stattdessen werden sie durch ihre camelCase-Entsprechung ersetzt. Dies ist der Fall, wenn das erste Wort in Kleinbuchstaben geschrieben ist und alle nachfolgenden Wörter groß geschrieben werden. Mit anderen Worten, anstelle vontext-align verwenden wirtextAlign für die JavaScript-Stileigenschaft.

// Make div into a circle and vertically center the text
div.style.borderRadius = '50%';
div.style.display = 'flex';
div.style.justifyContent = 'center';
div.style.alignItems = 'center';

Nach Abschluss der obigen Stiländerungen wird beim endgültigen Rendern vonstyles.html ein Kreis angezeigt:

Final rendering of styles.html

Wenn auf ein Element viele stilistische Änderungen angewendet werden sollen, empfiehlt es sich, die Stile auf eine Klasse anzuwenden und eine neue Klasse hinzuzufügen. In einigen Fällen ist es jedoch erforderlich oder einfacher, das Inline-Stilattribut zu ändern.

Fazit

HTML-Elementen werden häufig zusätzliche Informationen in Form von Attributen zugewiesen. Attribute können aus Name / Wert-Paaren bestehen, und einige der häufigsten Attribute sindclass undstyle.

In diesem Lernprogramm haben wir gelernt, wie Sie mit einfachem JavaScript auf Attribute eines HTML-Elements im DOM zugreifen, diese ändern und entfernen. Wir haben auch gelernt, wie man CSS-Klassen für ein Element hinzufügt, entfernt, umschaltet und ersetzt und wie man Inline-CSS-Stile bearbeitet. Weitere Informationen finden Sie in der Dokumentation zuattributes im Mozilla Developer Network.

TOC