DOM(Document Object Model) - DOM 조작 - 3 - 요소의 생성과 삭제

Table of Contents

DOM(Document Object Model) – DOM 조작 – 3 – 요소의 생성과 삭제

요소의 생성하기

DOM을 사용하여 HTML 문서에 요소를 동적으로 생성할 수 있습니다. 예를 들어, 새로운 div 요소를 생성하고 텍스트를 추가하는 방법을 알아보겠습니다.

소제목: 요소 생성하기

자바스크립트를 사용하여 DOM을 조작하여 새로운 요소를 생성하는 방법입니다.

예시:

아래는 자바스크립트를 사용하여 새로운 div 요소를 생성하고, 텍스트를 추가하는 예시입니다.

// 새로운 div 요소 생성
const newDiv = document.createElement('div');

// 텍스트 추가
newDiv.textContent = '안녕하세요, 새로운 요소입니다!';

// 생성한 요소를 문서에 추가
document.body.appendChild(newDiv);

요소의 삭제하기

DOM을 사용하여 HTML 문서에서 요소를 삭제할 수도 있습니다. 예를 들어, 특정 요소를 찾아서 삭제하는 방법을 알아보겠습니다.

소제목: 요소 삭제하기

자바스크립트를 사용하여 DOM을 조작하여 특정 요소를 삭제하는 방법입니다.

예시:

아래는 자바스크립트를 사용하여 특정 div 요소를 찾아서 삭제하는 예시입니다.

// 삭제할 요소 선택
const elementToRemove = document.getElementById('myElement');

// 부모 요소로부터 삭제
elementToRemove.parentNode.removeChild(elementToRemove);

비유적인 표현을 사용해서 쉽게 이해하기

DOM을 비유적으로 표현하면, HTML 문서는 나무의 가지와 잎사귀로 비유할 수 있습니다. DOM은 이 나무의 가지와 잎사귀를 조작하는 도구이며, 요소의 생성과 삭제는 나무에 새로운 가지를 심거나 기존의 가지를 자르는 것과 같습니다. 요소의 생성은 새로운 가지가 나무에 돋아나는 것이고, 요소의 삭제는 불필요한 가지를 제거하는 것입니다.

주의해야 할 점:

요소를 생성할 때는 document.createElement() 메서드를 사용하여 새로운 요소를 생성한 후, appendChild() 메서드를 사용하여 생성한 요소를 원하는 위치에 추가해야 합니다.
요소를 삭제할 때는 삭제하려는 요소의 부모 요소를 찾아 removeChild() 메서드를 사용하여 삭제해야 합니다.
요소를 삭제하기 전에 해당 요소가 실제로 존재하는지 확인하는 것이 중요합니다. 존재하지 않는 요소를 삭제하려고 하면 에러가 발생할 수 있습니다.
요소를 삭제할 때 주의해야 할 점은 다른 요소들과의 관계를 고려해야 한다는 점입니다. 다른 요소들이 삭제된 요소를 참조하고 있다면 해당 요소를 삭제하기 전에 그 관계를 해제해야 합니다.

DOM을 조작하여 요소를 생성하고 삭제하는 것은 웹 페이지의 동적인 기능을 구현하는 데에 매우 유용합니다. 적절하게 활용하면 사용자와 상호작용할 수 있는 풍부한 웹 애플리케이션을 개발할 수 있습니다.