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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeans-dev-book.gitbook.io/docs/lecture/javascript/queryselector.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.