| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- 항해99
- JavaScript
- 백준
- 항해99솔직후기
- 부트캠프항해
- 로딩 후 실행
- 숫자를 별점으로
- jQuery
- react
- 서버 컴포넌트
- 중복카테고리
- 알고리즘
- 그리디
- 클라이언트 컴포넌트
- 프로그래머스
- db수정
- greedy
- 항해99추천
- server component
- 중복선택
- 자바스크립트
- 동전 0
- 항해99후기
- 날씨 api
- 탐욕알고리즘
- 배열 메소드
- 배열 중복 제거
- 카테고리필터
- 실전프로젝트
- NextJS v13
- Today
- Total
공부 및 일상기록
BOM과 DOM에 대하여 본문
웹 브라우저의 구성 요소들은 하나하나 객체화가 되어있다. 자바스크립트는 이 객체를 제어해서 웹브라우저를 제어할 수 있게 된다. 이 객체들은 서로 계층적인 관계로 구조화 되어있다. BOM 과 DOM은 이 구조를 구성하고 있는 가장 큰 틀의 분류라고 할 수 있다.
이 관계를 그림으로 나타내면 아래와 같다.
먼저 window 라는 전역 객체가 있고 해당 세가지 모델이 존재한다.
DOM
윈도우에서 document 프로퍼티에 접근하기 위해서는 window.document로 접근 할 수 있다.
그런데 윈도우는 전역객체이므로 앞의 window는 생략 가능하여 document 라고만 써도 접근 가능하다.
document 객체가 하는 역할은 웹페이지에 있는 문서를 제어한다. (<body>, <img> etc...)
DOM의 특징
- 문서에 대한 모든 내용을 담고 있는 객체이다. (문서는 html, xml을 의미)
- 텍스트 파일로 만들어진 문서를 브라우저가 이해할 수 있는 구조로 구성한 것
- HTML 요소 간의 부자 관계를 반영하여 모든 노드들을 트리 구조로 구성한 것
- 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 문서구조, 스타일, 내용 등을 변경할 수 있게 도움
html요소는 html문서를 구성하는 개별적인 요소를 의미한다. html요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소노드 객체로 변환된다. 이 때, 요소의 어트리뷰트는 어트리뷰트 노드로, 텍스트 콘텐츠는 텍스트 노드로 변환된다.
문서노드
DOM 트리의 최상위에 존재하는 루트로서 document객체를 가리킨다.
html 문서당 document객체는 유일하다.
DOM 트리의 루트노드이므로 DOM트리의 노드들에 접근하기 위한 진입점 역할을 한다.
즉 요소, 어트리뷰트, 텍스트 노드에 접근하기 위해서 문서노드를 이용해야 한다.
요소노드
html요소를 가리키는 객체다.
html요소 간의 중첩에 의해 부자 관계를 가지며, 이 부자 관계를 통해 정보를 구조화 한다.
즉 요소노드는 문서의 구조를 표현한다.
어트리뷰트 노드
html요소의 어트리뷰트를 가리키는 객체다.
어트리뷰트 노드는 지정된 html요소의 요소 노드와 형제를 갖는다. (부모 노드와의 연결은 없다)
어트리뷰트 노드에 접근하여 어트리뷰트를 참조하거나 변경하려면 먼저 형제노드인 요소노드에 접근해야 한다.
텍스트 노드
html요소의 텍스트를 가리키는 객체이다.
문서의 정보를 표현한다.
텍스트 노드는 요소 노드의 자식 노드이며, 자식 노드를 가질 수 없는 리프 노드이다.
텍스트 노드에 접근하려면 먼저 부모 노드인 요소 노드에 접근해야 한다.
DOM API
정적인 웹페이지에 접근하여 동적으로 웹페이지를 변경하기 위한 유일한 방법은 메모리 상에 존재하는 DOM을 변경하는 것이고 이때 필요한 것이 DOM에 접근하고 변경하는 프로퍼티와 메소드의 집합인 DOM API이다.
BOM (browser object model)
window객체의 프로퍼티로, 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화 시킨 것이다.
- 웹 브라우저 환경의 다양한 기능을 객체처럼 다루는 모델
- 대부분 브라우저에서 구현되어 있지만, 정의된 표준이 없어 제작사마다 세부사항은 다름
- window객체는 자바스크립트 최상위 객체이자 전역객체이면서 모든 객체가 소속된 객체
사실 document객체도 BOM에 포함되는 관계이다. 하지만 중요도가 높아 따로 분리하여 본다.
https://yung-developer.tistory.com/74
DOM & BOM 이해하기
1. DOM은 왜 필요할까? 웹 사이트는 크게 세가지의 요소로 구성됩니다. 먼저, HTML은 웹 페이지의 제목, 이미지, 표 등을 정의하고 그 구조와 의미를 부여하는 정적 언어로 웹의 전체적인 구조를 담
yung-developer.tistory.com
'개발' 카테고리의 다른 글
| [NextJS] Next.JS 란 무엇인가? (0) | 2023.01.17 |
|---|---|
| SPA, MPA에 대해 (0) | 2023.01.13 |
| 리플로우와 리페인트에 대하여 (0) | 2023.01.13 |
| 브라우저 렌더링 과정 (0) | 2023.01.13 |
| <jQuery> 임포트 주소 (0) | 2022.09.13 |
