queryselectorAll의 배신

queryselectorAll메소드를 이용하여 html element들을 자바스크립트로 가져와서 css로 스타일링을 해주었는데 제일 처음 요소에만 적용이 되었다.

알고보니 queryselectorAll메소드를 사용하면 css선택자와 일치하는 모든 요소들을 가져와 NodeList형태로 반환하는데 이때 NodeList는 실제 배열은 아니지만 배열과 유사한 방식으로 작동한다.

각 노드에는 인덱스가 있어서 NodeList를 반복하여 각 노드에 접근을 할 수 있다. 각 노드는 자바 스크립트의 element객체와 같은 유형의 객체이다.

• length : NodeList에 포함된 노드 수를 반환합니다.
• item(index) : 지정된 인덱스의 노드를 반환합니다.
• forEach(callback) : NodeList의 모든 요소에 대해 지정된 함수를 실행합니다.
• entries() : NodeList의 각 요소에 대한 인덱스 및 값을 포함하는 새로운 Array Iterator 객체를 반환합니다.
• keys() : NodeList의 각 요소의 인덱스를 포함하는 새로운 Array Iterator 객체를 반환합니다.
• values() : NodeList의 각 요소의 값을 포함하는 새로운 Array Iterator 객체를 반환합니다.

const passwdContainer = document.querySelectorAll(".passwd-container");

passwdContainer.style.border = "1px solid red" // error

passwdContainer.forEach((passwdContainer) => {
      passwdContainer.style.border = "1px solid red";
    }); //work well

forEach메소드를 쓰지 않으면 프로퍼티가 정의되지 않았다고 뜬다. queryselectorAll는 반환하는 값이 NodeList이고 여러 요소의 목록을 가진 '객체'이기 때문에 바로 스타일을 적용할 수 없다. 그래서 반복문을 통해서 각 요소를 반복하며 지정된 콜백함수를 실행하게 된다.