JS_문법 (7)_DOM / BOM Kassid

DOM

Document Object Model의 약자이다

Document = HTML 전체 코드
Object = HTML 태그

DOM은

객체를 가져와서 변수에 넣고

변수or메서드를 이용해

추가, 변경, 삭제 등의 제어를 하는 것을 말한다.

(한줄요약)

document라는 객체가 만들어지고 그 안의 여러가지 것들을 제어하는 것

웹브라우저 동작 과정

| 1 |

HTML파일 가져오기

| 2 |

가져온 HTML파일을 파싱하여 DOM tree 생성

(태그를 기반으로 하여 분석!)

CSS 정보 파싱하여 CSSOM tree 생성

| 3 |

DOM/CSSOM tree를 기반으로 Render tree 생성

| 4 |

Render tree를 기반으로 렌더링을 한다.

웹브라우저 동작과정 & JS

이번에는 JS가 첨가된 경우에 대해서 알아보자

위의 과정 중에

<head>태그 내에 <script>로 JS코드를 넣으면

DOM트리를 구성하는 것을 멈추고 JS엔진에 소유권을 넘긴다.

JS엔진이 javascript 코드 파일을 로드해서 실행한 뒤

다시 HTML로 넘어와서 트리 구성 작업을 재개한다.

즉,

head 내에 JS코드를 넣는 것은

화면 로딩을 느리게 할 수 있고

DOM tree 구성 전에 js가 실행되므로

정상 실행이 되지 않을 수 있다.

해결방법은

</body> 태그의 바로 직전에

<script>태그를 넣어주는 것이다!!

BOM

Browser Object Model의 약자이다.

DOM이 document라는 객체가 만들어지고

그 안의 여러가지 것들을 제어할 수 있는 것이라면,

BOM은

window라는 이름으로 브라우저를

제어할 수 있는 객체들이 만들어지는 것이다.

window.(객체)

하지만 window를 생략해도 된다.

주요 객체

navigator

브라우저와 운영체제 정보를 제공

location

URL관련을 다룬다.

console.log(navigator.userAgent)
console.log(navigator.platform)
console.log(location.href)

>>>
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36
Win32
chrome://new-tab-page/

//window.console.log(window.navigator.userAgent)
//window를 생략해도 같은 결과!

document

HTML/CSS를 제어할 수 있다.

window.document.body.style.background = "blueviolet"

배경색을 바꾼 모습이다.

저작자표시 (새창열림)

'🌌 | WEB DEV > Vanilla JS' 카테고리의 다른 글

JS_문법 (9)_이벤트 (0)	2022.02.24
JS_문법 (8)_DOM CRUD 파헤치기 (0)	2022.02.24
JS_문법 (6)_promise 메서드(catch, finally, all, race 등 ) (0)	2022.02.20
JS_문법 (5)_동기/비동기 처리 (0)	2022.02.18
JS_문법 (4)_Scope (0)	2022.02.17

JS_문법 (7)_DOM / BOM

DOM

웹브라우저 동작 과정

웹브라우저 동작과정 & JS

BOM

주요 객체

navigator

location

document

'🌌 | WEB DEV > Vanilla JS' 카테고리의 다른 글

댓글

티스토리툴바

JS_문법 (7)_DOM / BOM

DOM

웹브라우저 동작 과정

웹브라우저 동작과정 & JS

BOM

주요 객체

navigator

location

document

'🌌 | WEB DEV > Vanilla JS' 카테고리의 다른 글

관련글

댓글

티스토리툴바