DOM은 웹 문서를 프로그램이 읽고 바꿀 수 있는 객체와 노드의 트리로 표현하는 인터페이스다. 브라우저에 표시되는 제목, 문단과 링크를 코드에서 찾고 수정할 때 사용하는 기반이다. HTML이 문서 구조를 기술한다면 DOM은 그 구조를 실행 환경에서 다룰 수 있게 한다.
트리와 노드
문서에는 요소 노드뿐 아니라 텍스트 노드 등 여러 종류의 노드가 있다. 본문 아래에 문단이 있고 그 안에 링크와 텍스트가 있는 식으로 부모·자식 관계가 형성된다. DOM에서 특정 노드를 바꾸면 브라우저는 필요한 화면 갱신을 수행한다. 원본 HTML 문자열과 현재 DOM은 같지 않을 수 있으며 스크립트나 파서 처리로 차이가 생긴다.
문서 조회와 변경
document.querySelector()는 선택자에 맞는 요소를 찾는 대표적인 방법이다. 예를 들어 문서 제목 요소를 찾아 textContent에 새 제목을 지정하면 글자를 바꿀 수 있다. 검색 결과 목록을 만들 때는 요소를 생성한 뒤 목록에 추가할 수 있다. 요소가 존재하지 않는 경우를 처리하지 않으면 후속 속성 접근에서 오류가 날 수 있으므로 조회 결과를 확인한다. 관련 공식 설명.
이벤트와 사용자 행동
버튼이나 입력 요소에 이벤트 처리기를 연결하면 클릭, 입력, 키보드 행동에 반응할 수 있다. 여러 하위 요소가 있는 목록에서는 이벤트 전파를 이해해야 의도하지 않은 중복 실행을 피하기 쉽다. JavaScript는 DOM을 조작하는 데 흔히 쓰이는 언어지만 DOM 자체가 JavaScript 언어 문법의 일부인 것은 아니다. 실행 환경이 문서 인터페이스를 제공해야 사용할 수 있다.
안전성과 성능의 경계
외부에서 받은 글을 표시할 때 단순 텍스트와 HTML 해석을 구분한다. 문자열을 마크업으로 해석하는 경로에는 적절한 검증과 정제가 필요하다. 또한 반복적으로 많은 노드를 바꾸면 화면 갱신 비용이 커질 수 있으므로 변경을 모으고 실제 병목을 측정한다. Web Workers는 일반적인 문서 DOM을 직접 조작하지 못한다. 웹 접근성을 위해서는 화면에 보이는 결과뿐 아니라 제목·레이블·포커스 구조도 함께 점검해야 한다.
참고: 공식 개발 문서.