DOM 조작 끝판왕! HTML/CSS/JS로 새 노드 추가/삭제 마스터 비법 (12-4강)

웹 페이지 요소를 마음대로 추가하고 지우는 방법!

앞에서 우리는 웹 브라우저가 웹 페이지를 어떻게 이해하는지 배웠어. 웹 브라우저는 웹 페이지를 'DOM 트리'라는 구조로 만들고, 이 트리의 각 부분을 '노드'라고 부른다고 했지? 그리고 이 노드들을 선택하고 조작하는 방법도 배웠어.

오늘은 이 DOM 트리에 새로운 노드를 추가하거나, 이미 있는 노드를 삭제하는 방법을 배울 거야.

1. 새로운 노드 추가하기

새로운 노드를 추가하는 건 크게 두 단계로 나눌 수 있어.

1. 노드 만들기: 먼저 추가하고 싶은 노드를 만들어야 해.
2. 노드 연결하기: 만든 노드를 기존 DOM 트리에 연결해야 웹 브라우저에 보이게 돼.

1.1. 노드 만들기

• 요소 노드 만들기: document.createElement('태그이름')을 사용하면 돼. 예를 들어, <a> 태그를 만들고 싶으면 document.createElement('a')라고 하면 돼.
• 텍스트 노드 만들기: document.createTextNode('텍스트 내용')을 사용하면 돼.
• 속성 노드 만들기: document.createAttribute('속성이름')을 사용하면 돼.

1.2. 노드 연결하기

• 자식으로 추가하기: 부모노드.appendChild(자식노드)를 사용하면 돼. 이건 부모 노드의 맨 마지막 자식으로 추가하는 거야.
• 속성 설정하기: 요소노드.setAttribute('속성이름', '값')을 사용하면 돼.

예시: <a> 태그를 만들어서 웹 페이지에 추가해 보자.

// 1. <a> 요소 노드 만들기
const newAnchor = document.createElement('a');

// 2. 텍스트 노드 만들기 (링크에 보일 글자)
const linkText = document.createTextNode('구글로 이동');

// 3. 텍스트 노드를 <a> 요소의 자식으로 추가
newAnchor.appendChild(linkText);

// 4. href 속성 만들기
const hrefAttribute = document.createAttribute('href');

// 5. href 속성에 값 설정 (링크 주소)
hrefAttribute.value = 'https://www.google.com';

// 6. 만든 href 속성을 <a> 요소에 설정
newAnchor.setAttributeNode(hrefAttribute); // 또는 newAnchor.setAttribute('href', 'https://www.google.com');

// 7. <a> 요소를 body 태그의 자식으로 추가 (웹 페이지에 보이게 함)
document.body.appendChild(newAnchor);

이렇게 하면 웹 페이지에 "구글로 이동"이라는 링크가 생길 거야!

2. 기존 노드 삭제하기

이미 있는 노드를 삭제하는 건 더 간단해.

• 노드 삭제하기: 부모노드.removeChild(삭제할노드)를 사용하면 돼.

주의할 점: removeChild는 삭제할 노드의 부모 노드에서 사용해야 해.

예시: <h1> 태그를 삭제해 보자.

// 1. 삭제할 <h1> 요소를 찾기
const heading = document.querySelector('h1');

// 2. <h1> 요소의 부모 노드를 찾기
const parentOfHeading = heading.parentNode;

// 3. 부모 노드에서 <h1> 요소를 삭제
parentOfHeading.removeChild(heading);

이렇게 하면 <h1> 태그가 웹 페이지에서 사라질 거야.

여러 개의 노드 삭제하기

만약 여러 개의 노드를 한 번에 삭제하고 싶다면?

방법 1: 하나씩 찾아서 삭제하기

// 모든 <p> 요소를 찾아서 하나씩 삭제
const paragraphs = document.querySelectorAll('p');
paragraphs.forEach(p => {
  p.parentNode.removeChild(p);
});

방법 2: 자식 노드들을 이용하기

// body 태그의 모든 자식 노드 중에서 이름이 'p'인 노드만 삭제
const bodyChildren = document.body.childNodes; // body의 모든 자식 노드를 가져옴 (텍스트 노드 포함)

for (let i = bodyChildren.length - 1; i >= 0; i--) { // 뒤에서부터 삭제해야 안전함
  const node = bodyChildren[i];
  if (node.nodeType === Node.ELEMENT_NODE && node.tagName === 'P') { // 요소 노드이고 태그 이름이 'P'인 경우
    document.body.removeChild(node);
  }
}

이처럼 DOM 트리를 조작하면 웹 페이지의 내용을 자유자재로 바꾸고 관리할 수 있어. 새로운 요소를 추가하거나 불필요한 요소를 삭제하는 건 웹 개발에서 아주 기본적인 기능이니까 꼭 익혀두도록 하자!