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

 

Javascript에서

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

 

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

 

 

getElementsByClassName()

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

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

HTMLCollection 형태로 리턴합니다.

 

  예제 - getElementsByClassName()  

<div class='green underline'>수박</div>
<div class='red underline'>사과</div>
<div class='purple'>포도</div>

.green {
  color : green;
}

.red {
  color: red;
}

.purple {
  color: purple;
}

.underline {
  text-decoration: underline;
}

// class 이름으로 element 목록 조회
const elements 
  = document.getElementsByClassName('underline');

document.write('========== 결과 ========== <br>');

// getElementsByClassName()은
// HTMLCollection 객체를 리턴합니다.
document.write('getElementsByClassName()이 가져온 값 : ');
document.write(elements + '<br><br>');

// HTMLCollection 객체에는 조회한 클래스가 포함된
// element 목록이 들어있습니다.
document.write('elements HTMLCollection 객체의 항목 : <br>');
for(let i=0; i < elements.length; i++)  {
  document.write(elements[i].innerText + '<br>');
}

 document.getElementsByClassName('underline');

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

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

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

 

 

  예제 - 다중 조건  

<div class='green underline'>수박</div>
<div class='red underline'>사과</div>
<div class='purple'>포도</div>

.green {
  color : green;
}

.red {
  color: red;
}

.purple {
  color: purple;
}

.underline {
  text-decoration: underline;
}

// class 이름으로 element 목록 조회
const elements 
  = document.getElementsByClassName('red underline');

document.write('========== 결과 ========== <br>');

// 파라미터로 2개 이상의 클래스 이름이 전달되면
// 모든 클래스 이름이 들어가는 element가 조회됩니다.
document.write('elements HTMLCollection 객체의 항목 : <br>');
for(let i=0; i < elements.length; i++)  {
  document.write(elements[i].innerText + '<br>');
}

document.getElementsByClassName('red underline');

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

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

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

 

 

 

querySelector()

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

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

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

 

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

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

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

 

  예제 - querySelector()  

<div class='green underline'>수박</div>
<div class='red underline'>사과</div>
<div class='purple'>포도</div>

.green {
  color : green;
}

.red {
  color: red;
}

.purple {
  color: purple;
}

.underline {
  text-decoration: underline;
}

// class 이름으로 element 단건 조회(첫번째)
const element
  = document.querySelector('.underline');

document.write('========== 결과 ========== <br>');
document.write(element + '<br>');
document.write(element.innerText);

document.querySelector('.underline');

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

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

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

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

 

 

 

querySelectorAll()

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

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

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

querySelector()와 달리 querySelectorAll()은

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

 

  예제 - querySelectorAll()  

<div class='green underline'>수박</div>
<div class='red underline'>사과</div>
<div class='purple'>포도</div>

.green {
  color : green;
}

.red {
  color: red;
}

.purple {
  color: purple;
}

.underline {
  text-decoration: underline;
}

// class 이름으로 element 목록 조회
const elements 
  = document.querySelectorAll('.underline');

document.write('========== 결과 ========== <br>');

// querySelectorAll()은 NodeList를 리턴합니다.
document.write('querySelectorAll() : ');
document.write(elements + '<br><br>');

// NodeList는 조회된 여러건의 element를 가지고 있습니다.
document.write('elements NodeList 객체의 항목 : <br>');
for(let i=0; i < elements.length; i++)  {
  document.write(elements[i].innerText + '<br>');
}

document.querySelectorAll('.underline');

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

NodeList 형태로 리턴합니다.

 

 

  예제 - 다중 조건  

<div class='green underline'>수박</div>
<div class='red underline'>사과</div>
<div class='purple'>포도</div>

.green {
  color : green;
}

.red {
  color: red;
}

.purple {
  color: purple;
}

.underline {
  text-decoration: underline;
}

// class 이름으로 element 목록 조회
const elements 
  = document.querySelectorAll('.underline.red');

document.write('========== 결과 ========== <br>');

// 파라미터로 2개 이상의 클래스 이름이 전달되면
// 모든 클래스 이름이 들어가는 element가 조회됩니다.
document.write('elements NodeList 객체의 항목 : <br>');
for(let i=0; i < elements.length; i++)  {
  document.write(elements[i].innerText + '<br>');
}

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

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

NodeList 형태로 리턴합니다.

 

---

 

클래스 이름을 사용하여

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