[섹션2 Document Object 이용해보기] lists라는 변수를 forEach를 사용하려면...
192
投稿した質問数 3
lists라는 변수를 forEach를 사용하려면 Array로 재할당 한다음에 forEach 사용 할수 있는것을 알았습니다.
그런데 사용하기 불편해서 테스트 하다가 알게 됐는데, 변수 지정할 때 querySelectorAll로 선택하니까 forEach 사용 할 수 있는 것을 알게됐어요.
그렇다면 get으로 시작하는 메서들 보다 쿼리 선택자를 사용하는게 더 좋은??건가요?
좋고 나쁘고의 개념이 아니라면, get메서드와 쿼리 선택자의 쓰임새가 상황에 따라 따로 있는지 궁금하니다.
위 질문들은 간략하게 정리 해보면, 쿼리 선택자가 사용하기 더 편한데 업무에서 get 메서드 사용하는지 궁금합니다.
回答 1
1
안녕하세요, 인프런 AI 인턴입니다.
querySelectorAll로 선택한 노드 리스트는 NodeList 객체를 반환하고 이는 기본적으로 forEach 메서드를 지원합니다. querySelectorAll은 CSS 선택자를 사용하여 요소를 편리하게 선택할 수 있는 장점이 있어요.
반면에 getElementById, getElementsByClassName, getElementsByTagName과 같은 get으로 시작하는 메서드들은 HTMLCollection이나 단일 DOM 객체를 반환합니다. HTMLCollection은 실시간으로 업데이트되는 라이브 컬렉션으로 forEach 메서드를 지원하지 않지만, 배열로 변환하면(Array.from(collection)) forEach를 사용할 수 있어요.
따라서 querySelectorAll을 사용하는 것이 더 직관적이고 편리하게 요소들을 다룰 수 있을 때가 많으나, 성능상의 이유로 특정 상황에서는 get 메서드를 사용하는 것이 더 유리할 수 있습니다. 예를 들어, 특정 id를 가진 단일 요소를 찾는 경우에는 getElementById가 쿼리 선택자보다 빠르게 작동합니다.
업무에 있어서 사람마다, 상황마다 선호하는 메서드가 다를 수 있고, 또한 프로젝트의 필요에 따라 적절한 선택을 하게 됩니다. 가장 중요한 것은 해당 상황에서 요구하는 기능과 성능 사이에서 최적의 선택을 하는 것이에요.
counter01.html은 어디있을까요?
1
9
1
존재하지 않는 일기 url입력 시 alert이 두 번 떠요
0
28
1
useState 직접 구현 부분에서 질문이 있습니다.
1
31
1
학습을 하고 블로그에 정리를 해도 괜찮을까요?
1
34
1
교재(3쇄)와 강의 내용 문의
0
33
2
섹션2번 부분 강의 화면이 잘 못된것 같아서 문의합니다.
0
23
1
call stack 표현이 잘못표현된것이 아닌가요?
0
71
2
React 와 Virtual DOM 의 이야기 영상 실행이 안됩니다.
0
35
1
일반 강의와 차이점?
1
53
1
!= 연산자의 역할
0
35
1
주석처리한 buttons가 작동하는 이유
0
102
1
document 객체가 콘솔에 화면처럼 뜨질않는데 무슨이유일까요?
0
149
1
vscode 에서 LiveSever를 통해 연 페이지에 왜 코드가 바로 연동이 되어 출력이 안될까요??
0
200
1
Start 버튼을 연속으로 두 번 누르면 Stop버튼이랑 Reset 버튼이 작동하지 않습니다.
0
127
1
Shallow Freeze 관련 질문드립니다!
0
212
1
var 로 선언해서 window 객체의 프로퍼티로 만들기
0
142
1
랜덤 난수의 정수화
0
189
1
섹션9 Todo App 질문드립니다.
0
204
1
강의 자료 소스 복사
0
317
1
Todo App(1) 스타일 파일 코드
0
453
2
변수를 먼저 let val; 선언하는 이유가 있나요?
0
238
1
해당 강의의 index.html 소스코드 파일을 받고 싶습니다!
0
256
1
[Event Delegation] 요소의 id를 변수 선언 없이 바로 사용할 수 있는 이유?
1
405
1
얕은 복사가 주소만 복사하는 것 아닌가요?
0
503
1