HTML DOMTokenList reference manual

DOMTokenList

DOMTokenList Is a set of space-separated tokens.

DOMTokenList can be accessed by index (starting from 0).

length propertyReturn the number of tokens in the DOMTokenList.

Note:HTML element's classList propertyRepresents a DOMTokenList.

DOMTokenList properties and methods

Name Description
add() Add one or more tokens to the list.
contains() Return true if the list contains a class.
entries() Return an iterator with key/value pairs from the list.
forEach() forEach()
Εκτέλεση μιας συνάρτησης callback για κάθε σημαία στη λίστα. item()
Επιστροφή της σημαίας στη θέση του καθορισμένου δείκτη. keys()
Επιστροφή ενός αναγνώστη που περιλαμβάνει τα κλειδιά της λίστας. length
Επιστροφή του αριθμού των σημάνσεων στη λίστα. remove()
Αφαίρεση μιας ή περισσότερων σημάνσεων από τη λίστα. replace()
Αντικατάσταση σημάνσεων στη λίστα. supports()
Επιστροφή του true αν η σημαία είναι μια από τις υποστηριζόμενες σημαίες του χαρακτηριστικού. toggle()
Εναλλαξή μεταξύ των σημάνσεων στη λίστα. value
Αποδώστε τη λίστα των σημάνσεων ως αλφαριθμητική ακολουθία. values()

παράδειγμα

παράδειγμα 1

Αποδώστε έναν αναγνώστη που περιλαμβάνει τις τιμές της λίστας.

Προσθέστε την κλάση "myStyle" στο στοιχείο:

Δοκιμάστε το προσωπικά

παράδειγμα 2

Αφαιρέστε την κλάση "myStyle" από το στοιχείο:

element.classList.remove("myStyle");

Δοκιμάστε το προσωπικά

παράδειγμα 3

Ανοίξτε και κλείστε το "myStyle":

element.classList.toggle("myStyle");

Δοκιμάστε το προσωπικά

Παρέχονται περισσότερα παραδείγματα στο κάτω μέρος της σελίδας.

Δεν είναι array

Το DOMTokenList δεν είναι array!

Το DOMTokenList φαίνεται να είναι όπως ένα array, αλλά στην πραγματικότητα δεν είναι.

Μπορείτε να περιηγηθείτε στο DOMTokenList και να χρησιμοποιήσετε τις索引 για τις σημάνσεις του.

Αλλά δεν μπορείτε να χρησιμοποιήσετε μεθόδουςARRY στο DOMTokenList, όπως push(), pop() ή join().

παράδειγμα

παράδειγμα 1

Προσθέστε πολλαπλές κλάσεις στο στοιχείο:

element.classList.add("myStyle", "anotherClass", "thirdClass");

Δοκιμάστε το προσωπικά

παράδειγμα 2

Αφαιρέστε πολλαπλές κλάσεις από το στοιχείο:

element.classList.remove("myStyle", "anotherClass", "thirdClass");

Δοκιμάστε το προσωπικά

παράδειγμα 3

Αποκτήστε τον αριθμό των κλάσεων του στοιχείου:

let numb = element.classList.length;

Δοκιμάστε το προσωπικά

παράδειγμα 4

Αποκτήστε το όνομα της κλάσης του στοιχείου "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Είμαι το myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Δοκιμάστε το προσωπικά

παράδειγμα 5

Λάβετε την πρώτη κλάση του στοιχείου:

let className = element.classList.item(0);

Δοκιμάστε το προσωπικά

Παράδειγμα 6

Έχει το στοιχείο την κλάση "myStyle";

let x = element.classList.contains("myStyle");

Δοκιμάστε το προσωπικά

Παράδειγμα 7

Αφαιρέστε την κλάση "anotherClass" αν το στοιχείο έχει την κλάση "myStyle":

αν element.classList.contains("mystyle")) {
  element.classList.remove("anotherClass");
}

Δοκιμάστε το προσωπικά

Παράδειγμα 8

Εναλλαγή κλάσεων για τη δημιουργία του κουμπιού αναστροφής:

document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

Δοκιμάστε το προσωπικά

Παράδειγμα 9

Δημιουργία στήλης πλοήγησης που κόλληει:

// Λάβετε τη στήλη πλοήγησης
const navbar = document.getElementById("navbar");
// Λάβετε τη θέση της στήλης πλοήγησης
const sticky = navbar.offsetTop;
// Προσθέστε την κλάση sticky στη στήλη πλοήγησης όταν φτάσετε στη θέση της κύλισης
// Αφαιρέστε το όταν τοποθετηθείτε στη θέση του κύλισης
function myFunction() {
  αν window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  }
    navbar.classList.remove("sticky");
  }
}

Δοκιμάστε το προσωπικά