querySelector

지난 시간에 작성했던 코드에 이어서 querySelector 라는 선택자를 알아보자.

<ul class="list-group" id="list1">
    <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('.list-group')
    document.querySelector('#list1')

    document.querySelectorAll('.list-group-item')[4]

</script>

querySelector('.list-group') 라고 하면 class가 list-group 인 요소를 찾아준다.

querySelector('#list1') 라고 하면 id가 list1 인 요소를 찾아준다.

css에선 . 이 클래스 #이 id 라는 뜻이다.

하지만 querySelector는 첫번째 요소만 찾아준다.

document.querySelector('.list-group-item')

위 코드는 첫번째 list-group-item 만 찾아준다.

<li class="list-group-item">An item</li>

그래서 동일한 클래스 명이 중복해서 사용될 때에는

 document.querySelectorAll('.클래스이름)'[n]

이렇게 하면 해당 클래스 이름의 n번째 요소를 찾아준다.

✨ 과제. 지난시간에 만들었던 script를 querySelector 와 querySelectorAll을 사용해서 바꿔보자.

<script>
    document.getElementsByClassName('navbar-toggler')[0].addEventListener('click', function() {
        //버튼 클릭 시 show class 추가
        document.getElementsByClassName('list-group')[0].classList.add('show');
        //버튼 클릭 시 show class Toggle
        document.getElementsByClassName('list-group')[0].classList.toggle('show');
    })
</script>