querySelectorAll

querySelector는 인수와 매치되는 첫번째 요소를 선택하는 기능이다.

 

querySelectorAll은 위와 거의 비슷한 기능이지만, 인수와 매치되는 모든 요소들을 배열화해서 리턴한다는 점이 다르다.

 

<div>
    <button class="hello">Hello</button>
    <button class="hello">Hola</button>
    <button class="hello">Buna ziua</button>
    <button class="hello">Aloha</button>
    <h1 class="hello">Hi world</h1>
</div>
<script>
    const hellos = document.querySelectorAll('.hello')
    const buttons = document.querySelectorAll('button')
    // hellos는 길이 5의 배열이다. 
    // [buttonElement, buttonElement, buttonElement, buttonElement, h1Element]
    
    // buttons는 길이 4의 배열이다.
    // [buttonElement, buttonElement, buttonElement, buttonElement]
    
    
    buttons.forEach((button, i) => {
        return button.onclick = () => {
            alert(`this is the button at index ${i}`)
        }
    })
    // 페이지가 로딩되면, forEach문이 작동하여 buttons가 가진 각각의 요소에
    // button.onclick 기능을 리턴한다.
    
</script>

 

Buna ziua를 클릭하면 index 2라고 alert된다.