DOMTokenList 유사 배열 객체

공백으로 구분된 문자열로 표현된 데이터를 정렬하여 토큰 집합으로 만들어 집합을 조작하기 위한 메소드를 제공하는 유사배열 인터페이스이다.

유사 배열 객체는 Array.isArray 메소드로 확인하면 false를 출력한다.
유사 배열 객체는 배열과 관련된 메소드를 같이 상속받아서 배열처럼 동작한다 (ex. forEach).
class의 대소문자를 구분한다.

Element.classList
HTMLLinkElement.relList (en-US)
HTMLAnchorElement.relList (en-US)
HTMLAreaElement.relList (en-US)
HTMLIframeElement.sandbox, or HTMLOutputElement.htmlFor

MDN 문서 : https://developer.mozilla.org/ko/docs/Web/API/DOMTokenList

DOMTokenList Method

DOMTokenList.item()

Returns an item in the list by its index (returns undefined if the number is greater than or equal to the length of the list).
특정 index에 위치한 class를 String 형태로 리턴

DOMTokenList.contains()

Returns true if the list contains the given token, otherwise false.
특정 token이 있는지 확인하고 Boolean 값을 리턴

DOMTokenList.add()

Adds the given token to the list.
특정 token을 추가. 이미 존재하는 token은 무시.

DOMTokenList.remove()

Removes the specified token from the list.
특정 token 삭제

DOMTokenList.replace()

Replaces an existing token with a new token.
특정 token을 새로운 이름으로 전환
ex) elIdFailureOnlyEngNum.classList.replace("hide", "dodo")

DOMTokenList.supports()

Returns true if a given token is in the associated attribute's supported tokens.

DOMTokenList.toggle()

Removes a given token from the list and returns false. If token doesn't exist it's added and the function returns true.
특정 token이 있다면 제거하고 false 리턴, 없다면 추가하고 true 리턴
ex) elIdFailureOnlyEngNum.classList.toggle("dodo")

DOMTokenList.entries()

Returns an iterator allowing you to go through all key/value pairs contained in this object.
DOMTokenList를 iterator하게 바꿔주는 메소드. 실제로 배열이 되는 것은 아니다.

참조 URL : https://pks2974.medium.com/javascript와-iterator-cdee90b11c0f

elIdFailureFirstCharEng
<div class="id-failure-first-char-eng hide">첫 글자는 영어만 입력할 수 있습니다.</div>

arr = elIdFailureFirstCharEng.classList.entries()
Array Iterator {}

for (let i of arr) console.log(i);
VM1274:1 (2) [0, "id-failure-first-char-eng"]
VM1274:1 (2) [1, "hide"]
undefined

for (let i of elIdFailureFirstCharEng.classList) console.log(i);
VM2149:1 id-failure-first-char-eng
VM2149:1 hide

Array.isArray(arr)
false

DOMTokenList.forEach()

Executes a provided function once per DOMTokenList element.
Token을 하나씩 순회하면서 함수를 실행한다.

elIdFailureFirstCharEng.classList
DOMTokenList(2) ["id-failure-first-char-eng", "hide", value: "id-failure-first-char-eng hide"]

elIdFailureFirstCharEng.classList.forEach( function (value, key) {
console.log('key: ' + key)
console.log('value: ' + value)
console.log('this: ' + this)
}, "arg")

VM3008:2 key: 0
VM3008:3 value: id-failure-first-char-eng
VM3008:4 this: arg
VM3008:2 key: 1
VM3008:3 value: hide
VM3008:4 this: arg

DOMTokenList.keys()

Returns an [iterator](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols) allowing you to go through all keys of the key/value pairs contained in this object.
Token의 key값을 iterator하게 반환함

for (i of elFailureMessage.classList.keys()) console.log(i);
VM3216:1 0
VM3216:1 1

DOMTokenList.values()

Returns an iterator allowing you to go through all values of the key/value pairs contained in this object.
Token의 value를 iterator하게 반환함

for (i of elFailureMessage.classList.values()) console.log(i);
VM3232:1 failure-message
VM3232:1 hide