[TIL] 2022.05.10

오늘 한 일

• 모던 자바스크립트 Deep Dive

39. DOM

배운 것

• DOM: HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API (메서드, 프로퍼티)를 제공하는 트리 자료구조. HTML 요소마다 노드 객체로 구성
• 요소 노드는 어트리뷰트 노드와 자식 노드인 텍스트 노드로 구성
• DOM을 구성하는 노드 객체는 자신의 구조와 정보를 제어할 수 있는 DOM API를 사용할 수 있다
• 노드 타입에 따라 필요한 기능을 DOM API로 제공하며 이를 통해 HTML 구조나 내용 또는 스타일을 동적으로 조작할 수 있다
• 요소 노드 취득: getElementByXXX, querySelector
• HTMLCollection, NodeList: DOM API가 여러 개의 결과값을 반환하기 위한 컬렉션 객체
• HTMLCollection은 실시간으로 노드 객체 상태 변경을 반영하는 live 객체, NodeList는 childNodes 프로퍼티가 반환하는 경우를 제외하고 대부분의 경우 non-live 객체로 동작
• 노드 객체 상태 변경과 상관없이 안전하게 DOM 컬렉션을 사용하려면 HTMLCollection/NodeList 객체(유사배열객체이면서 이터러블임)를 배열로 변환하여 사용하는 것을 권장함
  . 배열의 고차 함수 사용도 할 수 있는 장점이 있음
• 노드 탐색 메서드(트리구조의 부모, 자식, 형제 접근)
• 노드 정보 취득 메서드
• 요소 노드의 텍스트 조작: nodeValue, textContent
• DOM 조작 (노드 추가/삽입/이동/교체/복사/삭제 등)
• innerHTML을 통한 DOM 조작
• innerHTML 프로퍼티에 할당한 HTML 마크업 문자열은 렌더링 엔진에 의해 파싱되어 요소 노드의 자식으로 DOM에 반영됨 -> 사용자로부터 입력받은 데이터를 그대로 innerHTML 프로퍼티에 할당하면 XSS(크로스 사이트 스크립팅 공격)에 취약함
• 요소 노드는 2개의 상태, 즉 초기 상태와 최신 상태를 관리해야 한다
• HTML 어트리뷰트 vs DOM 프로퍼티
  • HTML 어트리뷰트는 HTML 요소의 초기 상태를 의미하며 변하지 않는다
  • DOM 프로퍼티: 사용자에 입력에 의한 상태 변화에 반응하여 언제나 최신 상태를 유지