[Javascript] 선택자, DOM 특정 요소(element) 찾기

 

Javascript에서 DOM의 특정 요소(element)를 찾는 방법을 정리합니다.

 

1. getElementById()
2. getElementsByClassName()
3. getElementByTagName()
4. querySelector()
5. querySelectorAll()

 

 

1. getElementById()

<div id='div_1'>
  Div1입니다.
</div>
<div id='div_2'>
  Div2입니다.
</div>
<input type='button'
       value='getElementById() - id로 찾기'
       onclick='getDiv1()'/>

function getDiv1() {
  const div1 = document.getElementById('div_1');
  alert(div1.innerText);
} 

 

document.getElementById();

파라미터로 찾으려는 id를 전달하여, 해당 element를 찾을 수 있습니다.

id는 유일한 값이므로, 하나의 element만 리턴합니다.

 

 

2. getElementsByClassName()

<div id='div_1' class='my_class'>
  Div1입니다.
</div>
<div id='div_2' class='my_class'>
  Div2입니다.
</div>
<div id='div_3' class='your_class'>
  Div3입니다.
</div>
<input type='button'
       value='getElementsByClassName() - class이름으로 찾기'
       onclick='getMyClass()'/>

function getMyClass() {
  const div_list 
    = document.getElementsByClassName('my_class');
  
  // class가 'my_class'인 element 개수 출력
  const div_list_length = div_list.length;
  alert(div_list_length);
  
  // class가 'my_class'인 element 목록 출력
  for(let i = 0; i < div_list_length; i++)  {
    alert(div_list[i].innerText);
  }
}

 

document.getElementsByClassName('my_class');

클래스 이름으로 element를 찾아서,

이 클래스 이름을 가지는 모든 element 목록을 리턴합니다.

이 함수의 이름을 자세히 보면 getElementsByClassName으로

Element's'가 복수 형태인 것은 이 함수가 목록을 리턴하기 때문입니다.

 

 

<div id='div_1' class='red blue yellow'>
  red blue yellow
</div>
<div id='div_2' class='green blue red'>
  green blue red
</div>
<div id='div_3' class='yellow green red'>
  yellow green red
</div>
<input type='button'
       value='getElementsByClassName() - class이름으로 찾기'
       onclick='getMyClass()'/>

function getMyClass() {
  const div_list 
    = document.getElementsByClassName('red blue');
  
  // class가 'my_class'인 element 개수 출력
  const div_list_length = div_list.length;
  alert(div_list_length);
  
  // class가 'my_class'인 element 목록 출력
  for(let i = 0; i < div_list_length; i++)  {
    alert(div_list[i].innerText);
  }
}

 

document.getElementsByClassName('red blue');

다수의 클래스 이름을 모두 포함하고 있는 element를 찾을 때는

파라미터로 클래스 이름을 스페이스로 구분하여 넘겨줍니다.

위 코드는 클래스 이름에 'red'와 'blue' 모두를 포함하는 element를 찾아줍니다.

 

 

3. getElementByTagName()

<div id='div_1' class='my_class'>
  Div1입니다.
</div>
<div id='div_2' class='my_class'>
  Div2입니다.
</div>
<div id='div_3' class='your_class'>
  Div3입니다.
</div>
<input type='button'
       value='getElementsByTagName() - Tag Name으로 찾기'
       onclick='getElementsByTagNameDiv()'/>

function getElementsByTagNameDiv() {
  const div_list 
    = document.getElementsByTagName('div');
  
  // tag name이 'div'인 element 개수 출력
  const div_list_length = div_list.length;
  alert(div_list_length);
  
  // tag name이 'div'인 element 목록 출력
  for(let i = 0; i < div_list_length; i++)  {
    alert(div_list[i].innerText);
  }
}

 

document.getElementsByTagName('div);

위 코드는 'div' 태그를 가지는 모든 element 목록을 찾아줍니다.

이 함수 역시, 다수의 element를 리턴하기 때문에

함수명에 복수형의 'elements'가 포함되어 있습니다.

 

 

4. querySelector()

DOM에서 원하는 element를 찾기 위해서 querySelector() 를 사용할 수도 있는데,

이 함수는 파라미터로 입력받은 CSS선택자를 사용해서, element를 찾아줍니다.

 

querySelector() 함수는,

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

 

 querySelector() - ID로 찾기 

<div id='div_1' class='my_class'>
  Div1입니다.
</div>
<div id='div_2' class='my_class'>
  Div2입니다.
</div>
<div id='div_3' class='your_class'>
  Div3입니다.
</div>
<input type='button'
       value='querySelector() - ID로 찾기'
       onclick='querySelectorById()'/>

function querySelectorById() {
  const div
    = document.querySelector('#div_1');
  
  alert(div.innerText);
}

document.querySelector('#div_1');

id이름 앞에 '#'를 붙여서 파라미터로 넘겨줍니다.

위 예제는 id가 'div_1'인 element를 찾아서 리턴합니다.

 

 querySelector() - Class 이름으로 찾기 

<div id='div_1' class='my_class'>
  Div1입니다.
</div>
<div id='div_2' class='my_class'>
  Div2입니다.
</div>
<div id='div_3' class='your_class'>
  Div3입니다.
</div>
<input type='button'
       value='querySelector() - Class로 찾기'
       onclick='querySelectorByClassName()'/>

function querySelectorByClassName() {
  const div
    = document.querySelector('.my_class');
  
  alert(div.innerText);
}

 

document.querySelector('.my_class');

클래스 이름으로 element를 찾기위해서 

클래스 이름 앞에 '.'을 붙여서 파라미터로 넘겨줍니다.

위 예제는 class가 'my_class'인 element 중 첫번째 element를 리턴합니다.

 

 querySelector() - Tag 이름으로 찾기 

<div id='div_1' class='my_class'>
  Div1입니다.
</div>
<div id='div_2' class='my_class'>
  Div2입니다.
</div>
<div id='div_3' class='your_class'>
  Div3입니다.
</div>
<input type='button'
       value='querySelector() - Tag Name으로 찾기'
       onclick='querySelectorByTagName()'/>

function querySelectorByTagName() {
  const div
    = document.querySelector('div');
  
  alert(div.innerText);
}

 

document.querySelector('div');

태그 이름으로 element를 찾을 때는 태그명을 문자열로 넘겨줍니다.

위 예제는 div태그를 가지는 element 중 첫번째 element를 리턴합니다.

 

 querySelector() - 선택자 ','로 구분하기 

<div id='div_1' class='red'>
  red
</div>
<div id='div_2' class='blue'>
  blue
</div>
<div id='div_3' class='green'>
  green
</div>
<input type='button'
       value='querySelector() - Class Name으로 찾기'
       onclick='querySelectorByClassName()'/>

function querySelectorByClassName() {
  const div
    = document.querySelector('.red, .green');
  
  alert(div.innerText);
}

 

document.querySelector('.red, .green');

선택자를 ','로 구분하여 전달하면 여러개의 선택자 중 첫번째로 발견되는 element를 리턴합니다.

이때, 파라미터를 여러개 넘기는 것이 아니라,

선택자를 ','로 구분한 문자열 1개가 파라미터로 넘어간다는 것에 유의하세요.

 

 

5. querySelectorAll()

사용법은 querySelector() 와 같습니다.

다만, querySelectorAll()은 이름에서 알수 있듯이,

CSS선택자(파라미터로 넘겨준)로 찾은 모든 element 목록을 리턴합니다.

 

 querySelectorAll() - ID로 찾기 

<div id='div_1' class='my_class'>
  Div1입니다.
</div>
<div id='div_2' class='my_class'>
  Div2입니다.
</div>
<div id='div_3' class='your_class'>
  Div3입니다.
</div>
<input type='button'
       value='querySelectorAll() - Id 전체 찾기'
       onclick='querySelectorAllById()'/>

function querySelectorAllById() {
  const div_list 
    = document.querySelectorAll('#div_1');
  
  // id가 'div_1'인 element 개수 출력
  const div_list_length = div_list.length;
  alert(div_list_length);
  
  // id가 'div_1'인 element 목록 출력
  for(let i = 0; i < div_list_length; i++)  {
    alert(div_list[i].innerText);
  }
}

 

 querySelectorAll() - Class 이름으로 찾기 

<div id='div_1' class='my_class'>
  Div1입니다.
</div>
<div id='div_2' class='my_class'>
  Div2입니다.
</div>
<div id='div_3' class='your_class'>
  Div3입니다.
</div>
<input type='button'
       value='querySelectorAll() - Class Name 전체 찾기'
       onclick='querySelectorAllByClassName()'/>

function querySelectorAllByClassName() {
  const div_list 
    = document.querySelectorAll('.my_class');
  
  // class name이 'my_class'인 element 개수 출력
  const div_list_length = div_list.length;
  alert(div_list_length);
  
  // class name이 'my_class'인 element 목록 출력
  for(let i = 0; i < div_list_length; i++)  {
    alert(div_list[i].innerText);
  }
}

 

 querySelector() - Tag 이름으로 찾기 

<div id='div_1' class='my_class'>
  Div1입니다.
</div>
<div id='div_2' class='my_class'>
  Div2입니다.
</div>
<div id='div_3' class='your_class'>
  Div3입니다.
</div>
<input type='button'
       value='querySelectorAll() - Tag Name 전체 찾기'
       onclick='querySelectorAllByTagName()'/>

function querySelectorAllByTagName() {
  const div_list 
    = document.querySelectorAll('div');
  
  // tag name이 'div'인 element 개수 출력
  const div_list_length = div_list.length;
  alert(div_list_length);
  
  // tag name이 'div'인 element 목록 출력
  for(let i = 0; i < div_list_length; i++)  {
    alert(div_list[i].innerText);
  }
}

 

 querySelectorAll() - 선택자 ','로 구분하기 

<div id='div_1' class='red'>
  red
</div>
<div id='div_2' class='blue'>
  blue
</div>
<div id='div_3' class='green'>
  green
</div>
<input type='button'
       value='querySelectorAll() - Class Name 전체 찾기'
       onclick='querySelectorAllByClassName()'/>

function querySelectorAllByClassName() {
  const div_list 
    = document.querySelectorAll('.red, .green');
  
  // class name이 'my_class'인 element 개수 출력
  const div_list_length = div_list.length;
  alert(div_list_length);
  
  // class name이 'my_class'인 element 목록 출력
  for(let i = 0; i < div_list_length; i++)  {
    alert(div_list[i].innerText);
  }
}

 

document.querySelectorAll('.red, .green');

querySelect()와 마찬가지로 선택자를 ','로 구분한 문자열을 넘겨주면

각각의 선택자에 해당하는 모든 element를 리턴합니다.

위 예제는 클래스가 'red'인 element와 'green'인 element를 리턴합니다.

 

---

 

DOM에서 특정 요소(element)를 검색하는 여러가지 방법을 알아보았습니다.