[JavaScript]자식 노드를 변경하는 방법

자식 노드를 변경하는 방법

이번 포스팅은 자식 노드를 변경할 수 있는 replaceChild() 메서드와 replcaeChildren() 메서드 사용 방법을 설명합니다.

---

replaceChild() 메서드

Node 객체에서 제공하는 replaceChild() 메서드는 선택한 부모 노드의 특정 자식 노드를 다른 노드로 교체합니다. 여기서 특정 자식 노드는 첫 번째 자식 노드, 마지막 자식 노드 등을 의미합니다.

parentNode.replaceChild(newChild, oldChild);

parentNode는 선택한 부모 노드, newChild는 교체할 새로운 자식 노드, oldChild는 특정 자식 노드를 의미합니다.

 

아래는 간단한 HTML 마크업입니다.

<div id="content">
  <ul id="list">
    <li>JavaScript</li>
    <li>React</li>
    <li>Vue</li>
    <li>Svelte</li>
    <li>Angular</li>
  </ul>
</div>

 

아래는 id가 "list"인 HTML 요소의 첫 번째 자식 노드를 새로운 노드로 변경하는 JavaScript 코드입니다.

// 부모 노드 접근
const ulNode = document.getElementById("list");

// 새로운 노드 생성
const newLiNode = document.createElement("li");
newLiNode.innerText = "Ruby";

// 첫 번째 자식 노드를 새로운 노드로 변경
ulNode.replaceChild(newLiNode, ulNode.firstElementChild);

[실행 결과]

텍스트가 "JavaScript"인 <li> 요소가 텍스트가 "Ruby"인 <li> 요소로 변경된 것을 확인할 수 있습니다.

 

아래는 children 프로퍼티와 인덱스 접근 방법을 사용하여 두 번째 인덱스에 위치하는 자식 노드를 새로운 노드로 변경하는 JavaScript 코드입니다.

const ulNode = document.getElementById("list");
const newLiNode = document.createElement("li");
newLiNode.innerText = "Ruby";

ulNode.replaceChild(newLiNode, ulNode.children[2]);

---

replaceChildren() 메서드

Element 객체에서 제공하는 replaceChildren() 메서드는 선택한 노드의 자식 노드를 매개변수로 전달된 노드로 변경합니다. 여기서 매개변수는 문자열 또는 Node 객체일 수 있습니다.

parentNode.replaceChildren(newChild);
parentNode.replaceChildren(newChild1, newChild2, ..., newChildN);

replaceChildren() 메서드에 여러 노드를 전달할 수 있으며, 반환 결과는 undefined입니다. 자식 노드를 변경할 수 없는 경우 HierarchyRequestError 예외가 발생합니다.

---

예제 1. 단일 노드를 매개변수로 전달

replaceChildren() 메서드에 단일 노드를 전달하면, 선택한 노드의 모든 자식 노드가 단일 노드로 변경됩니다.

 

아래는 간단한 HTML 마크업입니다.

<div id="content">
  <ul id="list">
    <li>JavaScript</li>
    <li>React</li>
    <li>Vue</li>
    <li>Svelte</li>
    <li>Angular</li>
  </ul>
</div>

 

아래는 id가 "list"인 HTML 요소를 선택 후 replaceChildren() 메서드로 자식 노드를 변경하는 JavaScript 코드입니다.

const ulNode = document.getElementById("list");

const newLiNode = document.createElement("li");
newLiNode.innerText = "Ruby";

ulNode.replaceChildren(newLiNode);

[실행 결과]

---

예제 2. 여러 노드를 매개변수로 전달

replaceChildren() 메서드에는 여러 노드를 매개변수로 전달할 수 있습니다.

 

아래는 id가 "list"인 HTML 요소를 선택 후 replaceChildren() 메서드에 여러 노드를 매개변수로 전달하는 JavaScript 코드입니다.

const ulNode = document.getElementById("list");

const newLiNode1 = document.createElement("li");
newLiNode1.innerText = "Ruby";

const newLiNode2 = document.createElement("li");
newLiNode2.innerText = "C#";

const newLiNode3 = document.createElement("li");
newLiNode3.innerText = "Java";

ulNode.replaceChildren(newLiNode1, newLiNode2, newLiNode3);

[실행 결과]

---

예제 3. 노드 비우기

자식 노드를 비우고 싶다면 replaceChildren() 메서드에 매개변수를 전달하지 않습니다.

const ulNode = document.getElementById("list");
ulNode.replaceChildren();

[실행 결과]

---

정리

• 자식 노드를 새로운 노드로 변경하는 방법으로 replaceChild(), replaceChildren() 메서드를 사용할 수 있습니다.
• replaceChild() 메서드는 특정 자식 노드를 새로운 노드로 변경합니다.
• replaceChildren() 메서드는 replaceChild() 메서드와 달리 모든 자식 노드를 새로운 노드로 변경합니다.