JavaScript/자바 스크립트 기초

DOM 조작 - 생성, 제거, 변경 : createElement, removeChild, replaceChild

lamarcK 2025. 3. 21. 20:19

DOM은 HTML의 가계도이며 HTML의 요소, 요소의 속성, 주속 등을 노드라고 한다.

 

그렇다면 이런 노드들을 제어하는 방법은 무엇일까?

바로 DOM 메서드를 사용하는 것이다.

 

DOM 메서드는 다양한 종류가 있지만 그중 createElement, removeChild, replaceChild는 요소를 생성하고, 제거하고, 변경하는데 사용되는 기본적인 메서드이다.

 

1. createElement()

  • 역할: 새로운 HTML 요소를 생성한다.
  • 사용법: document.createElement(tagName)
    • tagName: 생성할 HTML 요소의 태그 이름 (예: "div", "p", "span").
let newDiv = document.createElement("div");
newDiv.textContent = "새로운 div 요소입니다.";
document.body.appendChild(newDiv); // 생성된 div를 body에 추가

2. removeChild()

  • 역할: 특정 부모 요소에서 자식 요소를 제거한다.
  • 사용법: parentElement.removeChild(childElement)
    • parentElement: 자식 요소를 제거할 부모 요소.
    • childElement: 제거할 자식 요소.
let parent = document.getElementById("parent");
let child = document.getElementById("child");
parent.removeChild(child); // id가 "child"인 요소를 제거

3. replaceChild()

  • 역할: 부모 요소의 특정 자식 요소를 새로운 요소로 교체한다.
  • 사용법: parentElement.replaceChild(newChild, oldChild)
    • parentElement: 자식 요소를 교체할 부모 요소.
    • newChild: 새로운 자식 요소.
    • oldChild: 교체될 기존 자식 요소.
let parent = document.getElementById("parent");
let oldChild = document.getElementById("oldChild");
let newChild = document.createElement("p");
newChild.textContent = "새로운 p 요소입니다.";
parent.replaceChild(newChild, oldChild); // 기존 자식 요소를 새로운 p 요소로 교체

 

예시 학습

1. createElement() 예시

// createElement() 예시
const newDiv = document.createElement("div");
newDiv.id = "myNewDiv"; // ID 부여
newDiv.textContent = "새로운 div 요소입니다.";
newDiv.style.backgroundColor = "lightblue";
newDiv.style.padding = "10px";
document.body.appendChild(newDiv);

1. document.createElement(태그이름)

"태그"를 생성하는 메서드이다. 예시의 경우 <div></div> 태그를 생성한 것이다.

 

  • const newDiv = document.createElement("div"); 코드를 실행하여 newDiv 변수에 할당된 요소는 JavaScript 엔진의 메모리에 저장된다.
  • 이렇게 생성된 <div></div> 는 HTMLDivElement 객체이며 데이터 타입은 참조형 (Reference) 데이터 타입인 객체(object) 타입이다.

때문에 해당 메서드만 사용한 경우엔 html상에 아무런 변화도 없다.

2. .id // .textContent // .style.backgroundColor // .style.padding

각각 DOM 요소의 속성에 접근하는 연산자이다.

  • 아이디, 텍스트 내용, 배경색상, 패딩 속성에 접근한다.
  • 이후 할당 연산자(=)를 사용해서 왼쪽의 변수 또는 속성에 오른쪽의 값을 할당한다.

여기까지의 내용은 모두 HTML상에 반영되지 않는다. 그림으로 치자면 화가가 머릿속에 그림을 어떻게 그릴지까진 생각해두고 막상 실제로 그림으로 옮기진 않은 상태라고 할 수 있다.

3. document.body.appendChild(노드 객체)

HTML의 부모 노드(body)의 마지막 부분에 (노드 객체)를 자식 요소로 붙이는 메서드이다.

즉,  body의 끝부분에 코드를 추가한다는 소리다.

  • document.body.appendChild(newDiv);는 newDiv라는 노드 객체를 HTML의 body 태그 끝 부분에 코드로 추가했으며
  • 실제로 html상의 body 태그에 접근해서 코드를 추가했기 때문에 DOM 트리에 <div> 태그가 반영된다.

그림으로 따지면 상상하던 그림을 캔버스에 그렸다는 얘기다.

2. removeChild() 예시

그렇다면 이렇게 추가된 요소를 삭제하려면 어떻게 해야할까?

    // removeChild() 예시
    const childToRemove = document.getElementById("myNewDiv");
    const parent = childToRemove.parentNode;
    parent.removeChild(childToRemove);

1. document.getElementById(ID)

JavaScript에서 HTML 문서 내에서 특정 ID를 가진 요소를 찾는 데 사용되는 메서드이다.

즉, HTML 코드 혹은 DOM 트리에서 해당 ID를 가진 요소를 찾는 것이다.

ID는 알다시피 1개밖에 존재하지 않는다.

  • const childToRemove = document.getElementById("myNewDiv")는 myNewDiv라는 ID를 가진 요소를 찾아서 childToRemove라는 변수에 해당 객체를 저장한 것이다.
  • 만약에 해당 요소에 자식요소가 있다면 자식요소도 모두 포함된다.

2. .parentNode

parentNode는 JavaScript에서 DOM 요소의 속성 중 하나로, 해당 요소의 부모 요소를 나타낸다.

 

  • const parent = childToRemove.parentNode;는 childToRemove라는 변수의 부모 요소를 반환(return)한다.
  • 즉 parent라는 변수에 childToRemove의 부모 요소를 할당했다는 얘기다.
  • 위의 코드대로라면 <body> 태그가 될 것이다.

3. .removeChild()

특정 부모 요소에서 자식 요소를 제거하는 데 사용되는 메서드이다. 반드시 부모요소(. 연산자 앞에 들어가는 이름)과 함께 사용되야 한다.

  • parent.removeChild(childToRemove)는 앞서 선언한 parent 변수에서 childToRemove라는 변수의 자식을 지운다는 얘기다.
  • childToRemove는 ID가 "myNewDiv"인 요소다.

어차피 parent.removeChild(childToRemove);에서 id가 myNewDiv인 요소를 지우는 것인데 번거롭게 const parent = childToRemove.parentNode;까지 사용하는 이유는 .removeChild() 자체가 단독으로 사용이 불가능하고 반드시 대상이 되는 부모요소가 필요하기 때문이다.

만약에 id가 아니라 class를 대상으로하면 해당 class의 이름을 가진 모든 자식 요소가 지워진다.

 

때문에 id를 대상으로 사용할 것이라면 중간에 비효율적인 과정이 있는 removechild 대신에 비슷한 작용을 하는 remove 메서드를 사용하는 것이 더 효율적이다.

ID 대상으로 더 효율적인 .remove()

해당 메서드는 지울대상.remove() 식으로 사용한다.

때문에 아래와 같이 사용할 수 있다.

const childToRemove = document.getElementById("myNewDiv");
childToRemove.remove();

removeChild()의 한계

이름에서 알다시피 부모의 직접적인 자식 요소만 지울 수 있다. 즉 자식의 자식 요소. 손자 요소는 직접적으로 지우는 것이 불가능하다.

3. replaceChild() 예시

추가된 요소를 삭제하지 않고 교체하는 방법도 있다.

// replaceChild() 예시
const oldChild = document.getElementById("myNewDiv"); // 기존 요소 선택
const newChild = document.createElement("p");
newChild.textContent = "새로운 p 요소입니다.";
newChild.style.backgroundColor = "yellow"; // 새로운 요소 스타일 추가
newChild.style.padding = "5px";
document.body.replaceChild(newChild, oldChild); // 요소 교체

 

1. .document.createElement()

새롭게 요소를 만드는 이유는 기존 요소의 내용을 수정하는 것이 아니라 교체하는 것이기 때문이다.

축구로 예를 들자면 A라는 선수가 있다면 교체 투입될 B라는 선수를 만드는 것이다.

때문에 코드가 상당부분 createElement() 예시와 비슷하다

document.body.replaceChild(newChild, oldChild); // 요소 교체

특정 부모 요소의 자식 요소를 새로운 요소로 교체하는 메서드이다.

  • const oldChild = document.getElementById("myNewDiv");라는 기존 요소를
    const newChild = document.createElement("p")라는 신규 요소로 변경한다.