[JavaScript] DOM(Document Object Model)과 JavaScript

DOM(Document Object Model)이란 무엇인가?

DOM은 웹 문서를 위한 프로그래밍 인터페이스로, 웹에서 문서의 구조와 내용을 구성하는 객체의 데이터 표현이다.

DOM은 페이지를 나타내어 프로그램이 문서의 구조, 스타일, 내용을 변경할 수 있도록 한다. DOM은 문서를 노드와 객체로 표현하여, 프로그래밍 언어는 페이지와 상호작용할 수 있다.

웹 페이지는 브라우저 창 또는 HTML 소스로 표시될 수 있는 문서이다. DOM은 웹 페이지의 객체 지향 표현으로서, JavaScript와 같은 스크립트 언어로 수정할 수 있다.

웹 페이지를 조작하고 만드는 데 사용할 수 있는 모든 속성, 메서드, 이벤트는 객체로 구성된다. 예를 들어, 문서 자체를 나타내는 document 객체와, HTML 표에 접근하는 HTMLTableElement DOM 인터페이스를 실행하는 어떤 table 객체 등, 이들은 모두 객체이다.

DOM은 함께 작동하는 여러 API를 사용하여 구축된다. Core DOM은 문서와 문서 내의 객체를 설명하는 엔티티(entity)를 정의한다. Core DOM은 DOM에 새로운 특징과 기능을 추가하는 다른 API에 의해 필요에 따라 확장된다. 예를 들어, HTML DOM API는 core DOME의 HTML 문서 표현을 지원하기 위해 추가되었고, SVG API는 SVG 문서 표현을 지원하기 위해 추가되었다.

DOM과 JavaScript

DOM은 JavaScript 언어의 일부가 아니라, 웹 사이트를 구축하는데 사용되는 웹 API이다.

DOM은 프로그래밍 언어가 아니지만, DOM이 없다면 JavaScript 언어는 웹 페이지, HTML 문서, SVG 문서 및 구성 요소의 모델이나 개념을 갖지 못할 것이다. 문서 전체, 머리글, 문서 내 표, 표 제목, 표 안의 텍스트 및 문서에 있는 다른 모든 요소는 해당 문서의 DOM의 일부이다. 이들은 모두 DOM과 JavaScript와 같은 스크립트 언어를 통해 접근하고 조작할 수 있다.

DOM은 JavaScript 언어의 일부가 아니라, 웹 사이트를 구축하는데 사용되는 웹 API이다. DOM은 프로그래밍 언어와 독립적으로 디자인되었다. 대부분의 웹 개발자는 JavaScript를 통해서만 DOM을 사용하지만, DOM은 모든 언어에 대해 구축할 수 있다.

DOM에 접근하기

DOM을 사용하기 위해 특별히 해야 할 일은 없다. 브라우저에서 실행되는 프로그램인 스크립트 안에서 JavaScript로 바로 DOM API를 사용하면 된다.

스크립트를 작성할 때(인라인 <script> 요소를 사용하거나 웹 페이지 안에 있는 스크립트 로딩 명령을 사용하여), API를 즉시 사용하여 document 또는 window 객체를 통해 문서 자체를 조작하거나 문서의 다양한 요소를 얻을 수 있다.

일반적으로 HTML로 작성된 페이지 구조와 JavaScript로 작성된 DOM의 조작을 같이 작성하는 것은 권장되지 않으므로, JavaScript 부분은 <script> 태그 안에 작성되거나 별도의 파일로 분리한다.

참고문헌

• MDN Introduction to the DOM