DOM 소개

https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

 

Document Object Model (DOM) 은 웹에있는 문서의 내용과 구조를 구성하는 객체의 데이터표현이다. 이 가이드는 돔에대해 소개한다. 메모리에 HTML 문서가 어떻게 돔으로 표현되는지 살펴보고, 어떻게 web 컨텐츠와 애플리케이션을 만들기위해 API를 사용하는지 살펴볼 것이다.

 

What is the DOM?

Domcumnet Object Model은 web documents를 위한 프로그래밍 인터페이스이다. 내용과 스타일, document 구조 를 바꿀 수 있다. DOM은 객체와 노드로 문서를 나타낸다. 이런 방식으로, 프로그래밍 언어는 page와 상호작용할 수 있다.

 

웹페이지는 HTML 소스로서의 document 거나 또는, 브라우저 윈도우 화면에 나타나는 document 로 나타날 수 있다. 두 경우 모두에서 같은 문서이지만, 돔 표현은 조작하는걸 허용해준다. 웹페이지의 객체 지향 표현으로, 자바스크립트와 같은 스크립팅 언어에서 수정될 수 있다. 

 

예를 들면, 돔은 문서에서 리스트의 모든 <p> elements를 리턴하는 code snippet인 querySelectorAll로 특정할 수 있다.

const paragraphs = document.querySelectorAll("p");
// paragraphs[0] is the first <p> element
// paragraphs[1] is the second <p> element, etc.
alert(paragraphs[0].nodeName);

웹페이지에서 조작되고 만들어질 수 있는 모든 속성, 메소드, 그리고 이벤트는 객체로 조직화(be organized)될 수 있다. 예를 들면, 그자체로 document를 나타내는 documnet오브젝트는, 어떤 HTML 테이블에 접근할 수 있는 HTMLTableElement 돔 인터페이스를 구현한 table 오브젝트 등등 모두 객체이다.

 

돔은 함께 일하는 여러개의 API들로 구축됐다. 코어 돔은 모든 문서나 그 안의 객체를 묘사하는 엔터티를 정의한다. 다른 코어돔은 새로운 기능과 능력을 DOM에 추가하는 다른 API에 의해 추가되어 확장된다. 예를들면, HTML DOM API는 돔에 HTML document를 나타내는 도움을 추가한다. 그리고 SVG API는 SVG documnets를 나타내는 도움을 추가한다.