๐ปJavaScript์ ๊ตฌ์ฑ๐ป
1. Core
- ์ธ์ด ์์ฒด์ ๊ธฐ๋ฅ๊ณผ ๋ฌธ๋ฒ์ ํฌํจํ๋ค.
- ๋ณ์, ์ฐ์ฐ์, ์ ์ด ๊ตฌ์กฐ(if๋ฌธ, for๋ฌธ ๋ฑ), ํจ์, ๊ฐ์ฒด, ๋ฐฐ์ด ๋ฑ๊ณผ ๊ด๋ จ๋ ๋ชจ๋ ๊ฒ์ ๋ค๋ฃฌ๋ค.
2. BOM
- ๋ธ๋ผ์ฐ์ ์ ๊ด๋ จ๋ ์ ๋ณด์ ๋์์ ๋ค๋ฃฌ๋ค.
- ์ผ๋ถ ํ๊ทธ ์กฐ์ํ ์ ์๋ค.
- DOM์ ๋นํด ๊ธฐ๋ฅ์ด ๋ถ์กฑํ๋ค.
- ์ ์ ์ธ ํธ๋ฆฌ๊ตฌ์กฐ๋ก ์ด๋ค์ ธ์๋ค.
3. DOM
- HTML ๋ฌธ์๋ฅผ ํธ๋ฆฌ ๊ตฌ์กฐ๋ก ๋ํ๋ด์ด ๊ฐ ์์๋ฅผ ๊ฐ์ฒด๋ก ๋ค๋ฃฐ ์ ์๊ฒ ํฉ๋๋ค
- ๋ชจ๋ ํ๊ทธ๋ฅผ ์กฐ์ํ ์ ์๋ค.
- ๊ธฐ๋ฅ์ด ํ๋ถํ๋ค
- HTML ๋ฌธ์์ ๋ด์ฉ, ๊ตฌ์กฐ, ์คํ์ผ ๋ฑ์ ๋์ ์ผ๋ก ๋ณ๊ฒฝํ ์ ์๋ค.
๐ปDOM๐ป
- Documet Object Mode์ ์ฝ์ด
- ์๋ณ์๋ก ์ธ์ํ ์ ์๋ ๊ฒ์ด ๋์ด๋ฌ๋ค. (๊ธฐ์กด BOM์ name๋ง ์ธ์ํ๋๋ฐ DOM์์๋ name, id, class๋ ์๋ณ์๋ก ์ธ์์ด ๊ฐ๋ฅํ๋ค)
- BOM ๊ธฐ๋ฅ์ ํ์ฅ ๊ธฐ๋ฅ์ด ๋ํด์ก๋ค. (document๋ก๋ถํฐ ํ์ฅํด์ ๊ตฌ์ถํ๋ค.)
- BOM์ด๋ DOM์ผ๋ก ๊ฒ์๋ ๊ฒฐ๊ณผ ๊ฐ์ฒด(ํ๊ทธ)๋ ๋์ผํ๋ค.
- ๋ฒ์ : DOM Level1 > DOM Level2 > DOM Level3
- ๋ฌธ์๋ด์ ๋ชจ๋ ์์๊ฐ ๋ ธ๋๋ก ๊ตฌ์ฑ๋๋ค.
- ์ํฐ์ ์ฃผ์๋ ๋ ธ๋๋ก ํฌํจ๋๋ค.
๐ปDOM ํธ๋ฆฌ์ ๊ตฌ์ฑ์์(๋ ธ๋)๐ป
ํ๊ทธ, PCDATA, ์ฃผ์, ์ํฐํฐ, ์ ์ธ๋ฌธ, ์์ฑ ๋ฑ
DOM ๋ ธ๋ ํ๋กํผํฐ
1. nodeType
- ํ๊ทธ : 1์ ๋ฐํ
- ์์ฑ : 2์ ๋ฐํ
- PCDATA : 3์ ๋ฐํ
- ์ฃผ์ : 8์ ๋ฐํ
- ์ ์ธ๋ฌธ 9์ ๋ฐํ
2. nodeName
- ํด๋น ๋ ธ๋์ ์ด๋ฆ์ ๋ฐํํ๋ค.
- ํ๊ทธ๋ ํ๊ทธ๋ช , ์์ฑ์ ์์ฑ๋ช , PCDATA๋ #text๋ก ๋ฐํํ๋ค.
3. nodeValue
- ํด๋น ๋ ธ๋์ ๊ฐ์ ๋ฐํํ๋ค.
- ํ๊ทธ๋ null, ์์ฑ์ ์์ฑ๊ฐ, PCDATA๋ ๋ฌธ์์ด๋ก ๋ฐํํ๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="me">
๋
<!-- DOM ํธ๋ฆฌ -->
<div>์์</div>
<div>
์์
<div>์์</div>
</div>
<div>์์</div>
</div>
</body>
<script>
for (var i=0; i<me.childNodes.length; i++) {
console.log(me.childNodes[i].nodeType, me.childNodes[i].nodeName, me.childNodes[i].nodeValue);
}
</script>
</html>
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] Content ์กฐ์(2) ์์ฉ๋ฒ์ (0) | 2023.10.10 |
|---|---|
| [JavaScript] Content ์กฐ์(1) : innerText, innerHTML, textContent (0) | 2023.10.10 |
| [JavaScript] ์ผ์ ์๊ฐ ํ ํจ์ ์คํ : ํ์ด๋จธ(โ ) (0) | 2023.10.10 |
| [JavaScript] select box ํธ๋ค๋ง (0) | 2023.10.06 |
| [JavaScript] radio ํธ๋ค๋ง (0) | 2023.10.06 |
