[JavaScript] QuerySelector(), QuerySelectorAll() , ClassList 추가/ 삭제

 

1. QuerySelector()

 

DOM에서 원하는 element를 찾기 위해서 querySelector() 를 사용한다.

파라미터로 입력받은 CSS선택자를 사용해서 element를 찾아준다.

 

파라미터로 입력받은 CSS 선택자로 찾은 여러개의 element 중 첫번째 element를 리턴합니다.

 

 

2. QuerySelectorAll()

 

사용법은 QuerySelector()와 동일하다.

차이점은 CSS선택자로 찾은 모든 element 목록을 리턴합니다.

 

 

3. ClassList

 

1) ClassList 추가

 

해당 요소의 클래스 속성값을 추가한다.

동일 클래스명이 존재하면 무시한다.

 

const rows = document.querySelector('.sample');
rows.classList.add('test');

 

 

2) ClassList 삭제

 

해당 요소의 클래스 속성값을 삭제한다.

동일 클래스명이 존재하면 무시한다.

 

const rows = document.querySelector('.sample');
rows.classList.remove('test');

 

 

,를 이용해 여러 개 추가 / 삭제가 가능하다.

 

 

 

3) ClassList Toggle - 추가 / 삭제 반복

 

true / false 값을 이용하여

속성값이 없는 경우 추가 / 없을 경우 삭제를 반복한다.

 

const rows = document.querySelector('.sample');
rows.classList.toggle('test');

 

 

3) ClassList Contains - 특정 이름이 있는지 찾기

 

특정 클래스 이름이 element의 class 속성에 포함되어 있는지 확인한다.

해당 속성이 포함되어 있으면 true를 리턴하고, 포함되어 있지 않으면 false를 리턴한다.

 

const rows = document.querySelector('.sample');
rows.classList.contains('test');

 

 

4) ClassList Replace - Class 변경

 

기존 클래스명을 새로운 클래스명으로 변경한다.

 

const rows = document.querySelector('.sample');
rows.classList.replace('test');