[DOM] DOM์ด๋ž€? ๐Ÿ‘€

mason.98ยท2022๋…„ 1์›” 6์ผ
0

CS

๋ชฉ๋ก ๋ณด๊ธฐ
1/3

๐Ÿ“‚ DOM(Document Object Model) ์ •์˜

์›น ๋ธŒ๋ผ์šฐ์ €์—์„œ HTML/XML์— ์ ‘๊ทผํ•˜๊ธฐ ์œ„ํ•œ ์ธํ„ฐํŽ˜์ด์Šค์ด๋‹ค.
์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“  HTML ํŒŒ์ผ์„ ์›น ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ฝ์„ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ์—ญํ• ๊ณผ,
์ฝ๊ณ  ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋„๋ก API๋ฅผ ์ œ๊ณตํ•œ๋‹ค.

์›น ๋ธŒ๋ผ์šฐ์ €๋Š” HTML ํƒœ๊ทธ๋“ค์„ ํ•œ ์ค„์”ฉ ์ฝ์œผ๋ฉด์„œ ๋…ธ๋“œ(Node) ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•˜๋Š” ๊ณผ์ •์„ ๊ฑฐ์นœ๋‹ค.
HTML ํƒœ๊ทธ์—๋Š” ๊ทธ์— ์ƒ์‘ํ•˜๋Š” DOM ํŠธ๋ฆฌ ์š”์†Œ๊ฐ€ ์žˆ๋‹ค.
์›น ๋ธŒ๋ผ์šฐ์ €๋Š” ์–ด๋–ค ๋‚ด์šฉ์„ ํ™”๋ฉด์— ๋ Œ๋”๋งํ• ์ง€ ๊ฒฐ์ •ํ•˜๋Š”๋ฐ ์ด ๋•Œ ๋ Œ๋”ํŠธ๋ฆฌ(Render Tree)๊ฐ€ ์ƒ์„ฑ๋œ๋‹ค.


๐Ÿ“‚ ๋…ธ๋“œ(Node) ๊ฐ์ฒด


๋…ธ๋“œ๋Š” EventTarget ๊ฐ์ฒด๋ฅผ ์ƒ์†๋ฐ›๋Š”๋‹ค. ๋”ฐ๋ผ์„œ ๋ชจ๋“  ๋…ธ๋“œ(Node)๋Š” ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.
EventTarget ๊ฐ์ฒด์—๋Š” ์šฐ๋ฆฌ๊ฐ€ ๋ฒ„ํŠผ ํด๋ฆญ ์ด๋ฒคํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์“ฐ๋Š” addEventListener()๋ฅผ ๊ฐ–๊ณ  ์žˆ๋Š” ๊ฐ์ฒด์ด๋‹ค.

๋…ธ๋“œ ๋ฐ‘์—๋Š” Document, Element, Text ๋“ฑ์ด ์กด์žฌํ•˜๋ฉฐ, ์—ฌ๊ธฐ์„œ Element์—๋Š” ์šฐ๋ฆฌ๊ฐ€ ์ž˜ ์•Œ๊ณ  ์žˆ๋Š”
HTML ํƒœ๊ทธ๊ฐ€ ํฌํ•จ๋˜์–ด์žˆ๋‹ค.

HTML ํƒœ๊ทธ๋Š” HTMLElement ๊ฐ์ฒด๋ฅผ ์ƒ์†ํ•˜๊ณ ,
HTMLElement๋Š” Element ๊ฐ์ฒด๋ฅผ ์ƒ์†ํ•˜๊ณ ,
Element๋Š” Node๋ฅผ, Node๋Š” EventTarget์„ ์ƒ์†ํ•œ๋‹ค.

์ด๋Ÿฌํ•œ ์ด์œ ๋•Œ๋ฌธ์— ์šฐ๋ฆฌ๊ฐ€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(JS)์—์„œ ๋ณ€์ˆ˜๋กœ HTMLํƒœ๊ทธ๋ฅผ ํ• ๋‹น๋ฐ›๊ณ , HTML ํƒœ๊ทธ์— ์ด๋ฒคํŠธ๋ฅผ ๊ฑธ ์ˆ˜ ์žˆ์—ˆ๋˜ ๊ฒƒ์ด๋‹ค.

EventTarget์˜ ๋ฉ”์†Œ๋“œ ๐Ÿ”
1. addEventListener() - ์ด๋ฒคํŠธ ์ƒ์„ฑ
2. removeEventListener() - ์ด๋ฒคํŠธ ์‚ญ์ œ
3. dispathEvent() - ์ƒˆ๋กœ์šด ์ด๋ฒคํŠธ ๋ฐœํ–‰

Node์˜ ๋ฉ”์†Œ๋“œ ๐Ÿ”
appendChild(), firstChild ... ๋“ฑ


๐Ÿ“‚ DOM์— ๊ด€ํ•˜์—ฌ

1. DOM์€ ๋ฌธ์„œ์˜ ํ•˜์œ„ ์š”์†Œ๋ฅผ ์–ป๊ธฐ ์œ„ํ•œ API๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
document.getElementById()๊ฐ€ ๋Œ€ํ‘œ์ ์ด๋‹ค.

2. DOM์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๊ฐ€ ์•„๋‹ˆ๋‹ค.
DOM์ด ์—†๋‹ค๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์›น ํŽ˜์ด์ง€ ์š”์†Œ๋“ค๊ณผ ๊ด€๋ จ๋œ ์ •๋ณด๋ฅผ ์–ป์ง€ ๋ชปํ•œ๋‹ค.

3. html์˜ ๋ชจ๋“  ์š”์†Œ๋Š” DOM์˜ ํ•œ ๋ถ€๋ถ„์ด๋ฏ€๋กœ DOM๊ณผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด์„œ ์ ‘๊ทผํ•˜๊ณ  ์กฐ์ž‘ํ•  ์ˆ˜ ์žˆ๋‹ค.

4. DOM์€ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๋กœ๋ถ€ํ„ฐ ๋…๋ฆฝ์ ์ด๋‹ค.
๋ฌธ์„œ์˜ ๊ตฌ์กฐ์  ํ‘œํ˜„์€ ๋‹จ์ผ API๋กœ ์ด์šฉ๊ฐ€๋Šฅํ•˜๋ฉฐ, DOM์˜ ๊ตฌํ˜„์€ ์–ด๋– ํ•œ ์–ธ์–ด์—์„œ๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค. (Python, JavaScript ๋“ฑ)

5. DOM์˜ ๋ชจ๋“  ๊ฐ์ฒด๋Š” ํด๋ž˜์Šค๋ฅผ ์ƒ์†๋ฐ›๋Š”๋‹ค.
DOM ์•„๋ž˜์— ์žˆ๋Š” ๊ฐ์ฒด(HTMLElement)๋“ค์€ Element๊ฐ์ฒด๋ฅผ ์ƒ์†๋ฐ›์œผ๋ฏ€๋กœ ์š”์†Œ๋ผ๊ณ  ํ•  ์ˆ˜ ์žˆ๋‹ค.
ํƒœ๊ทธ ํ•˜๋‚˜ํ•˜๋‚˜๊ฐ€ ๋ชจ๋‘ ๊ฐ์ฒด์ด๋‹ค.

6. DOM์€ HTML์ด ์•„๋‹ˆ๋‹ค.
DOM์€ ๋‚ด๊ฐ€ ์ž‘์„ฑํ•œ HTML ์†Œ์Šค์™€ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ๋‹ค.

1) HTML์†Œ์Šค๊ฐ€ ์œ ํšจํ•˜์ง€ ์•Š์„ ๋•Œ
๊ฐœ๋–ก๊ฐ™์ด ์ ์–ด๋„ ์ฐฐ๋–ก๊ฐ™์ด ์•Œ์•„ ๋“ค์„ ๋•Œ์ด๋‹ค. ๊ฐ„๋‹จํ•œ ์˜ˆ์‹œ๋ฅผ ๋ด๋ณด์ž.
<head> ์™€ <body> ํƒœ๊ทธ๊ฐ€ ๋น ์ ธ์žˆ๋‹ค.

ํ•˜์ง€๋งŒ DOM ํŠธ๋ฆฌ์—์„œ๋Š” ์œ„์™€ ๊ฐ™์ด ์˜ฌ๋ฐ”๋ฅด๊ฒŒ ๊ต์ •๋œ๋‹ค.

2) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ DOM์„ ์ˆ˜์ •ํ•  ๋•Œ
์šฐ๋ฆฌ๋Š” ์ž์ฃผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•˜์—ฌ ์†Œ์Šค๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์‚ญ์ œํ•˜๊ณค ํ•œ๋‹ค.
createTextNod(), appendChild() ๋“ฑ์„ ํ†ตํ•˜์—ฌ ์ƒˆ๋กœ์šด ๊ฐ์ฒด๋ฅผ ์ถ”๊ฐ€๋ฅผ ํ•˜์—ฌ๋„,
์›๋ณธ HTML ์†Œ์Šค๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š”๊ฑด ์•„๋‹ˆ๋‹ค. ์ด๊ฒŒ HTML๊ณผ DOM์˜ ๋‹ค๋ฅธ ์ ์ด๋‹ค.

7. DOM์€ ๊ฐœ๋ฐœ์ž๋„๊ตฌ์—์„œ ๋ณด์ด๋Š” ๊ฒƒ๊ณผ ๋‹ค๋ฅด๋‹ค.
F12๋ฒ„ํŠผ์„ ํ†ตํ•ด DOM๊ณผ ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ๊ทผ์‚ฌ์น˜๋ฅผ ๋ณผ ์ˆ˜ ์žˆ์ง€๋งŒ, ๊ทผ๋ณธ์ ์œผ๋กœ DOM๊ณผ๋Š” ๋‹ค๋ฅด๋‹ค.
์˜ˆ๋ฅผ ๋“ค์–ด css์˜ ::before, ::after ์„ ํƒ์ž๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ƒ์„ฑ๋œ ์š”์†Œ๋Š” ๊ฐœ๋ฐœ์ž๋„๊ตฌ์—์„œ ํ™•์ธ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. CSSOM๊ณผ ๋ Œ๋”ํŠธ๋ฆฌ์˜ ์ผ๋ถ€์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

ํ•˜์ง€๋งŒ DOM์€ ์˜ค์ง ์›๋ณธ HTML ์†Œ์Šค๋กœ๋ถ€ํ„ฐ ๋นŒ๋“œ๋˜๋ฏ€๋กœ, ์š”์†Œ์— ์ ์šฉ๋˜๋Š” ์Šคํƒ€์ผ์„ ํฌํ•จํ•˜์ง€ ์•Š๋Š”๋‹ค. ๋•Œ๋ฌธ์— ์ด ์š”์†Œ๋Š” DOM์˜ ์ผ๋ถ€๊ฐ€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋กœ๋„ ์ˆ˜์ •ํ•  ์ˆ˜ ์—†๋‹ค.


๐Ÿ“‚ ๋ Œ๋” ํŠธ๋ฆฌ(Render Tree)

Render Tree = DOM + CSSOM
๋ Œ๋”ํŠธ๋ฆฌ๋Š” DOM๊ณผ CSSOM์„ ํ•ฉํ•œ ํ›„์— ์ตœ์ข…์ ์œผ๋กœ ๋ธŒ๋ผ์šฐ์ €์— ํ‘œ์‹œ๋  ๊ฒƒ๋“ค๋งŒ์„ ์–˜๊ธฐํ•œ๋‹ค.
DOM์€ ๊ฐ HTML ํƒœ๊ทธ ์š”์†Œ์— ๋Œ€ํ•œ ์ •๋ณด๊ฐ€ ๋“ค์–ด๊ฐ€ ์žˆ์œผ๋ฉฐ,
CSSOM์€ ๊ฐ ํƒœ๊ทธ ์š”์†Œ์— ๋Œ€ํ•œ CSS ์†์„ฑ์ด ๋“ค์–ด๊ฐ€ ์žˆ๋‹ค.

style:none๊ณผ ๊ฐ™์ด ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์ด์ง€ ์•Š๋Š” ์†์„ฑ์„ ๊ฐ–๊ณ  ์žˆ๋Š” <span>ํƒœ๊ทธ๋Š” ๋ Œ๋”ํŠธ๋ฆฌ์—์„œ ์ƒ๋žต๋˜์—ˆ๋‹ค. ์ด๊ฒŒ DOM๊ณผ ๋‹ค๋ฅธ ์  ์ค‘ ํ•˜๋‚˜์ด๋‹ค.

visibility : hidden - ๋น„์–ด์žˆ๋Š” ์ƒ์ž๋กœ ๋ Œ๋”๋ง ๋œ๋‹ค.
style : none - ๋ Œ๋” ํŠธ๋ฆฌ์—์„œ ์™„์ „ํžˆ ์ œ๊ฑฐ๋œ๋‹ค.


https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction
https://onlydev.tistory.com/9
https://from2020.tistory.com/23
https://wit.nts-corp.com/2019/02/14/5522
https://velog.io/@godori/DOM%EC%9D%B4%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

profile
wannabe---ing

0๊ฐœ์˜ ๋Œ“๊ธ€