DOM(Document Object Model)은 문서 객체 모델로, 문서를 노드와 객체의 트리 구조로 표현하고 프로그램이 읽고 바꿀 수 있게 하는 인터페이스다. 웹 브라우저는 HTML 문서를 읽어 이 구조를 만든다. HTML뿐 아니라 SVG와 XML 문서도 DOM으로 다룰 수 있다. 자바스크립트에서 자주 사용하지만 JavaScript 언어 자체의 일부는 아니다. (MDN의 DOM 설명)

• HTML 소스는 작성한 문서의 코드이고, DOM은 브라우저가 해석해 만든 구조다. 요소와 텍스트 등을 노드로 다루며, 실행 중의 변경에 따라 소스와 다른 상태가 될 수 있다.
• document.querySelector()로 요소를 찾고, element.innerHTML로 그 안의 내용을 바꾸거나 addEventListener()로 사건에 반응할 수 있다. 이렇게 문서를 프로그래밍으로 다루어 웹 페이지를 동적으로 바꾼다.
• Virtual DOM은 실제 DOM과 구분해 살펴볼 개념이다. React 같은 라이브러리는 새 렌더링 결과에 맞춰 필요한 변경을 DOM에 반영한다. 그 과정을 이해하는 것과 모든 작업에서 더 빠르다고 판단하는 것은 별개다. (React의 렌더링과 반영 과정)

기타 등등

• document.designMode = "on"으로 문서 전체를 편집 가능한 상태로 만들 수 있다. 화면의 글을 고쳐보는 기능이지만, 그것만으로 서버의 원본이 저장되지는 않는다. 출처
• DocumentFragment에는 아직 화면의 문서 트리에 붙이지 않은 요소들을 모아둘 수 있다. 화면에 보이는 것만이 프로그램 안에서 존재하는 문서 조각은 아니다. 출처

#웹 #프로그래밍 #HTML