Detaillierte Erklärung zur Verwendung neuer Methoden von HTML5 zur Manipulation von Elementklassennamen in JavaScript

Früher war die Verarbeitung von JavaScript nicht sehr bequem, da zuerst das Klassenattribut abgerufen und dann die Zeichenfolge verarbeitet werden musste.

Jetzt fügt html5 allen Elementen classList Attribut hinzu, um Klassenattribute zu bearbeiten, was sehr praktisch ist.

1. classList-Attribut

Schauen Sie sich zunächst den folgenden Code an:

<ul Klasse="Navigation">

    <li class="active">Spalte 1</li>

    <li>Spalte 2</li>

    <li>Spalte 3</li>

</ul>

<Skripttyp="text/javascript">

    // Aktuelles Li-Element abrufen let activeLi = document.querySelector(".active");

    // Drucke das classList-Attribut console.log(activeLi.classList)

    // Konsolenausgabe:

    // DOMTokenList ['aktiv', Wert: 'aktiv']

</Skript>

Effekt der Konsolenansicht:

classList-Attributtyp:

classList Attribut ist vom Typ DOMTokenList und die Klassenattribute können über Methoden wie add , contains und remove bedient werden.

• add(value) fügt einen neuen Klassennamen hinzu.
• contains(value) Ob es den Klassennamen enthält.
• remove(value) löscht den Klassennamen.
• toggle(value) Wenn der Klassenname existiert, entfernen Sie ihn, andernfalls fügen Sie ihn hinzu.

2. Praktische Anwendung

In der Praxis ist die Spaltenumschaltung eine sehr häufige Anwendung. Wenn Sie mit dem obigen Beispiel fortfahren, verschieben Sie beim Klicken auf eine Spalte active Spalte in die entsprechende Spalte.

<ul Klasse="Navigation">

    <li class="item active">Spalte 1</li>

    <li class="item">Spalte 2</li>

    <li class="item">Spalte 3</li>

</ul>

 

<Skripttyp="text/javascript">

    let currentElement = document.querySelector(".nav").firstElementChild;

    // Durchlaufe die li-Elemente und setze das Klickereignis while (currentElement) {

        aktuellesElement.onclick = Funktion() {

            // Entfernen Sie die aktive li

            document.querySelector(".active").classList.remove("active");

            // Die aktuelle li-Klasse fügt aktive

            this.classList.add("aktiv");

        }

        aktuellesElement = aktuellesElement.nächstesElementGeschwister;

    }

</Skript>

Dies erleichtert die Implementierung, ohne dass andere Klassennamen beeinträchtigt werden.

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung, wie man die neue Methode von html5 verwendet, um Elementklassennamen in JavaScript zu bearbeiten. Weitere relevante Inhalte zur Verwendung der neuen Methode von html5 zum Bearbeiten von Elementklassennamen in JavaScript finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!