DomTokenList::add 메서드 사용 방법에 대한 질문

• 스레드마스터 3일 전 2025.03.31 06:25
• 3
  1

html

Hello World!

javascript

const div = document.querySelector('div');

const tokenList = div.classList;

tokenList.add('class1');

javascript

tokenList.add('class2');

javascript

tokenList.remove('class2');

javascript

tokenList.add('class2');

tokenList.add('class3');

javascript

tokenList.add('class2');

tokenList.add('class3');

tokenList.remove('class2');

목록

댓글 1

댓글목록



나우호스팅 　3일 전



DomTokenList::add 메서드는 HTML 요소의 클래스를 추가하는 데 사용됩니다.

클래스 이름을 넣어도 됩니다. 예를 들어, 다음과 같은 코드가 있습니다.



#hostingforum.kr
javascript

const div = document.querySelector('div');

const tokenList = div.classList;

tokenList.add('class1');

Copy



이 코드는 class1 클래스를 추가합니다.

만약에 class1 클래스를 추가한 후에 class2 클래스를 추가하고 싶다면, 다음과 같이 코드를 작성합니다.



#hostingforum.kr
javascript

tokenList.add('class2');

Copy



만약에 class1 클래스를 추가한 후에 class2 클래스를 제거하고 싶다면, 다음과 같이 코드를 작성합니다.



#hostingforum.kr
javascript

tokenList.remove('class2');

Copy



만약에 class1 클래스를 추가한 후에 class2 클래스와 class3 클래스를 추가하고 싶다면, 다음과 같이 코드를 작성합니다.



#hostingforum.kr
javascript

tokenList.add('class2');

tokenList.add('class3');

Copy



만약에 class1 클래스를 추가한 후에 class2 클래스와 class3 클래스를 추가하고 class2 클래스를 제거하고 싶다면, 다음과 같이 코드를 작성합니다.



#hostingforum.kr
javascript

tokenList.add('class2');

tokenList.add('class3');

tokenList.remove('class2');

Copy



만약에 class1 클래스를 추가한 후에 class2 클래스와 class3 클래스를 추가하고 class1 클래스를 제거하고 싶다면, 다음과 같이 코드를 작성합니다.



#hostingforum.kr
javascript

tokenList.add('class2');

tokenList.add('class3');

tokenList.remove('class1');

Copy



만약에 class1 클래스를 추가한 후에 class2 클래스와 class3 클래스를 추가하고 class1 클래스를 제거하고 싶다면, 다음과 같이 코드를 작성합니다.



#hostingforum.kr
javascript

tokenList.add('class2');

tokenList.add('class3');

tokenList.delete('class1');

Copy



DomTokenList::add 메서드는 클래스 이름을 넣어도 되며, 특정한 형식으로 넣어야 할 필요는 없습니다.

2025-03-31 06:26

<br /> <br /> DomTokenList::add 메서드는 HTML 요소의 클래스를 추가하는 데 사용됩니다. <br /> <br /> 클래스 이름을 넣어도 됩니다. 예를 들어, 다음과 같은 코드가 있습니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const div = document.querySelector('div');<br /> const tokenList = div.classList;<br /> tokenList.add('class1');<br /> [/code]<br /> <br /> 이 코드는 class1 클래스를 추가합니다. <br /> <br /> 만약에 class1 클래스를 추가한 후에 class2 클래스를 추가하고 싶다면, 다음과 같이 코드를 작성합니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> tokenList.add('class2');<br /> [/code]<br /> <br /> 만약에 class1 클래스를 추가한 후에 class2 클래스를 제거하고 싶다면, 다음과 같이 코드를 작성합니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> tokenList.remove('class2');<br /> [/code]<br /> <br /> 만약에 class1 클래스를 추가한 후에 class2 클래스와 class3 클래스를 추가하고 싶다면, 다음과 같이 코드를 작성합니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> tokenList.add('class2');<br /> tokenList.add('class3');<br /> [/code]<br /> <br /> 만약에 class1 클래스를 추가한 후에 class2 클래스와 class3 클래스를 추가하고 class2 클래스를 제거하고 싶다면, 다음과 같이 코드를 작성합니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> tokenList.add('class2');<br /> tokenList.add('class3');<br /> tokenList.remove('class2');<br /> [/code]<br /> <br /> 만약에 class1 클래스를 추가한 후에 class2 클래스와 class3 클래스를 추가하고 class1 클래스를 제거하고 싶다면, 다음과 같이 코드를 작성합니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> tokenList.add('class2');<br /> tokenList.add('class3');<br /> tokenList.remove('class1');<br /> [/code]<br /> <br /> 만약에 class1 클래스를 추가한 후에 class2 클래스와 class3 클래스를 추가하고 class1 클래스를 제거하고 싶다면, 다음과 같이 코드를 작성합니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> tokenList.add('class2');<br /> tokenList.add('class3');<br /> tokenList.delete('class1');<br /> [/code]<br /> <br /> DomTokenList::add 메서드는 클래스 이름을 넣어도 되며, 특정한 형식으로 넣어야 할 필요는 없습니다.