Skip to content

Commit 4f98f9b

Browse files
InSeong-SoInSeong-So
authored
Merge pull request #54 from InSeong-So/main
✏️ DOM μΆ”κ°€
2 parents 1a85f0b + f90772f commit 4f98f9b

4 files changed

Lines changed: 105 additions & 0 deletions

File tree

β€ŽBrowser/dom.mdβ€Ž

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
DOM(Document Object Model)은 HTML λ¬Έμ„œμ˜ 계측적 ꡬ쑰와 정보λ₯Ό ν‘œν˜„ν•˜κ³  이λ₯Ό μ œμ–΄ν•  수 μžˆλŠ” API인 ν”„λ‘œνΌν‹°μ™€ λ©”μ„œλ“œλ₯Ό μ œκ³΅ν•˜λŠ” 트리 κ΅¬μ‘°μž…λ‹ˆλ‹€. μ§€κΈˆλΆ€ν„° DOM에 λŒ€ν•΄ μ•Œμ•„λ΄…μ‹œλ‹€!
2+
3+
## λ…Έλ“œ
4+
### HTML μš”μ†Œμ™€ λ…Έλ“œ 객체
5+
> HTML μš”μ†Œ(Element)λŠ” HTML λ¬Έμ„œλ₯Ό κ΅¬μ„±ν•˜λŠ” κ°œλ³„μ μΈ μš”μ†Œμž…λ‹ˆλ‹€.
6+
7+
HTML μš”μ†ŒλŠ” λ Œλ”λ§ 엔진에 μ˜ν•΄ νŒŒμ‹±λ˜κ³  DOM을 κ΅¬μ„±ν•˜λŠ” μš”μ†Œ λ…Έλ“œ 객체둜 λ³€ν™˜λ©λ‹ˆλ‹€. μ΄λ•Œ HTML μš”μ†Œμ˜ μ–΄νŠΈλ¦¬λ·°νŠΈ(Attribute)λŠ” μ–΄νŠΈλ¦¬λ·°νŠΈ λ…Έλ“œ(Attribute Node)둜 HTML μš”μ†Œμ˜ ν…μŠ€νŠΈ 컨텐츠(Text Contents)λŠ” ν…μŠ€νŠΈ λ…Έλ“œ(Text Node)둜 λ³€ν™˜λ©λ‹ˆλ‹€.
8+
9+
<br>
10+
11+
<div align='center'>
12+
13+
<img src='./img/dom/html_element_node_object.jpg' width='900'/>
14+
15+
</div>
16+
17+
<br>
18+
19+
HTML λ¬Έμ„œλŠ” HTML μš”μ†Œμ˜ μ§‘ν•©μž…λ‹ˆλ‹€. λ”°λΌμ„œ HTML μš”μ†Œμ˜ 컨텐츠 μ˜μ—­μ— ν…μŠ€νŠΈ 뿐만 μ•„λ‹ˆλΌ λ‹€λ₯Έ HTML μš”μ†Œλ₯Ό ν¬ν•¨ν•˜λŠ” 쀑첩 관계λ₯Ό κ°–μŠ΅λ‹ˆλ‹€. μ΄λ•Œ HTML μš”μ†Œ κ°„μ—λŠ” 쀑첩 관계에 μ˜ν•œ 계측적 λΆ€λͺ¨-μžμ‹(Parent-Child) 관계가 ν˜•μ„±λ©λ‹ˆλ‹€.
20+
21+
μ΄λŸ¬ν•œ νŠΉμ„±μ„ λ°˜μ˜ν•΄ HTML μš”μ†Œλ₯Ό κ°μ²΄ν™”ν•œ λͺ¨λ“  λ…Έλ“œ 객체듀을 트리 자료둜 ꡬ성할 수 있죠.
22+
23+
<br>
24+
25+
### λ…Έλ“œ 객체의 νƒ€μž…
26+
27+
λ‹€μŒ HTML λ¬Έμ„œλ₯Ό λ Œλ”λ§ 엔진이 νŒŒμ‹±ν•œλ‹€κ³  μƒκ°ν•΄λ΄…μ‹œλ‹€.
28+
29+
```html
30+
<!DOCTYPE html>
31+
<html>
32+
<head>
33+
<meta charset="UTF-8">
34+
<link rel="stylesheet" href="style.css">
35+
</head>
36+
<body>
37+
<ul>
38+
<li id="apple">Apple</li>
39+
<li id="banana">Banana</li>
40+
<li id="orange">Orange</li>
41+
</ul>
42+
<script src="app.js"></script>
43+
</body>
44+
</html>
45+
```
46+
47+
λ Œλ”λ§ 엔진은 μ΄λ ‡κ²Œ DOM으둜 μƒμ„±ν•©λ‹ˆλ‹€.
48+
49+
<br>
50+
51+
<div align='center'>
52+
53+
<img src='./img/dom/dom.jpg' width='900'/>
54+
55+
</div>
56+
57+
<br>
58+
59+
> HTML μš”μ†Œ μ‚¬μ΄μ˜ **κ°œν–‰**κ³Ό **곡백**은 **곡백 ν…μŠ€νŠΈ λ…Έλ“œ**κ°€ λ˜λŠ”λ°, μœ„ κ·Έλ¦Όμ—μ„œλŠ” μƒλž΅λ˜μ—ˆμŠ΅λ‹ˆλ‹€.
60+
61+
μ΄λ ‡κ²Œ DOM은 λ…Έλ“œ 객체의 계측적인 ꡬ쑰둜 κ΅¬μ„±λ©λ‹ˆλ‹€. λ…Έλ“œ κ°μ²΄λŠ” μ’…λ₯˜(12개)도 있으며 상솑 ꡬ쑰도 κ°–μŠ΅λ‹ˆλ‹€. μ€‘μš”ν•œ λ…Έλ“œ ꡬ쑰(νƒ€μž…)은 4개인데, μ•„λž˜μ™€ κ°™μŠ΅λ‹ˆλ‹€.
62+
63+
- λ¬Έμ„œ λ…Έλ“œ(Document Node)
64+
- DOM 트리의 μ΅œμƒμœ„μ— μ‘΄μž¬ν•˜λŠ” 루트 λ…Έλ“œλ‘œμ„œ document 객체λ₯Ό κ°€λ¦¬ν‚΅λ‹ˆλ‹€.
65+
- document κ°μ²΄λŠ” λΈŒλΌμš°μ €κ°€ λ Œλ”λ§ν•œ HTML λ¬Έμ„œ 전체λ₯Ό κ°€λ¦¬ν‚€λŠ” κ°μ²΄λ‘œμ„œ μ „μ—­ 객체 window의 document ν”„λ‘œνΌν‹°μ— λ°”μΈλ”©λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.
66+
- HTML λ¬Έμ„œλ‹Ή document κ°μ²΄λŠ” μœ μΌν•©λ‹ˆλ‹€.
67+
- DOM 트리의 λ…Έλ“œλ“€μ— μ ‘κ·Όν•˜κΈ° μœ„ν•œ μ§„μž…μ „(Entry Point)μž…λ‹ˆλ‹€.
68+
- μš”μ†Œ λ…Έλ“œ(Element Node)
69+
- HTML μš”μ†Œλ₯Ό κ°€λ¦¬ν‚€λŠ” κ°μ²΄μž…λ‹ˆλ‹€.
70+
- HTML μš”μ†Œ κ°„ 쀑첩에 μ˜ν•œ λΆ€λͺ¨-μžμ‹ 관계λ₯Ό 가지고 이λ₯Ό 톡해 정보λ₯Ό κ΅¬μ‘°ν™”ν•©λ‹ˆλ‹€.
71+
- 즉 λ¬Έμ„œμ˜ ꡬ쑰λ₯Ό ν‘œν˜„ν•˜λŠ” λ…Έλ“œμž…λ‹ˆλ‹€.
72+
- μ–΄νŠΈλ¦¬λ·°νŠΈ λ…Έλ“œ(Attribute Node)
73+
- HTML μš”μ†Œμ˜ μ–΄νŠΈλ¦¬λ·°νŠΈλ₯Ό κ°€λ¦¬ν‚€λŠ” κ°μ²΄μž…λ‹ˆλ‹€.
74+
- μ–΄νŠΈλ¦¬λ·°νŠΈ λ…Έλ“œλŠ” μ–΄νŠΈλ¦¬λ·°νŠΈκ°€ μ§€μ •λœ HTML μš”μ†Œμ˜ μš”μ†Œ λ…Έλ“œμ™€ μ—°κ²°λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.
75+
- μ–΄νŠΈλ¦¬λ·°νŠΈ λ…Έλ“œμ— μ ‘κ·Όν•˜λ €λ©΄ λ¨Όμ € μš”μ†Œ λ…Έλ“œμ— μ ‘κ·Όν•΄μ•Ό ν•©λ‹ˆλ‹€.
76+
- ν…μŠ€νŠΈ λ…Έλ“œ(Text Node)
77+
- HTML μš”μ†Œμ˜ ν…μŠ€νŠΈλ₯Ό κ°€λ¦¬ν‚€λŠ” κ°μ²΄μž…λ‹ˆλ‹€.
78+
- ν…μŠ€νŠΈ λ…Έλ“œλŠ” DOM 트리의 μ’…μ μž…λ‹ˆλ‹€.
79+
- ν…μŠ€νŠΈ λ…Έλ“œμ— μ ‘κ·Όν•˜λ €λ©΄ λ¨Όμ € μš”μ†Œ λ…Έλ“œμ— μ ‘κ·Όν•΄μ•Ό ν•©λ‹ˆλ‹€.
80+
81+
<br>
82+
83+
### λ…Έλ“œ 객체의 상속 ꡬ쑰
84+
> DOM을 κ΅¬μ„±ν•˜λŠ” λ…Έλ“œ κ°μ²΄λŠ” μžμ‹ μ˜ ꡬ쑰와 정보λ₯Ό μ œμ–΄ν•  수 μžˆλŠ” DOM APIλ₯Ό μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
85+
86+
λ…Έλ“œ κ°μ²΄λŠ” μžμ‹ μ˜ λΆ€λͺ¨, ν˜•μ œ, μžμ‹μ„ νƒμƒ‰ν•˜κ³  μžμ‹ μ˜ μ–΄νŠΈλ¦¬λ·°νŠΈμ™€ ν…μŠ€νŠΈλ₯Ό μ‘°μž‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
87+
88+
DOM을 κ΅¬μ„±ν•˜λŠ” λ…Έλ“œ κ°μ²΄λŠ” λΈŒλΌμš°μ € ν™˜κ²½μ—μ„œ μ œκ³΅ν•˜λŠ” 호슀트 객체(Host Objects)μž…λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ λ…Έλ“œ 객체 λ˜ν•œ μžλ°”μŠ€ν¬λ¦½νŠΈ 객체둜 ν”„λ‘œν† νƒ€μž…μ— μ˜ν•œ 상속 ꡬ쑰λ₯Ό κ°–μ£ .
89+
90+
<br>
91+
92+
<div align='center'>
93+
94+
<img src='./img/dom/node_extends.jpg' width='900'/>
95+
96+
</div>
97+
98+
<br>
99+
100+
μœ„μ™€ 같이 Object, EventTarget, Node μΈν„°νŽ˜μ΄μŠ€λ₯Ό 상속 λ°›μ£ . 이λ₯Ό ν”„λ‘œν† νƒ€μž… 체인 κ΄€μ μ—μ„œ 생각해보면 μš”μ†Œ λ…Έλ“œ κ°μ²΄λŠ” ν”„λ‘œν† νƒ€μž… 체인에 μžˆλŠ” λͺ¨λ“  ν”„λ‘œν† νƒ€μž…μ˜ ν”„λ‘œνΌν‹°μ™€ λ©”μ„œλ“œλ₯Ό 상속받아 μ‚¬μš©ν•  수 μžˆλŠ” κ²ƒμž…λ‹ˆλ‹€.
101+
102+
κ²°κ΅­ DOM은 HTML λ¬Έμ„œμ˜ 계측적 ꡬ쑰와 정보λ₯Ό ν‘œν˜„ν•˜λŠ” 것은 λ¬Όλ‘ , λ…Έλ“œ 객체의 μ’…λ₯˜μ™€ λ…Έλ“œ νƒ€μž…μ— 따라 ν•„μš”ν•œ κΈ°λŠ₯을 ν”„λ‘œνΌν‹°μ™€ λ©”μ„œλ“œμ˜ 집합인 DOM API둜 μ œκ³΅ν•©λ‹ˆλ‹€. 이 DOM APIλ₯Ό 톡해 HTML κ΅¬μ‘°λ‚˜ λ‚΄μš© λ˜λŠ” μŠ€νƒ€μΌ 등을 λ™μ μœΌλ‘œ μ‘°μž‘ν•  수 있죠.
103+
104+
<hr>
105+
<br>

β€ŽBrowser/img/dom/dom.jpgβ€Ž

159 KB
Loading

β€ŽBrowser/img/dom/html_element_node_object.jpgβ€Ž

252 KB
Loading

β€ŽBrowser/img/dom/node_extends.jpgβ€Ž

177 KB
Loading

0 commit comments

Comments
Β (0)