39μ₯ DOM
39.5 μμ λ
Έλμ ν
μ€νΈ μ‘°μ
39.5.1 nodeValue
Node.prototype.nodeValue νλ‘νΌν°λ setterμ getter λͺ¨λ μ‘΄μ¬νλ μ κ·Όμ νλ‘νΌν°λ€.
λ Έλ κ°μ²΄μ nodeValue νλ‘νΌν°λ₯Ό μ°Έμ‘°νλ©΄ λ Έλ κ°μ²΄μ κ°μ λ°ννλ€. elementμΌ κ²½μ° Null, Textλ ΈλμΌ κ²½μ° text κ°μ λ°ννλ€.
<html>
<body>
<div id="foo">Hello</div>
</body>
<script>
// λ¬Έμ λ
Έλμ nodeValue νλ‘νΌν°λ₯Ό μ°Έμ‘°νλ€.
console.log(document.nodeValue); // null
// μμ λ
Έλμ nodeValue νλ‘νΌν°λ₯Ό μ°Έμ‘°νλ€.
const $foo = document.getElementById("foo");
console.log($foo.nodeValue); // null
// ν
μ€νΈ λ
Έλμ nodeValue νλ‘νΌν°λ₯Ό μ°Έμ‘°νλ€.
const $textNode = $foo.firstChild;
console.log($textNode.nodeValue); // Hello
</script>
</html>
39.5.2 textContent
Node.prototype.textContent νλ‘νΌν°λ setterμ getter λͺ¨λ μ‘΄μ¬νλ μ κ·Όμ νλ‘νΌν°λ‘μ μμ λ Έλμ ν μ€νΈμ λͺ¨λ μμ λ Έλμ ν μ€νΈλ₯Ό λͺ¨λ μ·¨λνκ±°λ λ³κ²½νλ€.
μμ λ Έλμ textContent νλ‘νΌν°λ₯Ό μ°Έμ‘°νλ©΄ μμ λ Έλμ μ½ν μΈ μμ λ΄μ ν μ€νΈλ₯Ό λͺ¨λ λ°ννλ€.

<html>
<body>
<div id="foo">Hello <span>world!</span></div>
</body>
<script>
// #foo μμ λ
Έλλ ν
μ€νΈ λ
Έλκ° μλλ€.
console.log(document.getElementById("foo").nodeValue); // null
// #foo μμ λ
Έλμ μμ λ
ΈλμΈ ν
μ€νΈ λ
Έλμ κ°μ μ·¨λνλ€.
console.log(document.getElementById("foo").firstChild.nodeValue); // Hello
// span μμ λ
Έλμ μμ λ
ΈλμΈ ν
μ€νΈ λ
Έλμ κ°μ μ·¨λνλ€.
console.log(document.getElementById("foo").lastChild.firstChild.nodeValue); // world!
// #foo μμ λ
Έλμ ν
μ€νΈλ₯Ό λͺ¨λ μ·¨λνλ€, μ΄λ HTML λ§ν¬μ
μ 무μλλ€.
console.log(document.getElementById("foo").textContent); //Hello world
</script>
</html>
39.6 DOM μ‘°μ
DOM μ‘°μμ μλ‘μ΄ λ Έλλ₯Ό μμ±νμ¬ DOMμ μΆκ°νκ±°λ κΈ°μ‘΄ λ Έλλ₯Ό μμ λλ κ΅μ²΄νλ κ²μ λ§νλ€.
DOM μ‘°μμ μν΄ DOMμ μλ‘μ΄ λ Έλκ° μΆκ°λκ±°λ μμ λλ©΄ 리νλ‘μ°μ 리νμΈνΈκ° λ°μνλ μμΈμ΄ λλ―λ‘ μ±λ₯μ μν₯μ μ€λ€.
39.6.1 innerHTML
Element.prototype.innerHTML νλ‘νΌν°λ setterμ getter λͺ¨λ μ‘΄μ¬νλ μ κ·Όμ νλ‘νΌν°λ‘μ μμ λ Έλμ HTML λ§ν¬μ μ μ·¨λνκ±°λ λ³κ²½νλ€.
μλμ²λΌ innerHTML νλ‘νΌν°λ₯Ό μ¬μ©νλ©΄ HTML λ§ν¬μ λ¬Έμμ΄λ‘ κ°λ¨ν DOM μ‘°μμ΄ κ°λ₯νλ€.
<html> <body> <ul id="fruits"> <li class="apple">Apple</li> </ul> </body> <script> const $fruits = document.getElementById("fruits"); // λ Έλ μΆκ° $fruits.innerHTML += '<li class="banana">Banana</li>'; // λ Έλ κ΅μ²΄ $fruits.innerHTML = '<li class="orange">Orange</li>'; // λ Έλ μμ $fruits.innerHTML = ""; </script> </html>
innerHTML νλ‘νΌν°λ₯Ό μ¬μ©ν DOM μ‘°μμ ꡬνμ΄ κ°λ¨νκ³ μ§κ΄μ μ΄λΌλ μ₯μ μ΄ μμ§λ§ XSS(Cross Site Script) 곡격μ μ·¨μ½νλ€λ λ¨μ μ΄ μλ€.
39.6.2 insertAdjacentHTML λ©μλ
Element.prototype.insertAdjacentHTML(position, DOMString) λ©μλλ κΈ°μ‘΄ μμλ₯Ό μ κ±°νμ§ μμΌλ©΄μ μμΉλ₯Ό μ§μ ν΄ μλ‘μ΄ μμλ₯Ό μ½μ νλ€.
<html> <body> <!-- beforebegin --> <div id="foo"> <!-- afterbegin --> text <!-- beforeend --> </div> <!-- afterend --> </body> <script> const $foo = document.getElementById("foo"); $foo.insertAdjacentHTML("beforebegin", "<p>beforebegin</p>"); $foo.insertAdjacentHTML("afterbegin", "<p>afterbegin</p>"); $foo.insertAdjacentHTML("beforeend", "<p>beforeend</p>"); $foo.insertAdjacentHTML("afterend", "<p>afterend</p>"); </script> </html>
39.6.3 λ
Έλ μμ±κ³Ό μΆκ°
DOMμ λ Έλλ₯Ό μ§μ μμ±/μ½μ /μμ /μΉννλ λ©μλλ μ 곡νλ€.
μλμ κ³Όμ μ ν΅ν΄μ λ Έλμ μμ±κ³Ό μΆκ°κ° μ΄λ£¨μ΄μ§λ€. (μΆν μ€λͺ μΆκ° μμ )
- μμ λ Έλ μμ± - ν μ€νΈ λ Έλ μμ± - ν μ€νΈ λ Έλλ₯Ό μμ λ Έλμ μμ λ Έλλ‘ μΆκ° - μμ λ Έλλ₯Ό DOMμ μΆκ°
<html> <body> <ul id="fruits"> <li>Apple</li> <!-- <li>Banana</li> --> </ul> </body> <script> const $fruits = document.getElementById("fruits"); // 1. μμ λ Έλ μμ± const $li = document.createElement("li"); // 2. ν μ€νΈ λ Έλ μμ± const textNode = document.createTextNode("Banana"); // 3. ν μ€νΈ λ Έλλ₯Ό $li μμ λ Έλμ μμ λ Έλλ‘ μΆκ° $li.appendChild(textNode); // 4. $li μμ λ Έλλ₯Ό #fruits μμ λ Έλμ λ§μ§λ§ μμ λ Έλλ‘ μΆκ° $fruits.appendChild($li); </script> </html>
39.6.4 볡μμ λ
Έλ μμ±κ³Ό μΆκ°
DOMμ μ¬λ¬λ² λ³κ²½νλ κ²μ κ°κ° 리νλ‘μ°μ 리νμΈν μ μΌκΈ°μν¨λ€. μ΄λ₯Ό νΌνκΈ° μν΄ μ»¨ν μ΄λ μμλ₯Ό μ¬μ©ν μ μλ€.
<html> <body> <ul id="fruits"></ul> </body> <script> const $fruits = document.getElementById("fruits"); // DocumentFragment λ Έλ μμ± const $fragment = document.createDocumentFragment(); ["Apple", "Banana", "Orange"].forEach((text) => { // 1. μμ λ Έλ μμ± const $li = document.createElement("li"); // 2. ν μ€νΈ λ Έλ μμ± const textNode = document.createTextNode(text); // 3. ν μ€νΈ λ Έλλ₯Ό $li μμ λ Έλμ μμ λ Έλλ‘ μΆκ° $li.appendChild(textNode); // 4. $li μμ λ Έλλ₯Ό DocumentFragment λ Έλμ λ§μ§λ§ μμ λ Έλλ‘ μΆκ° $fragment.appendChild($li); }); // 5. DocumentFragment λ Έλλ₯Ό #fruits μμ λ Έλμ λ§μ§λ§ μμ λ Έλλ‘ μΆκ° $fruits.appendChild($fragment); </script> </html>
λ¨Όμ DocumentFragment λ Έλλ₯Ό μμ±νκ³ DOMμ μΆκ°ν μμ λ Έλλ₯Ό μμ±νμ¬ DocumentFragment λ Έλμ μμ λ Έλλ‘ μΆκ°ν λ€μ, DocumentFragment λ Έλλ₯Ό κΈ°μ‘΄ DOMμ μΆκ°νλ€.
μ΄λ, μ€μ λ‘ DOM λ³κ²½μ΄ λ°μνλ κ²μ ν λ²λΏμ΄λ©° 리νλ‘μ°μ 리νμΈνΈλ ν λ²λ§ μ€ννλ€.
λ°λΌμ, μ¬λ¬ κ°μ μμ λ Έλλ₯Ό DOMμ μΆκ°νλ κ²½μ° DocumentFragment λ Έλλ₯Ό μ¬μ©νλ κ²μ΄ λ ν¨μ¨μ μ΄λ€.
39.6.5 λ
Έλ μ½μ
λ§μ§λ§ λ Έλλ‘ μΆκ°
Node.prototype.appendChild λ©μλλ μΈμλ‘ μ λ¬λ°μ λ Έλλ₯Ό μμ μ νΈμΆν λ Έλμ λ§μ§λ§ μμ λ Έλλ‘ DOMμ μΆκ°νλ€.
λ¨, λ Έλλ₯Ό μΆκ°ν μμΉλ₯Ό μ§μ ν μ μκ³ μΈμ λ λ§μ§λ§ μμ λ Έλλ‘ μΆκ°νλ€.
<html>
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
</ul>
</body>
<script>
// μμ λ
Έλ μμ±
const $li = document.createElement("li");
// ν
μ€νΈ λ
Έλλ₯Ό $li μμ λ
Έλμ λ§μ§λ§ μμ λ
Έλλ‘ μΆκ°
$li.appendChild(document.createTextNode("Orange"));
// $li μμ λ
Έλλ₯Ό #fruits μμ λ
Έλμ λ§μ§λ§ μμ λ
Έλλ‘ μΆκ°
document.getElementById("fruits").appendChild($li);
</script>
</html>
μ§μ ν μμΉμ λ Έλ μ½μ
Node.prototype.insertBefore(newNode, childNode) λ©μλλ 첫 λ²μ§Έ μΈμλ‘ μ λ¬λ°μ λ Έλλ₯Ό λ λ²μ§Έ μΈμλ‘ μ λ¬λ°μ λ Έλ μμ μ½μ νλ€.
<html>
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
</ul>
</body>
<script>
const $fruits = document.getElementById("fruits");
// μμ λ
Έλ μμ±
const $li = document.createElement("li");
// ν
μ€νΈ λ
Έλλ₯Ό $li μμ λ
Έλμ λ§μ§λ§ μμ λ
Έλλ‘ μΆκ°
$li.appendChild(document.createTextNode("Orange"));
// $li μμ λ
Έλλ₯Ό #fruits μμ λ
Έλμ λ§μ§λ§ μμ μμ μμ μ½μ
$fruits.insertBefore($li, $fruits.lastElementChild);
// Apple - Orange - Banana
</script>
</html>
39.6.6 λ
Έλ μ΄λ
DOMμ μ΄λ―Έ μ‘΄μ¬νλ λ Έλλ₯Ό appendChild λλ insertBefore λ©μλλ₯Ό μ¬μ©νμ¬ DOMμ λ€μ μΆκ°νλ©΄ νμ¬ μμΉμμ λ Έλλ₯Ό μ κ±°νκ³ μλ‘μ΄ μμΉμ λ Έλλ₯Ό μΆκ°νλ€. μ¦, λ Έλκ° μ΄λνλ€.
<html> <body> <ul id="fruits"> <li>Apple</li> <li>Banana</li> <li>Orange</li> </ul> </body> <script> const $fruits = document.getElementById("fruits"); // μ΄λ―Έ μ‘΄μ¬νλ μμ λ Έλλ₯Ό μ·¨λ const [$apple, $banana] = $fruits.children; // μ΄λ―Έ μ‘΄μ¬νλ $apple μμ λ Έλλ₯Ό #fruits μμ λ Έλμ λ§μ§λ§ λ Έλλ‘ μ΄λ $fruits.appendChild($apple); // Banana - Orange - Apple // μ΄λ―Έ μ‘΄μ¬νλ $banana μμ λ Έλλ₯Ό #fruits μμμ λ§μ§λ§ μμ λ Έλ μμΌλ‘ μ΄λ $fruits.insertBefore($banana, $fruits.lastElementChild); // Orange - Banana - Apple </script> </html>
39.6.7 λ
Έλ 볡μ¬
Node.prototype.cloneNode([deep: true | false]) λ©μλλ λ Έλμ μ¬λ³Έμ μμ±νμ¬ λ°ννλ€.
<html>
<body>
<ul id="fruits">
<li>Apple</li>
</ul>
</body>
<script>
const $fruits = document.getElementById("fruits");
const $apple = $fruits.firstElementChild;
// $apple μμλ₯Ό μμ 볡μ¬νμ¬ μ¬λ³Έμ μμ±. ν
μ€νΈ λ
Έλκ° μλ μ¬λ³Έμ΄ μμ±λλ€.
const $shallowClone = $apple.cloneNode();
// μ¬λ³Έ μμ λ
Έλμ ν
μ€νΈ μΆκ°
$shallowClone.textContent = "Banana";
// μ¬λ³Έ μμ λ
Έλλ₯Ό #fruits μμ λ
Έλμ λ§μ§λ§ λ
Έλλ‘ μΆκ°
$fruits.appendChild($shallowClone);
// #fruits μμλ₯Ό κΉμ 볡μ¬νμ¬ λͺ¨λ μμ λ
Έλκ° ν¬ν¨λ μ¬λ³Έμ μμ±
const $deepClone = $fruits.cloneNode(true);
// μ¬λ³Έ μμ λ
Έλλ₯Ό #fruits μμ λ
Έλμ λ§μ§λ§ λ
Έλλ‘ μΆκ°
$fruits.appendChild($deepClone);
</script>
</html>
39.6.8 λ
Έλ κ΅μ²΄
Node.prototype.replaceChild(newChild, oldChild) λ©μλλ μμ μ νΈμΆν λ Έλμ μμ λ Έλλ₯Ό λ€λ₯Έ λ Έλλ‘ κ΅μ²΄νλ€.
<html>
<body>
<ul id="fruits">
<li>Apple</li>
</ul>
</body>
<script>
const $fruits = document.getElementById("fruits");
// κΈ°μ‘΄ λ
Έλμ κ΅μ²΄ν μμ λ
Έλλ₯Ό μμ±
const $newChild = document.createElement("li");
$newChild.textContent = "Banana";
// #fruits μμ λ
Έλμ 첫 λ²μ§Έ μμ μμ λ
Έλλ₯Ό $newChild μμ λ
Έλλ‘ κ΅μ²΄
$fruits.replaceChild($newChild, $fruits.firstElementChild);
</script>
</html>
39.6.9 λ
Έλ μμ
Node.prototype.removeChild(child) λ©μλλ child λ§€κ°λ³μμ μΈμλ‘ μ λ¬ν λ Έλλ₯Ό DOMμμ μμ νλ€.
<html>
<body>
<ul id="fruits">
<li>Apple</li>
<li>Banana</li>
</ul>
</body>
<script>
const $fruits = document.getElementById("fruits");
// #fruits μμ λ
Έλμ λ§μ§λ§ μμλ₯Ό DOMμμ μμ
$fruits.removeChild($fruits.lastElementChild);
</script>
</html>
39.7 μ΄νΈλ¦¬λ·°νΈ
39.7.1 μ΄νΈλ¦¬λ·°νΈ λ
Έλμ attributes νλ‘νΌν°
HTML λ¬Έμμ κ΅¬μ± μμμΈ HTML μμλ μ¬λ¬ κ°μ μ΄νΈλ¦¬λ·°νΈλ₯Ό κ°μ§ μ μλ€.
HTML μμμ λμμ μ μ΄νκΈ° μν μΆκ°μ μΈ μ 보λ₯Ό μ 곡νλ€.
λλΆλΆμ μ΄νΈλ¦¬λ·°νΈλ λͺ¨λ HTML μμμμ μ¬μ©λ μ μμ§λ§, type, value, checked μ΄νΈλ¦¬λ·°νΈλ input μμμλ§ μ¬μ©ν μ μλ κ²½μ°λ μλ€.
HTML λ¬Έμκ° νμ±λ λ HTML μμμ μ΄νΈλ¦¬λ·°νΈλ μ΄νΈλ¦¬λ·°νΈ λ Έλλ‘ λ³νλμ΄ μμ λ Έλμ μ°κ²°λλ€.
39.7.2 HTML μ΄νΈλ¦¬λ·°νΈ μ‘°μ
HTML μ΄νΈλ¦¬λ·°νΈ κ°μ μ°Έμ‘°νλ €λ©΄ Element.prototype.getAttribute(attributeName) λ©μλλ₯Ό μ¬μ©νκ³ , HTML μ΄νΈλ¦¬λ·°νΈ κ°μ λ³κ²½νλ €λ©΄ Element.prototype.setAttribute(attributeName, attributeValue) λ©μλλ₯Ό μ¬μ©νλ€.
<html>
<body>
<input id="user" type="text" value="ungmo2" />
<script>
const $input = document.getElementById("user");
// value μ΄νΈλ¦¬λ·°νΈ κ°μ μ·¨λ
const inputValue = $input.getAttribute("value");
console.log(inputValue); // ungmo2
// value μ΄νΈλ¦¬λ·°νΈ κ°μ λ³κ²½
$input.setAttribute("value", "foo");
console.log($input.getAttribute("value")); // foo
</script>
</body>
</html>
Last updated