[웹 렌더링 개념-1] DOM 개념

도마스묵의 개발일지·2021년 10월 27일
0

DOM (Doucment Object Model) 웹 문서를 객체환한 개념
document 객체는 window객체 하위에 있다.

Object Model이 필요한가?

스크립트로 사용자가 document를 조작하기 위해서는 웹 문서가 스크립트 객체 형식으로 표현돠어야한다.
이DOM 인터페이스를 통해 기술된 HTML element가 객체로서 자바스크립트로 연결되기 때문이다.

< html >이나 < body > 같은 html문서의 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만들면 그것을 문서 객체라고한다.

✔ js 뿐 아니라 python이나 다른 스크립트 언어로도 조작 가능하다.

DOM Tree

컴퓨터가 문서를 잘 처리할 수 있도록 문서에 대한 구조를 약속한 Tree 형태를 이용해서 표현한다.
(트리 자료 구조는 HTML 문서를 읽어 들이고 제어하기 가장 좋은 자료구조)

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>DOM 알아보기</title>
    <meta charset="UTF-8">
</head>
<body>
    <h1>DOM이란?</h1>
    <p><strong>Document Object Model</strong>의 줄임말입니다.</p>
</body>
</html>

특징

ㅇ 자료의 단순 나열이 아닌 연관 관계를 표현
- 노드 간에 부모 자식 관계를 갖음
. 나무나 족보 처럼 노드 사이의 관계가 계층적(Hierarchy) 관련성을 갖음
. 트리는 조상과 자손과의 관계 등을 효율적으로 표현할 수 있음

ㅇ 트리는 그래프의 일종
- 트리는 정점(노드) 및 선분(가지)으로 형성되는 그래프의 특수한 경우
. 서로 독립된 노드들이 선분에 의해서 연결된 계층형 자료구조
.. 순환 루프를 포함하지 않는 연결 그래프의 일종

ㅇ 단순 순환(Loop) 없이, 연결된 무방향 그래프 구조임
- 모든 노드 쌍 간에 유일한 단순 경로 만 존재함
. 즉, 임의 노드들 간에 연결은 하나의 경로로 만 가능

ㅇ 그래프 및 트리 구조는 비선형 자료구조에 속함
- 노드들의 속성을 선형 자료구조로 표현할 수 없는 경우에 사용됨

0개의 댓글