Javascript (자바스크립트) - 요소 찾기 (querySelector, querySelectorAll)

2020/03/29 - [Frontend/Javascript] - Javascript (자바스크립트) - 요소(Element) 찾기

 

이전에 아이디, 클래스, 태그 등을 이용해

getElementById, getElementsByClassName, getElementsByTagName 의 명령어 사용과 함께

요소를 찾는 방법을 알아봤다.

 

이러한 방법 외에 제이쿼리와 유사하게 .(클래스), #(아이디) 와 같이 . # 를 이용해서 원하는 요소를

찾는 방법이 있다.

 

1. querySelector()

원하는 요소를 아이디(#), 클래스(.), 태그 값을 입력해서 하나만 찾는다.

(리스트나 반복되는 영역에서 해당 명령어를 사용하게 되면 가장 첫번째로 있는 DOM 요소를 찾는다.)

<div id="wrap">
  <ul>
    <li>리스트 1</li>
    <li>리스트 2</li>
    <li>리스트 3</li>
  </ul>
</div>

<script>
  var wrapper = document.querySelector('#wrap');
  var lists = wrapper.querySelector('li');
  
  console.log(wrapper);  // <div id="wrap"> 영역을 찾는다.
  console.log(lists);  // #wrap 하위에 있는 첫 번째 li를 찾는다.
</script>

 

2. querySelectorAll()

원하는 요소를 아이디(#), 클래스(.), 태그 값을 입력해서 여러 요소들을

Nodelist (유사배열)의 형태로 가져온다.

<div id="wrap">
  <ul>
    <li>리스트 1</li>
    <li>리스트 2</li>
    <li>리스트 3</li>
  </ul>
</div>

<script>
  var wrapper = document.querySelector('#wrap');
  var lists = wrapper.querySelectorAll('li');
  
  console.log(wrapper);  // <div id="wrap"> 영역을 찾는다.
  console.log(lists);  // #wrap 하위에 있는 모든 li를 유사 배열 형태로 가져온다.
  
  // lists → [<li>리스트 1</li>, <li>리스트 2</li>, <li>리스트 3</li>]
</script>