티스토리 뷰

IT지식

DOM, 웹페이지의 나무(tree)

고슈슈 2024. 8. 19. 23:08

목차



    반응형

    웹 페이지를 개발하다 보면, "DOM"이라는 용어를 자주 접하게 됩니다. 처음엔 조금 낯설고 복잡해 보일 수 있지만, DOM을 이해하면 웹 개발이 훨씬 더 재미있어질 겁니다.

    오늘은 이 Document Object Model(DOM)이 무엇인지, 왜 중요한지, 그리고 어떻게 활용할 수 있는지 함께 알아보겠습니다.

     

    출처 위키백과

    1. DOM이란 무엇인가요?

    DOM(Document Object Model)은 웹 페이지의 구조를 계층적으로 표현한 모델입니다. 웹 페이지의 HTML 문서를 브라우저가 읽고, 이 문서를 트리 구조의 객체 모델로 변환하는데, 이것이 바로 DOM입니다. 이 트리 구조에서 각 요소는 노드(Node)라고 불리며, 서로 부모와 자식 관계를 맺고 있습니다.

    간단하게 DOM은 웹 페이지의 "청사진" 같은 것입니다. 이 청사진을 통해 JavaScript 같은 프로그래밍 언어로 웹 페이지를 조작할 수 있습니다. DOM을 이용하면 텍스트를 바꾸거나, 이미지를 교체하거나, 새로운 요소를 추가하는 등 웹 페이지의 내용을 동적으로 변경할 수 있습니다.

     

    2. DOM의 구조는?

    DOM을 이해하려면 그 구조를 먼저 살펴봐야 합니다. DOM은 트리 구조로 표현되며, 모든 요소는 이 트리의 노드로 구성됩니다. 가장 상위에 있는 노드를 Document라고 부르며, 이 노드는 HTML 문서 전체를 대표합니다. 그 아래로는 html, head, body 등의 태그가 각각의 노드로 연결되어 있습니다.

     

    <!DOCTYPE html>
<html>
  <head>
    <title>My Web Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>Welcome to my web page.</p>
  </body>
</html>

     

    위의 HTML 문서는 DOM에서 다음과 같은 트리 구조로 표현됩니다.

    Document → html → head → title: "My Web Page"
                                    → body → h1: "Hello, World!"
                                                  → p: "Welcome to my web page."

     

    각 태그는 트리의 한 노드로서 부모와 자식 관계를 형성합니다. html 태그는 최상위 요소로, 그 자식으로 head와 body 태그가 있으며, head 태그에는 title 태그가, body 태그에는 h1과 p 태그가 자식으로 포함되어 있습니다.

     

    3. DOM을 활용한 웹 페이지 조작

    DOM의 진정한 힘은 JavaScript를 통해 웹 페이지를 동적으로 조작할 수 있다는 점에 있습니다. 이제 DOM을 어떻게 활용할 수 있는지 몇 가지 예제를 통해 알아보겠습니다.

     

    1) 요소 선택하기

    DOM을 통해 특정 요소를 선택하려면, document 객체의 다양한 메서드를 사용할 수 있습니다. 가장 기본적인 메서드로는 getElementById, getElementsByClassName, getElementsByTagName, 그리고 querySelector가 있습니다.

    // ID로 요소 선택
const header = document.getElementById("header");

// 클래스 이름으로 요소 선택
const paragraphs = document.getElementsByClassName("text");

// 태그 이름으로 요소 선택
const divs = document.getElementsByTagName("div");

// CSS 선택자로 요소 선택
const main = document.querySelector(".main");

    querySelector는 CSS 선택자를 사용해 요소를 선택할 수 있어 매우 유용합니다. 예를 들어, .main > p는 .main 클래스 내의 첫 번째 <p> 요소를 선택합니다.

     

    2) 요소 내용 변경하기

    DOM을 통해 선택한 요소의 내용을 변경하는 것도 간단합니다. innerHTML, textContent, innerText 등의 속성을 사용하면 됩니다.

    const header = document.getElementById("header");

// 요소의 HTML 내용 변경
header.innerHTML = "<h2>New Title</h2>";

// 요소의 텍스트 내용 변경
header.textContent = "New Text";

    innerHTML은 HTML 태그를 포함한 모든 내용을 변경할 수 있으며, textContent와 innerText는 텍스트만 변경할 수 있습니다.

     

    3) 스타일 변경하기

    DOM을 통해 요소의 스타일도 동적으로 변경할 수 있습니다. style 속성을 사용하면, 인라인 스타일을 조정할 수 있습니다.

    const header = document.getElementById("header");

// 배경색 변경
header.style.backgroundColor = "lightblue";

// 글자 크기 변경
header.style.fontSize = "24px";

    이렇게 JavaScript를 사용하면 웹 페이지의 스타일을 동적으로 변경할 수 있어, 사용자와의 상호작용을 더 풍부하게 만들 수 있습니다.

     

    4) 새로운 요소 추가하기

    DOM을 사용하면 기존의 요소 외에 새로운 요소를 추가할 수도 있습니다. createElement, appendChild, insertBefore 등의 메서드를 활용해 새로운 노드를 생성하고, 원하는 위치에 삽입할 수 있습니다.

    const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";

const main = document.querySelector(".main");
main.appendChild(newParagraph);

    위 코드에서는 새로운 <p> 요소를 생성하고, .main 클래스 안에 추가합니다. 이렇게 동적으로 요소를 생성하고 삽입할 수 있어, 웹 페이지에 실시간으로 변화를 줄 수 있습니다.

     

    5) 이벤트 처리하기

    DOM을 통해 웹 페이지에서 발생하는 다양한 이벤트를 처리할 수 있습니다. 이벤트 처리기를 설정하면, 사용자가 버튼을 클릭하거나 키를 누를 때 특정 동작을 실행할 수 있습니다.

    const button = document.getElementById("myButton");

button.addEventListener("click", function() {
    alert("Button clicked!");
});

    위 코드에서는 버튼이 클릭될 때 알림창이 뜨도록 설정했습니다. 이벤트 처리기를 통해 사용자와 상호작용하는 웹 페이지를 쉽게 구현할 수 있습니다.

     

    4. DOM의 중요성

    DOM은 웹 개발에서 매우 중요한 역할을 합니다. DOM을 이해하면, 웹 페이지의 구조를 명확히 파악하고, JavaScript를 통해 동적으로 조작할 수 있습니다. DOM을 활용하면 전체 페이지를 새로 고치지 않고도, 웹 페이지의 일부를 실시간으로 업데이트할 수 있어 사용자 경험이 향상됩니다.

    또한, DOM은 웹 표준을 따르기 때문에 브라우저 간 호환성도 뛰어납니다. 즉, 어떤 웹 브라우저에서든 DOM을 통해 일관된 동작을 보장할 수 있습니다. 이러한 이유로 DOM은 모든 웹 개발자에게 필수적인 개념입니다.

     

    5. DOM의 한계와 주의사항

    DOM은 매우 강력한 도구이지만, 몇 가지 한계와 주의사항도 있습니다. 먼저, DOM 조작은 복잡한 웹 페이지에서 성능 문제를 일으킬 수 있습니다. 특히, 많은 양의 데이터를 실시간으로 처리할 때는 DOM 조작이 느려질 수 있습니다.

    또한, DOM을 잘못 다루면 보안 문제가 발생할 수 있습니다. 예를 들어, 사용자의 입력을 직접 innerHTML에 삽입하면, XSS(Cross-Site Scripting) 공격에 노출될 수 있습니다. 이를 방지하려면 사용자의 입력을 반드시 검증하고, 가능한 경우 textContent를 사용해 텍스트만 처리하는 것이 좋습니다.

     

    DOM(Document Object Model)은 웹 페이지의 구조를 이해하고 조작하는 데 필수적인 도구입니다. DOM을 통해 웹 페이지의 요소를 쉽게 선택하고, 수정하거나 추가할 수 있습니다. 또한, JavaScript를 통해 DOM을 동적으로 조작함으로써, 더욱 인터랙티브하고 사용자 친화적인 웹 페이지를 만들 수 있습니다.

    DOM의 기본 개념과 활용 방법을 잘 이해하면, 웹 개발이 훨씬 더 재미있고 창의적으로 변할 것입니다. 이제 DOM을 활용해 여러분의 웹 페이지를 더욱 매력적으로 만들어보세요!

    반응형