| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 |
- 코딩테스트 js
- DOM
- Flex Container
- 국비지원
- margin-left
- 노드
- CSS
- html
- K디지털기초역량훈련
- 코딩테스트 lv0
- javascript
- 리액트
- 변수 선언
- 프로그래머스 JS
- flex
- 프로그래머스 lv0
- 자바스크립트
- 패스트캠퍼스
- js split
- 호이스팅
- react강의
- flex item
- 나라사랑카드
- js
- API
- React
- SVG
- 바이트디그리
- udemy
- 내일배움카드
- Today
- Total
꺾이지 않는 마음
[JS] DOM이란? - DOM tree 구조와 사용 이유 본문
Q1. DOM이란?
Document Object Model의 줄임말로, 문서 내의 HTML 요소들을 객체화하여 트리 구조의 형태로 표현한 모델을 말한다.
이는 문자열로 표현된 HTML 파일을 자바스크립트가 이해할 수 있도록 한 것이며,
이를 통해 자바스크립트로 HTML 요소에 접근하여 다양한 조작을 가할 수 있다.
Q2. DOM을 사용하는 이유?
HTML, CSS를 조작하여 사용자와 상호작용 하기 위함이다.
HTML과 CSS만으로 작성된 웹 페이지는 정적이다. HTML과 CSS는 짜여진 코드대로 웹 페이지에 내용을 표시할 뿐, 사용자와의 다양한 상호작용 기능을 구현하기 위해선 자바스크립트를 활용해야 한다. 자바스크립트는 HTML과 CSS에 접근하여 조작함으로써 보다 동적인 기능을 웹에 구현한다.
하지만 자바스크립트는 HTML 문서를 그대로 읽을 수 없다. HTML은 자바스크립트에겐 그저 텍스트로 이루어진 문자열일 뿐이다. 자바스크립트가 HTML 문서에 접근하기 위한 수단으로 DOM을 사용한다. 즉, 웹 페이지를 보다 더 유연하게, 동적으로, 상호작용적으로 만들기 위해 DOM을 사용한다.
Q3. DOM은 어떻게 만들어질까?
사용자가 특정 사이트에 접속하면 웹 브라우저는 HTML 파일을 달라고 요청한다.
요청을 받은 서버는 사용자가 입력한 도메인 주소를 확인하고 이에 대응하는 HTML 파일을 응답으로 보내준다.
웹 브라우저는 서버로부터 받은 이 HTML 파일을 가지고 새롭게 DOM Tree를 구성한 후, 사용자의 화면에 적합하게 표시한다.
즉, DOM은 브라우저가 서버로 부터 HTML 파일을 받아 자바스크립트가 접근할 수 있도록 각 요소를 객체화하여 만든 객체 모델이다.
여기서 객체화란,
문서 내의 모든 태그, 텍스트, 속성 등 개개의 대상을 객체로 만들고 부모-자식 관계처럼 상하관계로 연결하는 것을 말한다.
자바스크립트는 HTML 코드를 읽을 수 없지만, 객체는 이해할 수 있다.
그렇기에 HTML 코드의 각 요소들을 객체화하여 자바스크립트로 접근하는 것이다.
HTML 문서 내의 모든 태그, 텍스트, 속성 등이 객체가 되어
부모-자식 관계 혹은 형제관계로 서로 얽혀있는 모델이 바로 DOM인 것이다.
자바스크립트는 DOM tree에 있는 객체에 접근법하여 HTML 요소를 조작할 수 있게 된다.
Q4. 노드? 트리? 그게 뭔가요?
DOM에서 객체화 한 개개의 대상을 노드라고 한다.
노드는 연결점이라는 뜻을 갖고 있는 단어이다.
개개의 대상이 서로 상하관계 혹은 형제관계로 연결되어 있어 노드라고 부르며,
각 노드들이 맨 위에서 부터 상하관계로 연결되어 있는 구조가 마치 나무(트리)처럼 생겼다 하여 DOM Tree라고도 부른다.
브라우저는 Documnet라는 객체를 생성한 후 본인이 구성한 DOM Tree를 그 안에 집어넣는다.
그러므로 모든 노드는 기본적으로 Document라는 내장 객체를 거쳐서 접근한다.
노드는 크게 두가지로 나뉘는데,
요소 노드와 텍스트 노드다.
요소 노드는 html 태그와 css 속성을 모두 지칭한다.
텍스트 노드는 말 그대로 태그가 감싸고 있는 일반적인 텍스트를 지칭한다.
물론 태그가 안감싸고 있는 그냥 텍스트도 포함이다.
HTML 문서의 최상단에는 항상 <html> 태그가 감싸고 있으므로 <html> 태그를 root element라고 한다.
각 요소들이 뻗어 나오는 시작점이여서 뿌리라고 하는 것이다.
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
| [JS] var, let, const 비교하기 (0) | 2022.08.27 |
|---|---|
| [JS] 제어문에서 'Try-catch'로 오류 처리하기 (0) | 2022.08.26 |
| [JS] 호이스팅이란? - let, const, var에 대하여 (0) | 2022.08.21 |
| [JS] innerHTML과 innerAdjacentHTML 비교하기 (0) | 2022.08.01 |
| [JS] 유튜브 영상 IFrame API로 가져오기 (0) | 2022.07.29 |
