๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
๐ŸŒŒ | WEB DEV/Vanilla JS

JS_๋ฌธ๋ฒ• (7)_DOM / BOM

by KASSID 2022. 2. 23.

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๋ฅผ ์ƒ๋žตํ•ด๋„ ๋œ๋‹ค.

 

์ฃผ์š” ๊ฐ์ฒด

๋ธŒ๋ผ์šฐ์ €์™€ ์šด์˜์ฒด์ œ ์ •๋ณด๋ฅผ ์ œ๊ณต

 

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"

๋ฐฐ๊ฒฝ์ƒ‰์„ ๋ฐ”๊พผ ๋ชจ์Šต์ด๋‹ค.

 

 

๋Œ“๊ธ€