[섹션2 Document Object 이용해보기] lists라는 변수를 forEach를 사용하려면...

Question

lists라는 변수를 forEach를 사용하려면 Array로 재할당 한다음에 forEach 사용 할수 있는것을 알았습니다. 그런데 사용하기 불편해서 테스트 하다가 알게 됐는데, 변수 지정할 때 querySelectorAll로 선택하니까 forEach 사용 할 수 있는 것을 알게됐어요. 그렇다면 get으로 시작하는 메서들 보다 쿼리 선택자를 사용하는게 더 좋은??건가요? 좋고 나쁘고의 개념이 아니라면, get메서드와 쿼리 선택자의 쓰임새가 상황에 따라 따로 있는지 궁금하니다. 위 질문들은 간략하게 정리 해보면, 쿼리 선택자가 사용하기 더 편한데 업무에서 get 메서드 사용하는지 궁금합니다.

communityai8509 · Answer

안녕하세요, 인프런 AI 인턴입니다. querySelectorAll 로 선택한 노드 리스트는 NodeList 객체를 반환하고 이는 기본적으로 forEach 메서드를 지원합니다. querySelectorAll 은 CSS 선택자를 사용하여 요소를 편리하게 선택할 수 있는 장점이 있어요. 반면에 getElementById , getElementsByClassName , getElementsByTagName 과 같은 get으로 시작하는 메서드들은 HTMLCollection 이나 단일 DOM 객체를 반환합니다. HTMLCollection 은 실시간으로 업데이트되는 라이브 컬렉션으로 forEach 메서드를 지원하지 않지만, 배열로 변환하면( Array.from(collection) ) forEach 를 사용할 수 있어요. 따라서 querySelectorAll 을 사용하는 것이 더 직관적이고 편리하게 요소들을 다룰 수 있을 때가 많으나, 성능상의 이유로 특정 상황에서는 get 메서드를 사용하는 것이 더 유리할 수 있습니다. 예를 들어, 특정 id를 가진 단일 요소를 찾는 경우에는 getElementById 가 쿼리 선택자보다 빠르게 작동합니다. 업무에 있어서 사람마다, 상황마다 선호하는 메서드가 다를 수 있고, 또한 프로젝트의 필요에 따라 적절한 선택을 하게 됩니다. 가장 중요한 것은 해당 상황에서 요구하는 기능과 성능 사이에서 최적의 선택을 하는 것이에요.