JavaScript - DOM
DOM이란?
문서 객체 모델(DOM_The Document Object Model)은 HTML, XML 문서의 프로그래밍 인터페이스이다. DOM은 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공해 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있도록 돕는다. DOM은 노드(node)와 객체(object)로 문서를 표현한다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있도록 연결시켜주는 역할을 담당한다.
더 자세한 내용:: MDN - DOM 소개
DOM 탐색 프로퍼티
document.시맨틱태그 (예: document.body) 에
firstChild, nextSibling, parentElement, children, childNodes 등의 프로퍼티를 사용하여 이웃 노드로 바로 이동하는 방식이다.
단점
- 가독성이 나쁨
- 이 코드가 'ul'을 선택하는지 한 눈에 파악하는데 한계.
→ 정확히 어느 위치의 어떤 태그를 가리키는 것인지 알기 위해 HTML 파일을 살펴보아야 하는 번거로움이 따른다.
- 이 코드가 'ul'을 선택하는지 한 눈에 파악하는데 한계.
Query 메소드
기본 구문은 document.querySelector(selectors); 이다.
제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환한다. 일치하는 요소가 없는 경우, null을 반환한다.
DOM 탐색 프로퍼티 예제 코드도, Query 메소드 예제 코드도 자바스크립트 파일의 변수 'firstLi' 를 어떻게 작성했는지 보면 이 두 방식의 차이를 아는 데 도움이 될 것 같다.
단점
- 작업 도중 HTML 구조가 변경되는 경우, 기존에 작성된 js 파일은 의도하지 않은 결과를 불러오게 되는 문제가 발생한다.
→ HTML 구조 변경으로 인해 js 파일도 그 구조에 맞추어 일일이 수정해야 정상작동되는데, 이 부분을 간과하기 쉬워 실수 발생 확률도 높아지고 작업 과정이 번거로워진다.
마무리
관계 유지가 보장된다면(예를 들자면, '< ul >'의 자식요소는 '< li >'라는 것은 보장된 관계) 쿼리 메소드 방식은 일반적인 선택에 사용해도 크게 번거롭거나 나쁜 방식이 아니다. 어쩌면 더 유용할 지도 모른다.
늘 그렇듯 절대적으로 좋은 방법이 있는 것은 아니다. 실습 영상에서도 그렇고 정말 많이 쓰이는 이 두 기본 탐색 방법을 '왜 이번에는 적용하고, 이번에는 적절하지 않은지' 강의를 들은 후, 기록함으로써 다시 한 번 생각해보면 좋을 것 같아 이번 주 포스팅으로 작성해보았다.
참고한 글
