본문 바로가기
TIL/Learn - JavaScript

DOM 기초 내용

by koreashowme 2019. 8. 30.

DOM(Document Object Model : 문서 객체 모델)
- 웹 브라우저 html 페이지에 접근하는 방법을 정의한 API임.


- 자바스크립트 코드에서는 동적인 HTML을 만들어 내기 위해  DOM 객체에 접근하여 조작할 수 있음.


- 사용 목적 : 자바스크립트를 이용하여 문서 객체를 선택하고 속성 또는 스타일을 적용하기 위해서 사용함.


- 문서 객체 : 자바스크립트에서 이용할 수 있는 객체.

   *노드 : html 페이지의 각 요소(태그)들 (html, title, head, body) 모두 노드라고 불림.
    <시작태그> 텍스트 </끝태그> 텍스트 노드.


- DOM은 노드, 스타일, 속성, 이벤트, 위치 및 크기 등을 다룰 수 있는 다양한 기능이 포함되어 있음.


- 보통 DOM 방식은 트리구조임. 브라우저가 웹페이지를 처리하는 과정은 
 먼저 브라우저는 문서 정보에 쉽게 접근하고 조작하고자 HTML 웹 페이지를 읽은 후 Parsing 단계를 거침. 
 이 후, DOM 객체로 변환(트리구조) 후 화면에 출력을 함.

 

 

=======================================================================

트리구조 

                          html(노드)

       -head                               -body

 

-meta     -titlte                                 -  h1

                  -DOM                                   -텍스트

 

 

 

ex) 

<h1> 텍스트 </h1>

 

'TIL > Learn - JavaScript' 카테고리의 다른 글

for in & for of & forEach  (0) 2019.09.24
자바스크립트 list.push & concat  (0) 2019.09.23
Ajax란?  (0) 2019.09.18
window.onload  (0) 2019.08.30
button - onclick - ""  (0) 2019.08.28

comment