[HTML] DOM

JKim·2023년 2월 15일
0

DOM

DOM(Document Object Model)이란 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서를 구조화한 상태를 제공해주며 구조화한 상태를 통해 프로그래밍 언어로 DOM의 문서 구조, 스타일, 내용 등을 변경할 수 있다.

웹 페이지는 문서이고, 이 문서는 웹 브라우저를 통해 렌더링된 화면이 나타나거나, 코드의 소스로 나타난다. DOM은 웹 페이지의 객체 지향 표현이며, Javascript와 같은 Scripting 언어로 내용을 수정할 수 있다.

W3C DOM, WHATWG DOM 표준은 국제적으로 사용하는 대부분의 브라우저에 적용된 DOM 구현 기준이다. 물론 많은 브라우저들이 표준 구현 기준에 추가적인 기능들을 만들어 제공하고 있다.


DOM과 Javascript

DOM 자체는 프로그래밍 언어가 아니지만, 문서의 객체적인 표현이기 때문에 문서의 내용, 문서의 요소를 바꾸기 위해서는 DOM을 거쳐야 하고, 그럼으로 인해 Javascript와 같은 Scripting 언어들로 접근하고 조작해야 한다.
또한 mdn에 따르면 웹 페이지의 방정식은 다음과 같다

API(web of XML Page) = DOM + JS


DOM에 접근하는 방법

HTML 문서 내에 인라인 방식으로 <script>를 설정하거나, 외부 JS 파일을 호출하여 문서 내로 접근 할 수 있으며, document나 window와 같은 DOM 내부에 있는 객체를 호출하여 명령을 내릴 수 있다.
즉, 우리가 버튼을 클릭했을 때 window.alert(""); 와 같은 코드를 작성한다면 DOM 안에 window 객체 안에 alert라는 함수를 불러와서 사용하는 것이니 DOM을 접근해서 조작했다고 할 수 있다.


DOM에 접근하는 중요한 데이터 타입들

documentelementnodeListattributenamedNodeMap

(자세한 사용 방법은 Javascript 정리 때 작성 예정)

출처 : https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

profile
프론트엔드 개발자 | 문제가 있는 내용이 있다면 댓글로 알려주세요.

0개의 댓글