DOM이란? 자바스크립트로 HTML을 조작하는 방법

May 29, 2024

자바스크립트와 HTML의 만남

자바스크립트 적용 전
첫 번째 이미지는 웹 페이지의 기본 상태를 보여줍니다. 여기서 <h1> 태그는 원래의 텍스트를 포함하고 있습니다.

자바스크립트 적용 후
두 번째 이미지는 자바스크립트를 통해 <h1> 태그의 텍스트가 "안녕하세요"로 변경된 후의 상태를 보여줍니다. 이는 웹 페이지가 어떻게 동적으로 조작될 수 있는지를 시각적으로 설명해 줍니다.

웹 개발에서는 자바스크립트를 사용하여 DOM을 조작하는 것이 일반적입니다. 이를 통해 개발자는 사용자 인터페이스의 동적인 상호작용을 구현할 수 있습니다.


DOM이란 무엇인가?

DOM은 Document Object Model의 약자로, HTML 또는 XML 문서의 구조화된 표현입니다.

웹 브라우저는 HTML 문서를 로드한 후, 이를 파싱하여 DOM을 생성합니다. DOM은 자바스크립트를 통해 동적으로 조작할 수 있으며, 이를 활용해 웹 페이지에 상호작용 기능을 추가할 수 있습니다.


DOM 트리

출처: https://simplesnippets.tech/what-is-document-object-modeldom-how-js-interacts-with-dom/#google_vignette출처: https://simplesnippets.tech/what-is-document-object-modeldom-how-js-interacts-with-dom/#google_vignette

웹 브라우저는 HTML을 파싱하여 각 요소를 객체로 변환하고, 이를 DOM 트리로 구성합니다. DOM 트리는 웹 페이지의 구조를 이루며, HTML 요소들은 각각 노드로 표현됩니다. 노드는 크게 세 가지 유형으로 분류됩니다.

  • 요소 노드(Element Node): HTML의 각 태그는 요소 노드로 표현되며, 이는 웹 페이지의 HTML 구조를 이루는 기본 단위입니다. 예를 들어, <div>, <h1>,<p> 태그들이 이에 해당합니다.
  • 텍스트 노드(Text Node): 모든 텍스트 콘텐츠는 텍스트 노드로 관리되며, 요소 노드와 분리하여 취급됩니다. 예를 들어, <p> 태그 내의 텍스트가 이에 해당합니다.
  • 속성 노드(Attribute Node): HTML 요소의 속성들(예: class, id, style)은 각 요소 노드에 연결된 속성 노드로 표현됩니다. 이 노드들은 요소의 추가 정보를 제공하며, CSS 스타일링이나 JavaScript 조작에 사용됩니다.

DOM API

DOM API는 DOM을 동적으로 조작할 수 있도록 해주는 메서드와 속성의 집합입니다. 다음은 웹 페이지에서 요소를 생성하고, 수정하며, 조작하는 데 사용되는 주로 많이 사용되는 DOM API 메서드를 소개하겠습니다.

document.getElementById()
HTML 문서에서 특정 ID를 가진 요소를 찾아 그 요소를 반환합니다. 예를 들어, 아래 코드는 ID가 "myDiv"인 요소의 배경색을 파란색으로 변경합니다.

   let element = document.getElementById("myDiv");
   element.style.backgroundColor = "blue";

document.createElement()
HTML 요소를 동적으로 생성할 때 사용합니다. 아래 코드는 새로운 <div> 요소를 만들고, "Hello, World!"라는 텍스트를 삽입한 후, 문서의 body에 추가합니다.

   let newDiv = document.createElement("div");
   newDiv.innerHTML = "Hello, World!";
   document.body.appendChild(newDiv);

parentNode.appendChild()
새로 생성된 요소를 DOM에 추가하려면 appendChild() 메서드를 사용합니다. 아래 코드는 "parentDiv"라는 ID를 가진 요소 안에 새 <p> 요소를 추가합니다.

  let parent = document.getElementById("parentDiv");
   let newChild = document.createElement("p");
   newChild.textContent = "This is a new paragraph.";
   parent.appendChild(newChild);

document.querySelector()
CSS 선택자를 사용하여 문서에서 요소를 찾고 싶을 때 사용합니다. 아래 코드는 페이지의 첫 번째 <button> 요소를 찾아 그 글자 색을 빨간색으로 변경합니다.

   let firstButton = document.querySelector("button");
   firstButton.style.color = "red";

이러한 DOM API 메서드들을 활용하면 웹 페이지의 요소를 실시간으로 조작하고, 사용자의 상호작용에 반응하여 페이지를 업데이트할 수 있습니다.