HTML DOMTokenList 참조서

DOMTokenList

DOMTokenList 공백으로 구분된 토큰 집합입니다.

DOMTokenList을 인덱스로 접근할 수 있습니다. (0부터 시작)

length 속성DOMTokenList에서 토큰의 수를 반환합니다.

주의사항:HTML 요소의 classList 속성DOMTokenList을 나타냅니다.

DOMTokenList 속성 및 메서드

이름 설명
add() 한 개나 많이 토큰을 리스트에 추가합니다.
contains() 리스트에 클래스가 포함되어 있으면 true를 반환합니다.
entries() 리스트에서 키/값 쌍을 가진 이터레이터를 반환합니다.
forEach() 리스트의 각 토큰에 대해 콜백 함수를 실행합니다。
item() 지정된 인덱스의 토큰을 반환합니다。
keys() 리스트의 키를 포함한 이터레이터를 반환합니다。
length 리스트의 토큰 수를 반환합니다。
remove() 리스트에서 하나나 여러 토큰을 제거합니다。
replace() 리스트의 토큰을 대체합니다。
supports() 데이터 속성이 지원하는 토큰 중 하나라면 true를 반환합니다。
toggle() 리스트의 토큰 사이에서 전환합니다。
value 토큰 목록을 문자열 형식으로 반환합니다。
values() 리스트에 있는 값을 가진 이터레이터를 반환합니다。

인스턴스

예제 1

요소에 "myStyle" 클래스를 추가합니다：

element.classList.add("myStyle");

직접 테스트해보세요

예제 2

요소에서 "myStyle" 클래스를 제거합니다：

element.classList.remove("myStyle");

직접 테스트해보세요

예제 3

"myStyle"을 열고 닫습니다：

element.classList.toggle("myStyle");

직접 테스트해보세요

页面下方提供更多实例。

아니数组

DOMTokenList는 배열이 아닙니다！

DOMTokenList는 배열처럼 보일 수 있지만 실제로는 그렇지 않습니다。

DOMTokenList를 순회하며 인덱스를 사용하여 토큰을 참조할 수 있습니다。

하지만 DOMTokenList에서 Array 메서드를 사용할 수 없습니다. 예를 들어 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>I am 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

요소에 "myStyle" 클래스가 있으면 "anotherClass"를 제거합니다:

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

직접 테스트해보세요

예제 8

클래스 사이에서 전환하여 드롭다운 버튼을 생성합니다:

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

직접 테스트해보세요

예제 9

sticky 네비게이션 바 생성:

// 네비게이션 바를 가져옵니다
const navbar = document.getElementById("navbar");
// 네비게이션 바의 위치를 가져옵니다
const sticky = navbar.offsetTop;
// 스크롤 위치에 도착하면 sticky 클래스를 네비게이션 바에 추가합니다
// 스크롤 위치를 벗어났을 때 제거합니다
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

직접 테스트해보세요