๐ก DOM(Document Object Model)์ HTML ๋ฌธ์์ ๊ณ์ธต์ ๊ตฌ์กฐ์ ์ ๋ณด๋ฅผ ํํํ๋ฉฐ ์ด๋ฅผ ์ ์ดํ ์ ์๋ API, ์ฆ ํ๋กํผํฐ์ ๋ฉ์๋๋ฅผ ์ ๊ณตํ๋ ํธ๋ฆฌ ์๋ฃ๊ตฌ์กฐ๋ค.
01. ๋ ธ๋
1. HTML ์์์ ๋ ธ๋ ๊ฐ์ฒด
HTML ์์(element)๋ HTML ๋ฌธ์๋ฅผ ๊ตฌ์ฑํ๋ ๊ฐ๋ณ์ ์ธ ์์์ด๋ฉฐ ๋ ๋๋ง ์์ง์ ์ํด ํ์ฑ๋์ด DOM์ ๊ตฌ์ฑํ๋ ์์ Node ๊ฐ์ฒด๋ก ๋ณํ๋๋ค.
HTML ๋ฌธ์๋ HTML ์์๋ค์ ์งํฉ์ผ๋ก ์ด๋ค์ง๋ฉฐ, ์์์์ ์ค์ฒฉ ๊ด๊ณ์ ์ํด ๊ณ์ธต์ ์ธ parent-child(๋ถ์) ๊ด๊ณ๊ฐ ํ์ฑ๋๋ค.
HTML ์์ ๊ฐ์ ๊ด๊ณ๋ฅผ ๋ฐ์ํ์ฌ HTML ์์๋ฅผ ๊ฐ์ฒดํํ ๋ชจ๋ ๋ ธ๋ ๊ฐ์ฒด๋ค์ ํธ๋ฆฌ ์๋ฃ๊ตฌ์กฐ๋ก ๊ตฌ์ฑํ๋ค.
๐ก ๋ ธ๋ ๊ฐ์ฒด๋ค๋ก ๊ตฌ์ฑ๋ ํธ๋ฆฌ ์๋ฃ๊ตฌ์กฐ๋ฅผ DOM ๋๋ DOM Tree ๋ผ๊ณ ํ๋ค.
2. ๋ ธ๋ ๊ฐ์ฒด์ ํ์
์์ 39-01
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<ul>
<li id="apple">Apple</li>
<li id="banana">Banana</li>
<li id="orange">Orange</li>
</ul>
<script src="app.js"></script>
</body>
</html>
โก๏ธ ์์ 39-01์ HTML ๋ฌธ์๋ฅผ ๋ ๋๋ง ์์ง์ด ํ์ฑํ๋ฉด ๊ทธ๋ฆผ 39-4์ ๊ฐ์ด DOM์ ์์ฑํ๋ค.
๐ก DOM์ ์ค์ํ ๋ ธ๋ ํ์ 4๊ฐ์ง
๐น ๋ฌธ์ ๋ ธ๋ (Document Node)
- DOM ํธ๋ฆฌ์ ์ต์์์ ์กด์ฌํ๋ ๋ฃจํธ ๋ ธ๋๋ก, document ๊ฐ์ฒด ์์ฒด, ๋ธ๋ผ์ฐ์ ๊ฐ ๋ ๋๋งํ HTML ๋ฌธ์ ์์ฒด๋ฅผ ๊ฐ๋ฆฌํค๋ ๊ฐ์ฒด์ด๋ฉฐ ์ ์ญ ๊ฐ์ฒด window์ document ํ๋กํผํฐ์ ๋ฐ์ธ๋ฉ๋์ด ์๋ค. (-> window.document for document๋ก ์ฐธ์กฐ)
- HTML ๋ฌธ์๋น document ๊ฐ์ฒด๋ ์ ์ผํ์ฌ ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ ํ๋์ document ๊ฐ์ฒด๋ฅผ ๋ฐ๋ผ๋ณธ๋ค.
- ์์, ์ดํธ๋ฆฌ๋ทฐํธ, ํ ์คํธ ๋ ธ๋์ ์ ๊ทผํ๋ ค๋ฉด ๋ฌธ์ ๋ ธ๋๋ฅผ ํตํด์ผ ํ๋ ์ง์ ์ (entry point) ์ญํ ์ ํ๋ค.
๐น ์์ ๋ ธ๋ (Element Node)
- HTML ์์๋ฅผ ๊ฐ๋ฆฌํค๋ ๊ฐ์ฒด๋ค.
- ์์ ๊ฐ์ ์ค์ฒฉ์ ์ํด ๋ถ์ ๊ด๊ณ๋ฅผ ๊ฐ์ง๊ณ ์ด๋ฅผ ํตํด ๊ตฌ์กฐํํ๋ค.
- ๋ฌธ์์ ๊ตฌ์กฐ๋ฅผ ํํํ๋ค.
๐น ์ดํธ๋ฆฌ๋ทฐํธ ๋ ธ๋ (Attribute Node)
- HTML ์์์ ์ดํธ๋ฆฌ๋ทฐํธ๋ฅผ ๊ฐ๋ฆฌํค๋ ๊ฐ์ฒด๋ค.
- ๋ถ๋ชจ ๋ ธ๋์ ์ฐ๊ฒฐ๋์ง ์๊ณ , ๊ด๋ จ๋ ์์ ๋ ธ๋์๋ง ์ง์ ์ฐ๊ฒฐ๋์ด ์๋ค.
๐น ํ ์คํธ ๋ ธ๋ (Text Node)
- HTML ์์์ ํ ์คํธ๋ฅผ ๊ฐ๋ฆฌํค๋ ๊ฐ์ฒด๋ค.
- ์์ ๋ ธ๋๋ฅผ ๊ฐ์ง ์ ์๋ ๋ฆฌํ ๋ ธ๋(leaf node) ์ด๋ฏ๋ก DOM ํธ๋ฆฌ์ ์ต์ข ๋จ์ด๋ค.
- ๋ฌธ์์ ์ ๋ณด๋ฅผ ํํํ๋ค.
3. ๋ ธ๋ ๊ฐ์ฒด์ ์์ ๊ตฌ์กฐ
DOM์ ๊ตฌ์ฑํ๋ ๋ ธ๋ ๊ฐ์ฒด๋ ์์ ์ ๊ตฌ์กฐ์ ์ ๋ณด๋ฅผ ์ ์ดํ ์ ์๋ DOM API๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
์ด๋ฅผ ํตํด ์์ ์ ๋ถ๋ชจ, ํ์ , ์์์ ํ์ํ ์ ์์ผ๋ฉฐ attribute์ ํ ์คํธ๋ฅผ ์กฐ์ํ ์๋ ์๋ค.
โก๏ธ ์๋ฅผ ๋ค์ด, input ์์ ๋ ธ๋ ๊ฐ์ฒด๋ ํ๋กํ ํ์ ์ฒด์ธ์ ์๋ ๋ชจ๋ ํ๋กํ ํ์ ์ ํ๋กํผํฐ๋ ๋ฉ์๋๋ฅผ ์์๋ฐ์ ์ฌ์ฉํ ์ ์๋ค.
- ๋ ธ๋ ๊ฐ์ฒด์ ์์ ๊ตฌ์กฐ๋ ๊ฐ๋ฐ์ ๋๊ตฌ์ Elements ํจ๋ ์ฐ์ธก์ Properties ํจ๋์์ ํ์ธํ ์ ์๋ค.
๐น ๋ ธ๋ ๊ฐ์ฒด์๋ ๋ ธ๋ ๊ฐ์ฒด์ ์ข ๋ฅ(ํ์ )์ ์๊ด์์ด ๊ณตํต์ผ๋ก ๊ฐ๋ ๊ธฐ๋ฅ๋ ์๊ณ , ๋ ธ๋ ํ์ ์ ๋ฐ๋ผ ๊ณ ์ ํ ๊ธฐ๋ฅ๋ ์๋ค.
-> EventTarget ์ธํฐํ์ด์ค๊ฐ ์ ๊ณตํ๋ ์ด๋ฒคํธ ๊ด๋ จ ๊ธฐ๋ฅ.. / Node ์ธํฐํ์ด์ค๊ฐ ์ ๊ณตํ๋ ๋ ธ๋ ๊ด๋ จ ๊ธฐ๋ฅ ..
๐ก DOM์ HTML ๋ฌธ์์ ๊ณ์ธต์ ๊ตฌ์กฐ์ ์ ๋ณด๋ฅผ ํํํ๋ ๊ฒ์ ๋ฌผ๋ก ์ด๊ณ , ๋ ธ๋ ๊ฐ์ฒด์ ์ข ๋ฅ, ์ฆ ๋ ธ๋ ํ์ ์ ๋ฐ๋ผ ํ์ํ ๊ธฐ๋ฅ์ ํ๋กํผํฐ์ ๋ฉ์๋์ ์งํฉ์ธ DOM API๋ก ์ ๊ณตํ๋ค. ์ด DOM API๋ฅผ ํตํด HTML์ ๊ตฌ์กฐ์ ๋ด์ฉ ๋๋ ์คํ์ผ ๋ฑ์ ๋์ ์ผ๋ก ์กฐ์ํ ์ ์๋ค.
02. ์์ ๋ ธ๋ ์ทจ๋
HTML์ ๊ตฌ์กฐ๋ ๋ด์ฉ ๋๋ ์คํ์ผ ๋ฑ์ ๋์ ์ผ๋ก ์กฐ์ํ๋ ค๋ฉด ๋จผ์ ์์ ๋ ธ๋๋ฅผ ์ทจ๋ํด์ผ ํ๋ค.
1. id๋ฅผ ์ด์ฉํ ์์ ๋ ธ๋์ ์ทจ๋
๐น Document.prototype.getElementByID ๋ฉ์๋๋ ์ธ์๋ก ์ ๋ฌํ id attribute ๊ฐ์ ๊ฐ๋ ํ๋์ element node๋ฅผ ํ์ํด ๋ฐํํ๋ค.
๐น id ๊ฐ์ HTML ๋ฌธ์ ๋ด์์ ์ ์ผํ ๊ฐ์ด์ด์ผ ํ๋ค.
โ HTML ์์์ id attribute ๋ฅผ ๋ถ์ฌํ๋ฉด, id ๊ฐ๊ณผ ๋์ผํ ์ด๋ฆ์ ์ ์ญ ๋ณ์๊ฐ ์๋ฌต์ ์ผ๋ก ์ ์ธ๋๊ณ ํด๋น ๋ ธ๋ ๊ฐ์ฒด๊ฐ ํ ๋น๋๋ ๋ถ์ ํจ๊ณผ๊ฐ ์๋ค.
2. ํ๊ทธ ์ด๋ฆ์ ์ด์ฉํ ์์ ๋ ธ๋ ์ทจ๋
๐น Document.prototype / Element.prototype.getElementsByTagName ๋ฉ์๋๋ ์ธ์๋ก ์ ๋ฌํ ํ๊ทธ ์ด๋ฆ์ ๊ฐ๋ ๋ชจ๋ ์์ ๋ ธ๋๋ค์ ํ์ํ์ฌ ์ ์ฌ ๋ฐฐ์ด ๊ฐ์ฒด์ด๋ฉด์ ์ดํฐ๋ฌ๋ธ์ธ HTML Collection ๊ฐ์ฒด๋ก ๋ฐํํ๋ค.
3. class๋ฅผ ์ด์ฉํ ์์ ๋ ธ๋ ์ทจ๋
๐น Document.prototype / Element.prototype.getElementsByClassName ๋ฉ์๋๋ ์ธ์๋ก ์ ๋ฌํ class attribute ๊ฐ์ ๊ฐ๋ ๋ชจ๋ ์์ ๋ ธ๋๋ค์ ํ์ํ์ฌ ๋ฐํํ๋ค.
๐น ์ธ์๋ก ์ ๋ฌํ class ๊ฐ์ ๊ณต๋ฐฑ์ผ๋ก ๊ตฌ๋ถํ์ฌ ์ฌ๋ฌ ๊ฐ์ class๋ฅผ ์ง์ ํ ์ ์๋ค.
4. CSS ์ ํ์๋ฅผ ์ด์ฉํ ์์ ๋ ธ๋ ์ทจ๋
CSS ์ ํ์๋ ์คํ์ผ์ ์ ์ฉํ๊ณ ์ ํ๋ HTML ์์๋ฅผ ํน์ ํ ๋ ์ฌ์ฉํ๋ ๋ฌธ๋ฒ์ด๋ค.
์์ 39-13
๐น Document.prototype / Element.prototype.querySelectorAll ๋ฉ์๋๋ ์ธ์๋ก ์ ๋ฌํ CSS ์ ํ์๋ฅผ ๋ง์กฑ์ํค๋ ๋ชจ๋ ์์ ๋ ธ๋๋ฅผ ํ์ํ์ฌ ๋ฐํํ๋ค.
5. ํน์ ์์ ๋ ธ๋๋ฅผ ์ทจ๋ํ ์ ์๋์ง ํ์ธ
๐น Element.prototype.matches ๋ฉ์๋๋ ์ธ์๋ก ์ ๋ฌํ CSS ์ ํ์๋ฅผ ํตํด ํน์ ์์ ๋ ธ๋๋ฅผ ์ทจ๋ํ ์ ์๋์ง ํ์ธํ์ฌ Boolean ๊ฐ์ผ๋ก ๋ฐํํ๋ค.
6. HTMLCollection๊ณผ NodeList
๐น HTML Collection์ ์ธ์ ๋ live ๊ฐ์ฒด๋ก ๋์ํ์ฌ ๋ ธ๋ ๊ฐ์ฒด์ ์ํ ๋ณํ๋ฅผ ์ค์๊ฐ์ผ๋ก ๋ฐ์ํ์ง๋ง, NodeList๋ ๋๋ถ๋ถ ๊ณผ๊ฑฐ์ ์ ์ ์ํ๋ฅผ ์ ์งํ๋ None-live ๊ฐ์ฒด๋ก ๋์ํ๋ค.
HTMLCollection
HTMLCollection ๊ฐ์ฒด๋ ์ค์๊ฐ์ผ๋ก ๋ ธ๋ ๊ฐ์ฒด์ ์ํ ๋ณ๊ฒฝ์ ๋ฐ์ํ์ฌ ์์๋ฅผ ์ ๊ฑฐํ ์ ์๊ธฐ ๋๋ฌธ์ HTML Collection ๊ฐ์ฒด๋ฅผ for ๋ฌธ์ผ๋ก ์ํํ๋ฉด์ ๋ ธ๋ ๊ฐ์ฒด์ ์ํ๋ฅผ ๋ณ๊ฒฝํด์ผ ํ ๋ ์ฃผ์ํด์ผ ํ๋ค.
NodeList
HTMLCollection ๊ฐ์ฒด์ ๋ถ์์ฉ์ ํด๊ฒฐํ๊ธฐ ์ํด NodeList๋ฅผ ๋ฐํํ๋ querySelectorAll ๋ฉ์๋๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
ํ์ง๋ง childNodes ํ๋กํผํฐ๊ฐ ๋ฐํํ๋ NodeList ๊ฐ์ฒด๋ HTMLCollection ๊ฐ์ฒด์ ๊ฐ์ด ์ค์๊ฐ์ผ๋ก ๋ ธ๋ ๊ฐ์ฒด์ ์ํ ๋ณ๊ฒฝ์ ๋ฐ์ํ๋ Live ๊ฐ์ฒด๋ก ๋์ํ๋ฏ๋ก ์ฃผ์๊ฐ ํ์ํ๋ค.
โก๏ธ ์ด์ฒ๋ผ ์ํ ๋ณ๊ฒฝ๊ณผ ์๊ด์์ด ์์ ํ๊ฒ DOM ์ปฌ๋ ์ ์ ์ฌ์ฉํ๋ ค๋ฉด Spread ๋ฌธ๋ฒ์ด๋ Array.from ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ฐฐ์ด๋ก ๋ณํํ์ฌ ์ฌ์ฉํ๋ ๊ฒ์ด ๋ซ๋ค.
03. ๋ ธ๋ ํ์
DOM์ ํธ๋ฆฌ ์์ ๋ ธ๋๋ฅผ ํ์ํ ์ ์๋๋ก Node, Element ์ธํฐํ์ด์ค๋ ํธ๋ฆฌ ํ์ ํ๋กํผํฐ๋ฅผ ์ ๊ณตํ๋ค.
๋ ธ๋ ํ์ ํ๋กํผํฐ๋ ๋ชจ๋ ์ ๊ทผ์ ํ๋กํผํฐ๋ก, getter๋ง ์กด์ฌํ๋ ์ฝ๊ธฐ ์ ์ฉ ์ ๊ทผ์ ํ๋กํผํฐ๋ค.
1. ๊ณต๋ฐฑ ํ ์คํธ ๋ ธ๋
HTML ์์ ์ฌ์ด์ ์คํ์ด์ค, ํญ, ์ค๋ฐ๊ฟ(๊ฐํ) ๋ฑ์ ๊ณต๋ฐฑ ๋ฌธ์๋ ๊ณต๋ฐฑ ํ ์คํธ ๋ ธ๋๋ฅผ ์์ฑํ๋ค.
2. ์์ ๋ ธ๋ ํ์
์์ ๋ ธ๋๋ฅผ ํ์ํ๊ธฐ ์ํด์๋ ๋ค์๊ณผ ๊ฐ์ ๋ ธ๋ ํ์ ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ๋ค.
3. ์์ ๋ ธ๋ ์กด์ฌ ํ์ธ
์์ ๋ ธ๋๊ฐ ์กด์ฌํ๋์ง ํ์ธํ๋ ค๋ฉด Node.prototype.hasChildeNodes ๋ฉ์๋๋ฅผ ์ฌ์ฉํ๋ค.
4. ์์ ๋ ธ๋์ ํ ์คํธ ๋ ธ๋ ํ์
์์ ๋ ธ๋์ ์์ ๋ ธ๋๋ก, firstChild ํ๋กํผํฐ๋ก ์ ๊ทผํ ์ ์๋ค.(=์ฒซ ๋ฒ์งธ ์์ ๋ ธ๋๋ฅผ ๋ฐํํ๋ค.)
5. ๋ถ๋ชจ ๋ ธ๋ ํ์
๋ถ๋ชจ ๋ ธ๋๋ฅผ ํ์ํ๋ ค๋ฉด Node.prototype.parentNode ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ๋ค.
6. ํ์ ๋ ธ๋ ํ์
๋ถ๋ชจ ๋ ธ๋๊ฐ ๊ฐ์ ํ์ ๋ ธ๋๋ฅผ ํ์ํ๋ ค๋ฉด ๋ค์๊ณผ ๊ฐ์ ๋ ธ๋ ํ์ ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ๋ค.
<ํ>
04. ๋ ธ๋ ์ ๋ณด ์ทจ๋
๋ ธ๋ ๊ฐ์ฒด์ ๋ํ ์ ๋ณด๋ฅผ ์ทจ๋ํ๊ธฐ ์ํด์ ๋ค์๊ณผ ๊ฐ์ ๋ ธ๋ ์ ๋ณด ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ๋ค.
05. ์์ ๋ ธ๋์ ํ ์คํธ ์กฐ์
1. nodeValue
Node.prototype.nodeValue ํ๋กํผํฐ๋ setter์ getter ๋ชจ๋ ์กด์ฌํ๋ ์ ๊ทผ์ ํ๋กํผํฐ๋ค.
๋ฐ๋ผ์ nodeValue ํ๋กํผํฐ๋ ์ฐธ์กฐ์ ํ ๋น ๋ชจ๋ ๊ฐ๋ฅํ๋ค.
2. textContent
textContect๋ฅผ ์ฐธ์กฐํ๋ฉด Element Node์ HTML ๋งํฌ์ ์ ๋ฌด์ํ๊ณ ์ฝํ ์ธ ์์ญ์ ํ ์คํธ๋ฅผ ๋ชจ๋ ๋ฐํํ๋ค.
06. DOM ์กฐ์
DOM ์กฐ์์ ์๋ก์ด ๋ ธ๋๋ฅผ ์์ฑํ์ฌ DOM์ ์ถ๊ฐํ๊ฑฐ๋ ๊ธฐ์กด ๋ ธ๋๋ฅผ ์ญ์ ๋๋ ๊ต์ฒดํ๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ ๋ฆฌํ๋ก์ฐ์ ๋ฆฌํ์ธํธ๊ฐ ๋ฐ์ํ๋ค.
๋ฐ๋ผ์ ์ฑ๋ฅ์ ์ํฅ์ ์ฃผ๊ฒ ๋๊ธฐ ๋๋ฌธ์ ์ฑ๋ฅ ์ต์ ํ๋ฅผ ์ํด ์ฃผ์ํด ๋ค๋ฃจ์ด์ผ ํ๋ค.
1. innerHTML
๐น element node์ innerHTML ํ๋กํผํฐ๋ฅผ ์ฐธ์กฐํ๋ฉด ์ปจํ ์ธ ์์ญ ๋ด์ ํฌํจํ ๋ชจ๋ HTML ๋งํฌ์ ์ ๋ฌธ์์ด๋ก ๋ฐํํ๋ค.
๐น ์ฌ์ฉ์๋ก๋ถํฐ ์ ๋ ฅ๋ฐ์ ๋ฐ์ดํฐ๋ฅผ ๊ทธ๋๋ก innterHTML์ ํ ๋นํ๋ ๊ฒ์ ํฌ๋ก์ค ์ฌ์ดํธ ์คํฌ๋ฆฝํ ๊ณต๊ฒฉ(XSS)์ ์ทจ์ฝํ์ฌ ์ํํ์ง๋ง, HTML5๋ innerHTML ํ๋กํผํฐ๋ก ์ฝ์ ๋ script ์์ ๋ด์ ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ์คํํ์ง ์๋๋ค.
๐น innerHTML ํ๋กํผํฐ๋ฅผ ์กฐ์ํ๋ ๊ฒฝ์ฐ ๋ชจ๋ ์์ ๋ ธ๋๋ฅผ ์ ๊ฑฐํ๊ณ ํ ๋นํ HTML ๋งํฌ์ ๋ฌธ์์ด์ ํ์ฑํ์ฌ DOM์ ๋ณ๊ฒฝํ๋ค๋ ๋จ์ ์ด ์๋ค.
2. insertAdjacentHTML ๋ฉ์๋
innerHTML๊ณผ ๋ฌ๋ฆฌ ๊ธฐ์กด ์์๋ฅผ ์ ๊ฑฐํ์ง ์์ผ๋ฉด์ ์์น๋ฅผ ์ง์ ํด ์๋ก์ด ์์๋ฅผ ์ฝ์ ํ๋ค.
-> innerHTML๋ณด๋ค ํจ์จ์ ์ด๊ณ ๋น ๋ฅด๋ค.
3. ๋ ธ๋ ์์ฑ๊ณผ ์ถ๊ฐ
์์ ๋ ธ๋ ์์ฑ
Document.prototype.createElement(tagName) ๋ฉ์๋๋ก ์์ ๋ ธ๋๋ฅผ ์์ฑํ์ฌ ๋ฐํํ๋ค.
ํ ์คํธ ๋ ธ๋ ์์ฑ
Document.prototype.createTextNode(text) ๋ฉ์๋๋ ํ ์คํธ ๋ ธ๋๋ฅผ ์์ฑํ์ฌ ๋ฐํํ๋ค.
ํ ์คํธ ๋ ธ๋๋ฅผ ์์ ๋ ธ๋์ ์์ ๋ ธ๋๋ก ์ถ๊ฐ
Node.prototye.appendChilde(childeNode) ๋ฉ์๋๋ ๋งค๊ฐ๋ณ์ childeNode์๊ฒ ์ธ์๋ก ์ ๋ฌํ ๋ ธ๋๋ฅผ appendChilde ๋ฉ์๋๋ฅผ ํธ์ถํ ๋ ธ๋์ ๋ง์ง๋ง ์์ ๋ ธ๋๋ก ์ถ๊ฐํ๋ค.
์์ ๋ ธ๋๋ฅผ DOM์ ์ถ๊ฐ
Node.prototype.appendChilde ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ ํ ์คํธ ๋ ธ๋์ ๋ถ์ ๊ด๊ณ๋ก ์ฐ๊ฒฐํ ์์ ๋ ธ๋๋ฅผ #fruits ์์ ๋ ธ๋์ ๋ง์ง๋ง ์์ ์์๋ก ์ถ๊ฐํ๋ค.
4. ๋ณต์์ ๋ ธ๋ ์์ฑ๊ณผ ์ถ๊ฐ
forEach๋ก ๋ณต์์ ๋ ธ๋๋ฅผ ์์ฑํด ๋ถ์ด๋ ๊ฒฝ์ฐ๋ DOM์ n๋ฒ ๋ณ๊ฒฝ์ผ๋ก ๋นํจ์จ์ ์ด๊ณ , ์ปจํ ์ด๋ ์์(div)๋ฅผ ๋ง๋ค์ด ๋ถ์ด๋ ๊ฒ๋ ๋ถํ์ํ ๋ ธ๋๋ฅผ ์์ฑํ๋ ๊ฒ์ด๋ค.
๋ฐ๋ผ์ ๊ธฐ์กด DOM๊ณผ ๋ณ๋๋ก ์กด์ฌํ๋ DocumentFragment ๋ ธ๋๋ฅผ ์ฌ์ฉํ์ฌ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋ค.
DocumentFragment ๋ ธ๋์ ์์ ๋ ธ๋๋ฅผ ์ถ๊ฐํด๋ DOM์๋ ์ด๋ค ๋ณ๊ฒฝ๋ ๋ฐ์ํ์ง ์๊ณ ์์ ๋ง ์ ๊ฑฐ๋๊ณ , ์์์ ๋ ธ๋๋ง DOM์ ์ถ๊ฐ๋๋ค.
โก๏ธ DOM ๋ณ๊ฒฝ์ด ๋ฐ์ํ๋ ๊ฒ์ ํ ๋ฒ ๋ฟ์ด๋ฉฐ, ๋ฆฌํ๋ก์ฐ์ ๋ฆฌํ์ธํธ๋ ํ ๋ฒ๋ง ์คํ๋๋ค.
5. ๋ ธ๋ ์ฝ์
๋ง์ง๋ง ๋ ธ๋๋ก ์ถ๊ฐ
Node.prototype.appendChild ๋ฉ์๋๋ ์ธ์๋ก ์ ๋ฌ๋ฐ์ ๋ ธ๋๋ฅผ ์์ ์ ํธ์ถํ ๋ ธ๋์ ๋ง์ง๋ง ์์ ๋ ธ๋๋ก ์ถ๊ฐํ๋ค.
(์์น ์ง์ ๋ถ๊ฐ)
์ง์ ํ ์์น์ ๋ ธ๋ ์ฝ์
Node.prototype.insertBefore(newNode, childNode) ๋ฉ์๋๋ ์ฒซ ๋ฒ์งธ ์ธ์๋ก ์ ๋ฌ๋ฐ์ ๋ ธ๋๋ฅผ ๋ ๋ฒ์งธ ์ธ์๋ก ์ ๋ฌ๋ฐ์ ๋ ธ๋ ์์ ์ฝ์ ํ๋ค.
6. ๋ ธ๋ ์ด๋
DOM์ ์ด๋ฏธ ์กด์ฌํ๋ ๋ ธ๋๋ฅผ appendChilde ๋๋ insertBefore ๋ฉ์๋๋ฅผ ์ฌ์ฉํ์ฌ DOM์ ๋ค์ ์ถ๊ฐํ๋ฉด, ํ์ฌ ์์น์์ ๋ ธ๋๋ฅผ ์ ๊ฑฐํ๊ณ ์๋ก์ด ์์น์ ๋ ธ๋๋ฅผ ์ถ๊ฐํ๋ฏ๋ก ๋ ธ๋๊ฐ ์ด๋ํ๋ค.
7. ๋ ธ๋ ๋ณต์ฌ
Node.prototype.cloneNode([deep: true | false]) ๋ฉ์๋๋ ๋ ธ๋์ ์ฌ๋ณธ์ ์์ฑํ์ฌ ๋ฐํํ๋ค.
- ๋งค๊ฐ๋ณ์ deep์ true๋ฅผ ์ธ์๋ก ์ ๋ฌ -> ๋ ธ๋๋ฅผ ๊น์ ๋ณต์ฌ
- ๋งค๊ฐ๋ณ์ deep์ false๋ฅผ ์ธ์๋ก ์ ๋ฌ -> ๋ ธ๋๋ฅผ ์์ ๋ณต์ฌ
8. ๋ ธ๋ ๊ต์ฒด
Node.prototype.replaceChilde(newChild, oldChild) ๋ฉ์๋๋ ์์ ์ ํธ์ถํ ๋ ธ๋์ ์์ ๋ ธ๋๋ฅผ ๋ค๋ฅธ ๋ ธ๋๋ก ๊ต์ฒดํ๋ค.
9. ๋ ธ๋ ์ญ์
Node.prototype.removeChild(child) ๋ฉ์๋๋ child ๋งค๊ฐ๋ณ์์ ์ธ์๋ก ์ ๋ฌํ ๋ ธ๋๋ฅผ DOM์์ ์ญ์ ํ๋ค.
07. ์ดํธ๋ฆฌ๋ทฐํธ
1. ์ดํธ๋ฆฌ๋ทฐํธ ๋ ธ๋์ attribute ํ๋กํผํฐ
๐ก HTML ์ดํธ๋ฆฌ๋ทฐํธ๋ HTML ์์์ ๋์์ ์ ์ดํ๊ธฐ ์ํ ์ถ๊ฐ์ ์ธ ์ ๋ณด๋ฅผ ์ ๊ณตํ๋ค.
๐น HTML ์์์ ์์ ํ๊ทธ์ ์ดํธ๋ฆฌ๋ทฐํธ ์ด๋ฆ = "์ดํธ๋ฆฌ๋ทฐํธ ๊ฐ" ํ์์ผ๋ก ์ ์ํ๋ค.
๐น HTML ๋ฌธ์๊ฐ ํ์ฑ๋ ๋ ๊ฐ๊ฐ์ ์ดํธ๋ฆฌ๋ทฐํธ๋ ๊ฐ๊ฐ์ ์ดํธ๋ฆฌ๋ทฐํธ ๋ ธ๋๋ก ๋ณํ๋๋ค.
๐น ๋ชจ๋ ์ดํธ๋ฆฌ๋ทฐํธ ๋ ธ๋์ ์ฐธ์กฐ๋ NamedNodeMap ๊ฐ์ฒด์ ๋ด๊ฒจ์ ์์ ๋ ธ๋์ attributes ํ๋กํผํฐ์ ์ ์ฅ๋๋ค.
๐น attributes ํ๋กํผํฐ๋ getter๋ง ์กด์ฌํ์ฌ ์ฝ๊ธฐ ์ ์ฉ ์ ๊ทผ์ ํ๋กํผํฐ์ด๊ณ ,
๊ฐ์ ์ ๊ทผํ๋ ค๋ฉด Element.attributes.์ดํธ๋ฆฌ๋ทฐํธ๋ช .value ๋ก ์ ๊ทผ.
2. HTML ์ดํธ๋ฆฌ๋ทฐํธ ์กฐ์
๐ก attributes ํ๋กํผํฐ๋ฅผ ํตํ์ง ์๊ณ ์์ ๋ ธ๋์์ ๋ฉ์๋๋ก ๋ฐ๋ก HTML ์ดํธ๋ฆฌ๋ทฐํธ ๊ฐ ์ ๊ทผ ๊ฐ๋ฅ
๐น HTML ์ดํธ๋ฆฌ๋ทฐํธ ๊ฐ ์ฐธ์กฐ : Element.prototype.getAttribute(attributeName)
๐น HTML ์ดํธ๋ฆฌ๋ทฐํธ ๊ฐ ๋ณ๊ฒฝ : Element.prototype.setAttribute(attributeName, attributeValue)
๐น ํน์ HTML ์ดํธ๋ฆฌ๋ทฐํธ ๊ฐ ์กด์ฌ ํ์ธ : Element.prototype.hasAttribute(attributeName)
๐น ํน์ HTML ์ดํธ๋ฆฌ๋ทฐํธ ๊ฐ ์ญ์ : Element.prototype.removeAttribute(attributeName)
3. HTML ์ดํธ๋ฆฌ๋ทฐํธ vs. DOM ํ๋กํผํฐ
๐น ์์ ๋ ธ๋ ๊ฐ์ฒด์๋ HTML ์ดํธ๋ฆฌ๋ทฐํธ์ ๋์ํ๋ ํ๋กํผํฐ๊ฐ ์กด์ฌํ๋ค.
๐น ์ด๋ฌํ DOM ํ๋กํผํฐ๋ค์ HTML ์ดํธ๋ฆฌ๋ทฐํธ ๊ฐ์ ์ด๊ธฐ๊ฐ์ผ๋ก ๊ฐ๊ณ ์๋ค.
๐น DOM ํ๋กํผํฐ๋ setter, getter ๋ ๋ค ์๋ ์ ๊ทผ์ ํ๋กํผํฐ๋ค. (์ฐธ์กฐ, ๋ณ๊ฒฝ ๋ชจ๋ ๊ฐ๋ฅ)
๐น HTML ์ดํธ๋ฆฌ๋ทฐํธ : HTML ์์์ ์ด๊ธฐ ์ํ๋ฅผ ์ง์ ํ๊ณ ์ด๋ ๋ณํ์ง ์๋๋ค.
๐น DOM ํ๋กํผํฐ : ์์ ๋ ธ๋์ ์ต์ ์ํ๋ฅผ ๊ด๋ฆฌ
๐น ์์ ๋ ธ๋๋ 2๊ฐ์ ์ํ(์ด๊ธฐ ์ํ, ์ต์ ์ํ)๋ฅผ ๊ด๋ฆฌํด์ผ ํ๋ค.
โก๏ธ ์์ ๋ ธ๋์ ์ด๊ธฐ ์ํ : HTML ์ดํธ๋ฆฌ๋ทฐํธ ๋ ธ๋๊ฐ ๊ด๋ฆฌ
โก๏ธ ์์ ๋ ธ๋์ ์ต์ ์ํ : DOM ํ๋กํผํฐ๊ฐ ๊ด๋ฆฌ
์ดํธ๋ฆฌ๋ทฐํธ ๋ ธ๋
๐ก HTML ์ดํธ๋ฆฌ๋ทฐํธ๋ก ์ง์ ํ HTML ์์์ ์ด๊ธฐ ์ํ๋ HTML ์ดํธ๋ฆฌ๋ทฐํธ ๋ ธ๋์์ ๊ด๋ฆฌํ๋ค.
๐น getAttribute ๋ฉ์๋ : ์ด๊ธฐ ์ํ ๊ฐ์ ์ทจ๋
๐น setAttribute ๋ฉ์๋ : ์ด๊ธฐ ์ํ ๊ฐ์ ๋ณ๊ฒฝ
DOM ํ๋กํผํฐ
๐ก ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ์ต์ ์ํ๋ HTML ์ดํธ๋ฆฌ๋ทฐํธ์ ๋์ํ๋ ์์ ๋ ธ๋์ DOM ํ๋กํผํฐ๊ฐ ๊ด๋ฆฌํ๋ค.
๐น DOM ํ๋กํผํฐ๋ก ์ทจ๋ํ ๊ฐ์ธ HTML ์์์ ์ต์ ์ํ ๊ฐ์ ์ฌ์ฉ์์ ์ ๋ ฅ์ ์ํด ๋์ ์ผ๋ก ๋ณ๊ฒฝ๋๋ค.
๐น DOM ํ๋กํผํฐ์ ๊ฐ์ ํ ๋น = HTML ์์์ ์ต์ ์ํ ๊ฐ์ ๋ณ๊ฒฝํ๋ ๊ฒ
โญ ์ด๋ HTML ์์์ ์ง์ ํ ์ดํธ๋ฆฌ๋ทฐํธ ๊ฐ์๋ ์ํฅ X
โญ ๋ชจ๋ DOM ํ๋กํผํฐ๊ฐ ์ฌ์ฉ์ ์ ๋ ฅ์ ์ํด ๋ณ๊ฒฝ๋ ์ต์ ์ํ๋ฅผ ๊ด๋ฆฌํ์ง๋ ์๊ณ ,
์ฌ์ฉ์ ์ ๋ ฅ์ ์ํ ์ํ ๋ณํ์ ๊ด๊ณ์๋ DOM ํ๋กํผํฐ๋ง ์ต์ ์ํ ๊ฐ์ ๊ด๋ฆฌํ๋ค.
HTML ์ดํธ๋ฆฌ๋ทฐํธ์ DOM ํ๋กํผํฐ์ ๋์ ๊ด๊ณ
๋๋ถ๋ถ 1:1 ๋์ํ์ง๋ง, ์๋ ๊ฒ๋ค๋ ์๋ค.
๐น id ์ดํธ๋ฆฌ๋ทฐํธ๋ id ํ๋กํผํฐ์ 1:1 ๋์
๐น class ์ดํธ๋ฆฌ๋ทฐํธ๋ className, classList ํ๋กํผํฐ์ ๋์
๐น for ์ดํธ๋ฆฌ๋ทฐํธ๋ htmlFor ํ๋กํผํฐ์ 1:1 ๋์
DOM ํ๋กํผํฐ ๊ฐ์ ํ์
๐น getAttribute ๋ฉ์๋๋ก ์ทจ๋ํ ์ดํธ๋ฆฌ๋ทฐํธ์ ๊ฐ์ ํญ์ ๋ฌธ์์ด
๐น DOM ํ๋กํผํฐ๋ก ์ทจ๋ํ ์ต์ ์ํ ๊ฐ์ ๋ฌธ์์ด์ด ์๋ ์๋ ์์ (ex. checkbox ์์..)
4. data ์ดํธ๋ฆฌ๋ทฐํธ์ dataset ํ๋กํผํฐ
๐ก data ์ดํธ๋ฆฌ๋ทฐํธ์ dataset ํ๋กํผํฐ๋ฅผ ์ฌ์ฉํ๋ฉด, HTML ์์์ ์ ์ํ ์ฌ์ฉ์ ์ ์ attribute์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ ๋ฐ์ดํฐ๋ฅผ ๊ตํํ ์ ์๋ค.
๐น data ์ดํธ๋ฆฌ๋ทฐํธ๋ data-user-id, data-role๊ณผ ๊ฐ์ด data-์ ๋์ฌ ๋ค์์ ์์์ ์ด๋ฆ์ ๋ถ์ธ๋ค.
๐น data ์ดํธ๋ฆฌ๋ทฐํธ ๊ฐ์ HTMLElement.dataset ํ๋กํผํฐ๋ก ์ทจ๋ํ ์ ์๋ค.
08. ์คํ์ผ
1. ์ธ๋ผ์ธ ์คํ์ผ ์กฐ์
๐น HTMLElement.property.style ํ๋กํผํฐ๋ setter, getter ๋ชจ๋ ์กด์ฌํ๋ ์ ๊ทผ์ property๋ก ์์ ๋ ธ๋์ inline ์คํ์ผ์ ์ทจ๋/์ถ๊ฐ/๋ณ๊ฒฝํ๋ค.
2. ํด๋์ค ์กฐ์
๐น ์์์ class ์ดํธ๋ฆฌ๋ทฐํธ๋ฅผ ์กฐ์ํ์ฌ ๋ค๋ฅธ ์คํ์ผ์ ์ ์ฉํ๋ค.
๐น class ์ดํธ๋ฆฌ๋ทฐํธ์ ๋์ํ๋ DOM ํ๋กํผํฐ์ธ className, classList๋ฅผ ํตํด ์ ์ฉํ๋ค.
className
๐น Element.prototype.className ํ๋กํผํฐ๋ setter/getter ๋ชจ๋ ์กด์ฌ
๐น className ํ๋กํผํฐ๋ ๋ฌธ์์ด์ ๋ฐํ -> ๊ณต๋ฐฑ ๊ตฌ๋ถ๋ ๋ฌธ์์ด .. ๋ค๋ฃจ๊ธฐ ๋ถํธ
classList
๐น Element.prototype.classList ํ๋กํผํฐ
๐น class ์ดํธ๋ฆฌ๋ทฐํธ์ ์ ๋ณด๋ฅผ DOMToeknList ๊ฐ์ฒด์ ๋ฐํ
๐น DOMTokenList ๊ฐ์ฒด๋ ์ฌ๋ฌ๊ฐ์ง ๋ฉ์๋ ์ ๊ณต
โ DOMTokenList ๊ฐ์ฒด์ ๋ฉ์๋
- add(...className) : ์ธ์๋ก ์ ๋ฌํ ๋ฌธ์์ด์ class ์ดํธ๋ฆฌ๋ทฐํธ์ ์ถ๊ฐ
- remove(...className) : ์ญ์ , ์ธ์๋ก ์ ๋ฌํ ๊ฐ์ด ์์ด๋ ์๋ฌ ๋ฐ์X
- item(index) : index์ ํด๋นํ๋ ํด๋์ค๋ฅผ ๋ฐํ
- contains(className) : true/false ๋ฐํ
- replace(oldClassName,newClassName)
- toggle(className,[์กฐ๊ฑด์]) : ์์ผ๋ฉด ์ญ์ , ์์ผ๋ฉด ์ถ๊ฐ
์กฐ๊ฑด์์ ์ ํ์ฌํญ, true๋ฉด ๊ฐ์ ๋ก ์ถ๊ฐ, false๋ฉด ๊ฐ์ ์ญ์
3. ์์์ ์ ์ฉ๋์ด ์๋ CSS ์คํ์ผ ์ฐธ์กฐ
๐น style ํ๋กํผํฐ๋ ์ธ๋ผ์ธ ์คํ์ผ๋ง ๋ฐํ -> ํด๋์ค๋ ์์์ ํตํด ์ ์ฉ๋ ์คํ์ผ์ ์ ์ ์๋ค.
โก๏ธ ์์์ ์ ์ฉ๋ ๋ชจ๋ ์คํ์ผ ์ฐธ์กฐํ๋ ค๋ฉด => getComputedStyle ๋ฉ์๋ ์ฌ์ฉ
09. DOM ํ์ค
๐น HTML๊ณผ DOM ํ์ค์ W3C์ WHATWG์ ํ๋ ฅ์ผ๋ก ๊ณตํต๋ ํ์ค์ ๋ง๋ค์ด์์ผ๋,
2018๋ ๋ถํฐ ๊ตฌ๊ธ, ์ ํ, ๋ง์ดํฌ๋ก์ํํธ, ๋ชจ์ง๋ผ๋ก ๊ตฌ์ฑ๋, WHATWG๊ฐ ๋จ์ผ ํ์ค์ ์ ๊ณตํ๊ธฐ๋ก ํฉ์ํ์๋ค.
๐น DOM ์ ํ์ฌ 4๊ฐ์ง ๋ฒ์ ์ด ์๋ค.
๐ ์ฐธ๊ณ ์๋ฃ
