DOM(Document Object Model)은 웹 페이지의 요소들을 구조화하여 트리 형태로 표현하는 방법입니다. 자바스크립트를 통해 DOM을 조작하면 웹 페이지의 요소들을 동적으로 변경하거나 이벤트를 추가할 수 있습니다.

요소 선택하기

DOM을 조작하기 위해 먼저 원하는 요소를 선택해야 합니다. document.querySelector() 메서드를 사용하여 CSS 선택자를 이용해 요소를 선택할 수 있습니다.

예를 들어, 아래 코드는 id가 “myElement”인 요소를 선택하는 예시입니다.

var element = document.querySelector("#myElement");

요소 생성하기

DOM을 조작하여 새로운 요소를 생성할 수도 있습니다. document.createElement() 메서드를 사용하여 원하는 요소를 생성할 수 있습니다.

아래 코드는 새로운 <div> 요소를 생성하는 예시입니다.

var newDiv = document.createElement("div");

요소 추가하기

생성한 요소를 DOM에 추가하기 위해서는 appendChild() 메서드를 사용합니다. 이 메서드를 통해 원하는 부모 요소에 자식 요소를 추가할 수 있습니다.

아래 코드는 parentElement라는 부모 요소에 childElement라는 자식 요소를 추가하는 예시입니다.

parentElement.appendChild(childElement);

요소 수정하기

DOM을 수정하기 위해서는 선택한 요소의 속성, 스타일 등을 변경해야 합니다. 예를 들어, element.textContent를 사용하면 요소의 텍스트 내용을 변경할 수 있습니다.

아래 코드는 element의 텍스트 내용을 “새로운 내용”으로 변경하는 예시입니다.

element.textContent = "새로운 내용";

요소 삭제하기

DOM에서 요소를 삭제하기 위해서는 removeChild() 메서드를 사용합니다. 이 메서드를 통해 원하는 요소를 삭제할 수 있습니다.

아래 코드는 parentElement에 속한 childElement 요소를 삭제하는 예시입니다.

parentElement.removeChild(childElement);

DOM을 조작하는 방법에 대한 기본적인 내용을 살펴보았습니다. 웹 페이지의 동적인 기능을 구현하거나 원하는 요소를 조작하기 위해서는 DOM 조작에 대한 이해가 필요합니다. 더 자세한 내용은 MDN 웹 문서에서 확인할 수 있습니다.