[javascript] DOM 모델에서 요소 가져오기

0

요소를 가져오는 방법 중 예전부터 쓰이던 카테고리 "getElement"와 비교적 최근 방법인 "querySelector"이 있다.

그 중에서도 getElementById()외에 getElement 방법들은 콘솔에서 유사배열 형식인 HTML Collection이라는 데이터 객체를 반환하고
querySelector방식은 Nodelist라는 데이터 객체를 반환한다.

getElementsByClassName 이던 querySelectorAll 이던 여러 요소들이 선택이 될 수 있으니 꼭 [인덱스] 번호를 붙여줘야한다.

querySelector은 어차피 처음 나타나는 요소를 선택 할 테니 인덱스가 필요 없다.

그 외에도 for문 관련 여러 유도함수들 (foreach, for..in, for...of 등)이 어떤 식으로 요소를 가져왔냐에 따라서 적용 될 수도 있고 없을 수도 있다. 자세한 것은 공식문서에서 HTMLCollection과 NodeList에서 쓸 수있는 메소드를 확인하는 것이 빠르겠다.

이 포스트를 쓴 이유:

결국 queryselector 및 getElement는 언제 적절히 쓰여야하나를 궁금해한 결과...
어차피 유일무이하게 아이디가 지정 된 요소들은 getElementById가 더 빠르겠고 그 외에 것들은 querySelectorAll로 하는 것이 나쁘지는 않을 것 같다.

이 외에도 이미 언급했던 어떤 타입을 반환하는지, 어떤 방법이 최적화에 더 적절한지, 유지보수 및 코딩의 통일성은 무엇이 더 좋은지는 아직 더 공부를 해본 후 적절히 해당 포스트를 수정해야겠다.

profile
내가 기억하려고 작성 중인 블로그

0개의 댓글