[Javascript] 클래스 이름으로 element 찾는 3가지 방법

 

Javascript에서

class 이름으로 element를 찾는 방법은 다음과 같습니다.

 

• getElementsByClassName()
• querySelector()
• querySelectorAll()

 

 

getElementsByClassName()

클래스 이름을 파라미터로 입력받아서

해당 클래스를 가진 모든 element 목록을

HTMLCollection 형태로 리턴합니다.

 

  예제 - getElementsByClassName()  

 document.getElementsByClassName('underline');

'underline'이라는 클래스명을 가진 element를 조회하였습니다.

getElementsByClassName()은 'underline' 클래스를 가지는 모든 element를 조회하여

유사배열객체인 HTMLCollection 객체로 리턴합니다.

 

 

  예제 - 다중 조건  

document.getElementsByClassName('red underline');

클래스 명으로 'red'와 'underline'을 모두 가진 element를 찾아줍니다.

클래스명을 공백으로 구분하여 파라미터로 전달해주면

여러가지 조건을 모두 만족하는 element를 찾을 수 있습니다.

 

 

 

querySelector()

querySelector()는 파라미터로 CSS 선택자를 입력받아

조건에 일치하는 element를 1개만 리턴합니다.

조건에 일치하는 element가 여러개일 경우, 첫번째 element를 리턴합니다.

 

querySelector()는 파라미터로 CSS 선택자를 입력받기 때문에

클래스명으로 element를 조회하는 경우 뿐만 아니라

id, 속성 등 다양한 조건으로 element를 조회할 수 있습니다.

 

  예제 - querySelector()  

document.querySelector('.underline');

클래스 이름으로 element를 조회하기 위해서

파라미터로 CSS 클래스 선택자를 의미하는 '.'으로 시작하는 클래스명을 넣었습니다.

예제에는 underline이라는 클래스명을 가지는 element가 2개 있지만,

querySelector()는 그 중 첫번째 element 하나만을 조회합니다.

 

 

 

querySelectorAll()

querySelectorAll()은 querySelector()와 마찬가지로

파라미터로 CSS 선택자를 입력받아

조건에 일치하는 element를 조회합니다.

querySelector()와 달리 querySelectorAll()은

조건에 일치하는 element 목록 전부를 NodeList 형태로 리턴합니다.

 

  예제 - querySelectorAll()  

document.querySelectorAll('.underline');

'underline'이라는 클래스명을 가진 모든 element를 조회하여

NodeList 형태로 리턴합니다.

 

 

  예제 - 다중 조건  

document.querySelectorAll('.underline.red');

underline과 red라는 클래스명을 가진 element 목록을

NodeList 형태로 리턴합니다.

 

---

 

클래스 이름을 사용하여

dom에서 element를 조회하는 방법을 알아보았습니다.