π»DOM λ Έλ(νκ·Έ) κ²μ λꡬπ»
- 1,2λ² μ μ ν κ°μ΄ μ¬μ©νλ€.
1. μλ³μ κ²μ λꡬ
- obj.getElementById()
- obj.getElementByClassName()
μλ κΈ μ°Έκ³ νλ€.
[JavaScript] DOM - νκ·Έ κ²μ λꡬ1 : μλ³μ κ²μ
π»DOMμμ μ 곡νλ νκ·Έ κ²μ λꡬ(ν¨μ)π» 1. id κ²μ(β ) document.getElementById('id') 2. class κ²μ(β ) λ°°μ΄λ‘ λ°ννλ€. document.getElementsByClassName('class') 3. name κ²μ λ°°μ΄λ‘ λ°ννλ€. DOMμμλ nameκ²μ
steady-record.tistory.com
2. νΈλ¦¬ ꡬ쑰 κΈ°λ°μΌλ‘ν μλ νν(Axis)
- λλ₯Ό κΈ°μ€μΌλ‘ λΆλͺ¨, μμ, νμ λ₯Ό νμνλ λ°©λ²μ΄λ€.
- childNodes, firstChild, lastChild, firstElementChild λ±μ΄ μλ€.
π»Axis κ²μπ»
νκ·Έμ check ν΄λμ€ μ΄λ¦μ μ€μ νμ¬ μ μ μμμ λ°κΎΈλ μ΄λ²€νΈλ₯Ό μ μ©ν΄μ κ΄κ³λ₯Ό νμ νλ€.
κΈ°λ³Έ λΌλ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 1px solid black;
padding: 15px;
margin: 15px;
}
#me {
border: 10px solid cornflowerblue;
}
.check {
outline: 10px solid coral;
}
</style>
</head>
<body>
<h1>Axis</h1>
<input type="button" value="λ²νΌ" id="btn1">
<hr>
<div>
ν μλ²μ§
<div>
ν°μλ²μ§
<div>μ¬μ΄</div>
</div>
<div>
μλ²μ§
<div>ν°ν</div>
<div>μμν</div>
<div id="me">
λ
<!-- DOM νΈλ¦¬ -->
<div>μμ</div>
<div>
μμ
<div>μμ</div>
</div>
<div>μμ</div>
</div>
</div>
<div>
μμμλ²μ§
<div>μ¬μ΄</div>
</div>
</div>
</body>
</html>μλλ‘ μ κ·ΌνκΈ°
- childNodes : λͺ¨λ μμ λ
Έλ (μ£Όμμ΄λ ν
μ€νΈλ μμμΌλ‘ ν¬ν¨νλ€.)
- firstChild : 첫λ²μ§Έ μμ
- lastChild : λ§λ΄ μμ
- children : λͺ¨λ νκ·Έ λ
Έλ (μ£Όμμ΄λ ν
μ€νΈλ₯Ό μμμΌλ‘ ν¬ν¨νμ§ μλλ€.)
- firstElementChild : 첫λ²μ§Έ μμνκ·Έ
- lastElementChild : λ§λ΄ μμνκ·Έ
λμ μμλ€ νμΈ
for (var i=0; i<me.children.length; i++) {
me.children[i].className = 'check';
}
λμ μμμ 첫λ²μ§Έ μμ νμΈ
me.children[1].firstElementChild.className = 'check'
μλ‘ μ κ·ΌνκΈ°
- parentNode : λΆλͺ¨ λ Έλ
- parentElement : λΆλͺ¨ μμ
λμ λΆλͺ¨ νμΈ
// me.parentNode.className = 'check'; //μλ²μ§
me.parentElement.className = 'check'; //μλ²μ§
λΆλͺ¨μ λΆλͺ¨μ λΆλͺ¨
me.parentElement.parentElement.parentElement.className = 'check';λΆλͺ¨μ λΆλͺ¨μ λΆλͺ¨μ΄λ©΄ body νκ·Έκ° λμ¨λ€.
νλ² λ λΆλͺ¨λ₯Ό μ°ΎμΌλ©΄ documentκ° λμ¨λ€.
BOMμμλ windowκ° μ΅μμκ°μ²΄μ΄κ³ , DOMμμλ documentκ° μ΅μμκ°μ²΄μ΄λ€.
νμ κ° μ κ·ΌνκΈ°
- previousSibling : λ°λ‘ μμ νμ (λͺ¨λ λ Έλ)
- nextSibling : λ°λ‘ λ°μ νμ (λͺ¨λ λ Έλ)
- previousElementSibling : λ°λ‘ μμ νμ μμ
- nextElementSibling : λ°λ‘ λ°μ νμ μμ
ν°ν νμΈ(1)
me.parentElement.firstElementChild.className = 'check';
ν°ν νμΈ(2)
me.previousElementSibling.previousElementSibling.className = 'check';
첫λ²μ§Έ μμμ μλ νμ νμΈ
me.children[0].nextElementSibling.className = 'check';
HTMLμ idμ classλ₯Ό λ¨λ°νλ©΄ κ°λ μ±μ΄ μ νλκ³ μ½λ κ΄λ¦¬κ° μ΄μ½ν΄μ§λ€.
μλ κ²μκ³Ό νκ·Έ κ²μμ κ°μ΄ μ¬μ©νμ¬ μ΅μνμ idμ classλ‘ νκ·Έ κ²μμ ν΄μΌ νλ€.
'WEB > JavaScript' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
| [JavaScript] DOM - λμ μΌλ‘ νκ·Έ μμ±νκΈ° (0) | 2023.10.10 |
|---|---|
| [JavaScript] DOM - event λ±λ‘ λ° μμ (0) | 2023.10.10 |
| [JavaScript] DOM - νκ·Έ κ²μ λꡬ(1) : μλ³μ κ²μ (0) | 2023.10.10 |
| [JavaScript] μ°ν΄λ¦, λλΈ ν΄λ¦ κΈμ§ (0) | 2023.10.10 |
| [JavaScript] Content μ‘°μ(2) μμ©λ²μ (0) | 2023.10.10 |
