> For the complete documentation index, see [llms.txt](https://leeans-dev-book.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeans-dev-book.gitbook.io/docs/lecture/javascript/queryselector.md).

# querySelector

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

```html
<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 인 요소를 찾아준다.&#x20;

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

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

하지만 querySelector는 첫번째 요소만 찾아준다.&#x20;

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

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

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

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

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

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

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

```javascript
<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>
```