모던 자바스크립트 Deep Dive 39장 DOM

DOM (Document Object Model)

프로퍼티와 메서드를 제공하는 트리 자료구조

Document.prototype 에 정의된 메서드

DOM 전체에서 요소 노드를 탐색

Element.prototype 에 정의된 메서드

특정 요소 노드의 자손 노드 중에서 요소 노드를 탐색

요소 노드 취득

HTML 요소에 id 어트리뷰트를 부여하면 id 값과 동일한 이름의 전역 변수가 암묵적으로 선언되고 노드 객체가 할당된다.

querySelector, querySelectorAll 메서드는 getElementById, getElementBy** 메서드보다 다소 느리다. 그렇기 때문에 id 어트리뷰트가 있는 요소 노드를 취득하는 경우에는 getElementById를 사용하고, 그 외의 경우에는 querySelector, querySelectorAll 메서드를 사용하는 것이 좋다.

innerText 프로퍼티는 textContent 프로퍼티와 유사한데, CSS에 순종적이라 느리기 때문에 사용하지 않는 것이 좋다.

HTML 새니티제이션

크로스 사이트 스크립팅 공격을 예방하기 위해서 잠재적 위험을 제거하는 기능을 말한다. 직접 구현하기보다는 DOMPurify 라이브러리를 사용하자.

DocumentFragment 노드

기존 DOM에는 어떠한 영향도 미치지 않는 노드! DOM에 추가하면 자식 노드만 DOM에 추가된다.

어트리뷰트

모든 어트리뷰트 노드의 참조는 NamedNodeMap 객체(유사 배열 객체, 이러터블)에 담겨서 요소 노드의 attributes 프로퍼티에 저장된다. HTTL 어트리뷰트의 역할은 HTML 요소의 초기 상태를 지정하는 것! 요소의 최신 상태는 DOM 프로퍼티가 관리한다.

data 어트리뷰트와 dataset 프로퍼티

HTML 요소에 정의한 사용자 정의 어트리뷰트와 자바스크립트 간에 데이터를 교환할 수 있다. dataset 프로퍼티는 DOMStringMap 객체를 반환하는데, 이것은 HTML 요소의 모든 data 어트리뷰트의 정보를 제공한다.