Dokumentacja referencyjna dla HTML DOMTokenList

DOMTokenList

DOMTokenList To zestaw tokenów rozdzielonych spacjami.

DOMTokenList można dostępować za pomocą indeksu (zaczynając od 0).

Atrybut lengthZwraca liczbę tokenów w DOMTokenList.

Uwaga:Elementu HTML Atrybut classListReprezentuje DOMTokenList.

Atrybuty i metody DOMTokenList

Nazwa Opis
add() Dodaje jeden lub kilka tokenów do listy.
contains() Zwraca true, jeśli lista zawiera klasę.
entries() Zwraca iterator zawierający pary klucz-wartość z listy.
forEach() Wykonaj funkcję zwrotną dla każdego tokena na liście.
item() Zwróć token na określonym indeksie.
keys() Zwróć iterator zawierający klucze z listy.
length Zwróć liczbę tokenów w liście.
remove() Usuń jeden lub więcej tokenów z listy.
replace() Zastąp token w liście.
supports() Zwróć true, jeśli token jest jednym z tokenów wspieranych przez atrybut.
toggle() Przełącz między tokenami na liście.
value Zwróć listę tokenów jako ciąg znaków.
values() Zwróć iterator z wartościami listy.

Przykład

Przykład 1

Dodaj klasę "myStyle" do elementu:

element.classList.add("myStyle");

Spróbuj sam

Przykład 2

Usuń klasę "myStyle" z elementu:

element.classList.remove("myStyle");

Spróbuj sam

Przykład 3

Otwórz i zamknij "myStyle":

element.classList.toggle("myStyle");

Spróbuj sam

Poniżej znajdują się więcej przykładów.

Nie jest tablicą

DOMTokenList nie jest tablicą!

DOMTokenList może wyglądać jak tablica, ale to nie jest prawda.

Możesz przechodzić przez DOMTokenList i używać indeksów do odniesienia do jego tokenów.

Ale nie możesz używać metod tablicowych na DOMTokenList, takich jak push(), pop() lub join().

Przykład

Przykład 1

Dodaj wiele klas do elementu:

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

Spróbuj sam

Przykład 2

Usuń wiele klas z elementu:

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

Spróbuj sam

Przykład 3

Uzyskaj liczbę klas elementu:

let numb = element.classList.length;

Spróbuj sam

Przykład 4

Uzyskaj nazwę klasy elementu "myDIV":

<div id="myDIV" class="myStyle anotherClass thirdClass">
<p>Jestem myDIV.</p>
</div>
const list = document.getElementById("myDIV").classList;

Spróbuj sam

Przykład 5

Pobierz pierwszą klasę elementu:

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

Spróbuj sam

Przykład 6

Czy element ma klasę "myStyle"?

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

Spróbuj sam

Przykład 7

Jeśli element ma klasę "myStyle", usuń "anotherClass":

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

Spróbuj sam

Przykład 8

Przełączaj między klasami, aby utworzyć przycisk rozwijany:

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

Spróbuj sam

Przykład 9

Utwórz nawigację przylegającą:

// Pobierz pasek nawigacyjny
const navbar = document.getElementById("navbar");
// Pobierz pozycję offsetową paska nawigacyjnego
const sticky = navbar.offsetTop;
// Dodaj klasę sticky do paska nawigacyjnego, gdy docierasz do jego pozycji przewijania
// Usuń element, gdy opuszczasz pozycję przewijania
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

Spróbuj sam