프로그래밍 공부하기

DOM(Document Object Model) 본문

Web/[JS] FrontEnd

DOM(Document Object Model)

ihl 2020. 12. 23. 22:53

1. DOM의 정의

DOM(Document Object Model)이란 HTML, XML 문서의 프로그래밍 Interface이다. DOM은 문서를 프로그래밍 언어로 접근하고 조작가능하게 하는 모델이다. JavaScript DOM을 통해 HTML요소에 접근하고 조작할 수 있다. 모든 웹 브라우저는 스크립트가 접근할 수 있는 웹 페이지를 만들기 위해 어느 정도의 DOM 을 항상 사용한다. 

 

HTML과 JavaScript간의 인터페이스

 

2. DOM과 웹 브라우저

DOM은 작성한 HTML가 웹 브라우저에 의해 파싱된 것이다. 즉, 웹 브라우저에 DOM이 포함되어있는 것이다. 따라서 DOM은 웹 브라우저의 최상위 객체인 window의 하위 객체이며 window.document로도 HTML에 접근 가능하다. Javascript에서 window 객체를 사용한다는 것은 웹 브라우저에 접근한 것이며, document 객체를 사용한다는 것은 DOM을 사용하여 HTML 문서에 접근한 것이다.

 

3. Console.dir()

HTML을 조작할 때 Console.dir()을 사용하면 DOM을 객체의 모습으로 보여주어 유용하다.

console.log와 console.dir

 

 


참고링크

developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C

 

DOM 소개 - Web API | MDN

이 문서는 DOM에 대한 개념을 간략하게 소개하는 문서이다: DOM 이 무엇이며, 그것이 어떻게 HTML, XML 문서들을 위한 구조를 제공하는지, 어떻게 DOM 에 접근하는지, API 가 어떻게 사용되는지에 대한

developer.mozilla.org

 

'Web > [JS] FrontEnd' 카테고리의 다른 글

CDN과 Javascript Library  (0) 2020.12.29
DocumentFragment  (0) 2020.12.24
CSS Naming을 어떻게 해야할까(1?)  (0) 2020.12.20
Google Font 적용하기  (0) 2020.12.19
last-child가 작동하지 않을 때  (0) 2020.12.18
Comments