JS-querySelector

querySelector

• CSS 문법 그대로 사용할 수 있는 셀렉터
  ex)
  **querySelector는 맨 처음꺼 한줄만 선택이 가능하다.

    <ul class="list-group" id="test">
      <li class="list-group-item">An item</li>
      <li class="list-group-item">A second item</li>
      <li class="list-group-item">A third item</li>
      <li class="list-group-item">A fourth item</li>
      <li class="list-group-item">And a fifth one</li>
    </ul>

<script>
	document.querySelector('.listgroup') 
/*클래스 선택자인 list-group을 선택하는 것.*/
	document.querySelector('#test')
/*ID 선택자인 test을 선택하는 것.*/
</script>

querySelectorAll

• querySelector와 같은 기능이지만, 일치하는 선택자 모두 다 찾아줌
  ex)

    <ul class="list-group" id="test">
      <li class="list-group-item">An item</li>
      <li class="list-group-item">A second item</li>
      <li class="list-group-item">A third item</li>
      <li class="list-group-item">A fourth item</li>
      <li class="list-group-item">And a fifth one</li>
    </ul>

<script>
	document.querySelectorAll('.list-group-item') 
/*클래스 선택자인 list-group-item 모두를 선택하는 것.*/
	document.querySelectorAll('.list-group-item')[0] 
/*클래스 선택자인 list-group-item 모두에서 첫번째 줄만 선택하는 것.*/
</script>