Document Object Model
DOM 무엇?
<article>
<book>
<author>ThinkingCells</author>
<title>WhatisDOM?</title>
<published>Year 2022</published>
</book>
<etcinfo>
<price format="dollar">20</price>
<language>English</language>
</etcinfo>
</article>위 코드를 보면,
article 이 root element
book, etcinfo 가 child element
각 child element 안에는 또 다른 해당 element 들이 들어있습니다.
이 XML (Extensible Markup Language) 를 tree 구조로 나타내면,
DOM 은 xml 또는 html 문서를 tree 구조로 구성합니다.
DOM 은 프로그래밍 인터페이스 또는 API 라고 할 수 있는데, API 는 어느 언어와도 호환이 가능합니다.
DOM viewer online 을 통해 구조를 보면,
참고 사이트: https://software.hixie.ch/utilities/js/live-dom-viewer/
Live DOM Viewer
Live DOM Viewer ... Script not loaded. This script puts a function w(s) into the global scope of the test page, where s is a string or object to output to the log. Some files are available for testing purposes, notably "image" is an image. image and image.
software.hixie.ch
DOM
Document: file 파일(html or xml)
Object: file 의 tags 와 elements
Model: file 의 layout 또는 structure
결국 DOM 은
1) html 또는 xml 을 메모리에 tree 구조화한다 (Javascript 자바스크립트 같은 언어로 접근 가능)
2) 문서 컨탠츠(태그, 텍스트 등)를 쉽게 읽고 업데이트 할 수 있다.
3) html 또는 xml을 위한 API 이다.
'JavaScript' 카테고리의 다른 글
| async defer html 어디에서 javascipt 를 부를까? (0) | 2022.07.31 |
|---|---|
| 피보나치수열 만들기 - 자바스크립트 입문 3 (최종) (0) | 2022.05.04 |
| 기본 기능 & 변수 정의하기 - 자바스크립트 Javascript 입문 2 (0) | 2022.04.30 |
| 자바스크립트 Javascript 입문 1 (0) | 2022.04.29 |
| 자바스크립트 입문 자바스크립트 역사 (0) | 2022.04.29 |
