DOM (Document Object Model): 웹 페이지의 구조와 상호작용을 위한 모든 것

프로그래밍/Javascript

DOM (Document Object Model): 웹 페이지의 구조와 상호작용을 위한 모든 것

shimdh 2025. 2. 11. 09:56

728x90

1. DOM의 개념: 웹 페이지의 구조를 이해하다

DOM은 웹 페이지의 구조를 표현하는 프로그래밍 인터페이스입니다. HTML이나 XML 문서의 각 요소(element)를 객체 형태로 관리하며, 웹 페이지의 모든 구성 요소(텍스트, 이미지, 링크 등)는 DOM을 통해 접근하고 조작할 수 있습니다.

1.1. 계층적 구조: 트리 구조로 표현되는 DOM

DOM은 트리 구조로 이루어져 있습니다. 각 노드(node)는 문서 내의 요소를 나타냅니다. 예를 들어, <html> 태그는 루트 노드(root node)가 되며, 그 아래에 <head>와 <body> 같은 자식 노드(child node)가 위치합니다. 이러한 계층 구조는 웹 페이지의 구조를 명확하게 보여줍니다.

예제:

html
└── head
│   ├── title
│   └── meta
└── body
    ├── h1
    ├── p
    └── ul
        ├── li
        └── li

위 예시는 HTML 문서의 기본적인 구조를 DOM 트리로 표현한 것입니다. html이 루트 노드이고, head와 body가 자식 노드입니다. head 아래에는 title과 meta가, body 아래에는 h1, p, ul이 각각 자식 노드로 위치합니다. ul 아래에는 두 개의 li가 있습니다.

1.2. 객체 모델: HTML 요소를 객체로 다루다

DOM에서 모든 HTML 요소는 JavaScript에서 객체로 표현됩니다. 이를 통해 JavaScript 코드로 페이지의 내용을 직접 수정하거나 이벤트를 처리할 수 있습니다. 각 객체는 해당 요소의 속성(attribute)과 메서드(method)를 가지고 있어, 이를 통해 요소의 상태를 변경하거나 동작을 제어할 수 있습니다.

예제:

<img id="myImage" src="image.jpg" alt="이미지">

// 이미지 요소 선택
const myImage = document.getElementById("myImage");

// 이미지의 src 속성 변경
myImage.src = "newImage.jpg";

// 이미지의 alt 속성 변경
myImage.alt = "새로운 이미지";

위 예시는 id가 myImage인 이미지 요소의 src와 alt 속성을 변경하는 JavaScript 코드입니다. 이처럼 DOM을 통해 HTML 요소의 속성을 쉽게 조작할 수 있습니다.

2. DOM과 JavaScript의 결합: 웹 페이지에 생명을 불어넣다

JavaScript는 DOM을 사용하여 웹 페이지와 상호작용합니다. 이를 통해 웹 페이지의 내용을 동적으로 변경하고, 사용자의 행동에 반응하는 등 다양한 기능을 구현할 수 있습니다.

2.1. 요소 선택: 원하는 요소를 찾아내다

JavaScript에서 특정 HTML 요소에 접근하려면, 먼저 해당 요소를 선택해야 합니다. DOM은 이를 위한 다양한 메서드를 제공합니다.

document.getElementById(): ID 속성을 기준으로 요소를 선택합니다.

// id가 "myElement"인 요소 선택
const element = document.getElementById("myElement"); 

// id가 "uniqueButton"인 버튼 요소 선택
const myButton = document.getElementById("uniqueButton");

document.getElementsByClassName(): 클래스 이름을 기준으로 요소들을 선택합니다.

// class가 "myClass"인 요소들을 모두 선택
const elements = document.getElementsByClassName("myClass");

// class가 "highlight"인 요소들을 모두 선택
const highlightedElements = document.getElementsByClassName("highlight");

document.querySelector(): CSS 선택자를 사용하여 요소를 선택합니다. 가장 첫 번째로 일치하는 요소만 반환합니다.

// class가 "myClass"인 요소 중 첫 번째 요소 선택
const element = document.querySelector(".myClass"); 

// id가 "mainHeading"인 h1 요소 선택
const mainHeading = document.querySelector("#mainHeading");

document.querySelectorAll(): CSS 선택자를 사용하여 요소들을 선택합니다. 일치하는 모든 요소를 NodeList 형태로 반환합니다.

// 모든 <p> 태그 요소들을 선택
const paragraphs = document.querySelectorAll("p");

// class가 "item"인 모든 li 요소들을 선택
const listItems = document.querySelectorAll(".item");

2.2. 속성 및 내용 변경: 요소의 모습과 내용을 수정하다

선택한 요소의 속성을 변경하거나 내용을 업데이트할 수 있습니다.

element.textContent: 요소의 텍스트 내용을 변경합니다.

// id가 "myElement"인 요소의 텍스트 내용을 "안녕하세요!"로 변경
const element = document.getElementById("myElement");
element.textContent = "안녕하세요!"; 

// id가 "subtitle"인 요소의 텍스트 내용을 "새로운 부제목"으로 변경
const subtitle = document.getElementById("subtitle");
subtitle.textContent = "새로운 부제목";

element.innerHTML: 요소의 HTML 내용을 변경합니다.

// id가 "myElement"인 요소의 HTML 내용을 <strong>새로운 내용</strong>으로 변경
const element = document.getElementById("myElement");
element.innerHTML = "<strong>새로운 내용</strong>";

// id가 "contentArea"인 요소의 HTML 내용을 <p>단락 내용</p>으로 변경
const contentArea = document.getElementById("contentArea");
contentArea.innerHTML = "<p>단락 내용</p>";

element.style: 요소의 CSS 스타일 속성을 변경합니다.

// id가 "myElement"인 요소의 글자 색상을 빨간색으로 변경
const element = document.getElementById("myElement");
element.style.color = "red"; 

// id가 "myBox"인 요소의 너비를 200px, 높이를 100px로 변경
const myBox = document.getElementById("myBox");
myBox.style.width = "200px";
myBox.style.height = "100px";

2.3. 이벤트 처리: 사용자의 행동에 반응하다

사용자의 행동(클릭, 키 입력 등)에 반응하도록 이벤트를 처리할 수 있습니다.

// id가 "myButton"인 요소에 클릭 이벤트 리스너 추가
const button = document.getElementById("myButton");
button.addEventListener('click', function() {
    alert("요소가 클릭되었습니다!");
});

// id가 "myLink"인 링크에 마우스 오버 이벤트 리스너 추가
const myLink = document.getElementById("myLink");
myLink.addEventListener('mouseover', function() {
    myLink.style.color = "blue"; // 링크 색상을 파란색으로 변경
});

// id가 "myInput"인 입력 필드에 포커스 이벤트 리스너 추가
const myInput = document.getElementById("myInput");
myInput.addEventListener('focus', function() {
    myInput.style.backgroundColor = "lightyellow"; // 배경색을 연한 노란색으로 변경
});

위 코드는 버튼 클릭 시 알림 메시지를 표시하고, 링크에 마우스를 올리면 링크 색상을 변경하고, 입력 필드에 포커스되면 배경색을 변경하는 예제입니다.

3. DOM 조작: 웹 페이지를 동적으로 구성하다

DOM 조작은 JavaScript를 통해 HTML 요소를 추가, 제거, 수정하는 과정을 말합니다. 이를 통해 사용자 인터페이스(UI)를 동적으로 업데이트하고, 사용자에게 더욱 풍부한 경험을 제공할 수 있습니다.

3.1. 새로운 요소 생성 및 추가: 동적으로 요소를 만들다

새로운 HTML 요소를 생성하고 기존 문서에 추가할 수 있습니다.

// 새로운 <p> 태그 생성
const newParagraph = document.createElement("p");

// <p> 태그에 텍스트 내용 추가
newParagraph.textContent = "안녕하세요!";

// body 요소에 <p> 태그 추가
document.body.appendChild(newParagraph);

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

// <div> 요소에 텍스트 내용 추가
newDiv.textContent = "새로운 div 요소입니다.";

// id가 "container"인 요소에 <div> 요소 추가
const container = document.getElementById("container");
if (container) {
    container.appendChild(newDiv);
}

위 코드는 새로운 <p> 태그와 <div> 요소를 생성하고, 텍스트 내용을 추가한 후, 각각 body 요소와 id가 "container"인 요소의 자식 요소로 추가하는 예제입니다.

3.2. 기존 요소 제거: 불필요한 요소를 삭제하다

더 이상 필요하지 않은 요소를 제거할 수 있습니다.

// id가 "removeMe"인 요소 선택
const toRemoveElement = document.getElementById("removeMe");

// 해당 요소의 부모 노드에서 해당 요소를 제거
if (toRemoveElement) {
    toRemoveElement.parentNode.removeChild(toRemoveElement);
}

// class가 "oldItem"인 모든 요소 선택
const oldItems = document.querySelectorAll(".oldItem");

// 각 요소를 순회하며 제거
oldItems.forEach(function(item) {
    item.parentNode.removeChild(item);
});

위 코드는 id가 "removeMe"인 요소와 class가 "oldItem"인 모든 요소를 선택하고, 해당 요소의 부모 노드에서 해당 요소들을 제거하는 예제입니다.

4. 이벤트 처리: 사용자와의 상호작용을 구현하다

DOM을 활용한 이벤트 처리는 웹 페이지와 사용자 간의 상호작용을 가능하게 하는 핵심 기술입니다. 사용자의 행동(마우스 클릭, 키보드 입력 등)이나 브라우저의 동작(페이지 로드, 창 크기 변경 등)에 따라 특정 코드를 실행하여 동적인 웹 페이지를 만들 수 있습니다.

4.1. 이벤트의 이해: 사용자와 브라우저의 행동을 감지하다

이벤트는 사용자의 행동이나 브라우저의 동작으로 발생하는 일련의 사건들을 말합니다. 예를 들어, 사용자가 버튼을 클릭하거나 마우스를 움직이는 것, 키보드를 입력하는 것, 웹 페이지가 로드되는 것 등이 모두 이벤트에 해당합니다.

4.2. 이벤트 리스너: 이벤트를 감지하고 처리하다

이벤트 처리는 특정 이벤트가 발생했을 때 실행되는 함수를 정의하는 것입니다. 이를 위해 이벤트 리스너(Event Listener) 라는 개념을 사용합니다. 이벤트 리스너는 특정 요소에 대해 어떤 종류의 이벤트(예: click, mouseover, keyup 등)를 감지하고, 해당 이벤트가 발생할 때 지정된 함수를 호출합니다.

4.3. 다양한 이벤트 유형: 상황에 맞는 이벤트를 활용하다

JavaScript에서는 다양한 종류의 이벤트를 다룰 수 있습니다.

마우스 이벤트 (Mouse Events): click, dblclick, mouseover, mouseout, mousedown, mouseup, mousemove 등
키보드 이벤트 (Keyboard Events): keydown, keyup, keypress 등
폼 이벤트 (Form Events): submit, change, focus, blur 등
윈도우 이벤트 (Window Events): load, resize, scroll 등

4.4. 실습 예제: 사용자 입력을 실시간으로 반영하다

키보드 입력 감지 예제:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>키보드 입력 감지하기</title>
</head>
<body>

<input type="text" id="inputField" placeholder="여기에 입력하세요!">
<p id="output"></p>

<script>
    // 입력 필드와 출력 영역 요소 선택
    const inputField = document.getElementById('inputField');
    const output = document.getElementById('output');

    // 키보드 입력 이벤트(keyup) 리스너 추가
    inputField.addEventListener('keyup', function() {
        // 입력 필드의 값을 가져와 출력 영역에 표시
        output.textContent = '입력한 내용: ' + inputField.value;
    });
</script>

</body>
</html>

이 예제에서는 keyup 이벤트를 사용하여 텍스트 박스에 입력된 내용을 실시간으로 화면에 표시합니다. 사용자가 키보드에서 손을 뗄 때마다 keyup 이벤트가 발생하고, 이벤트 리스너에 등록된 함수가 실행되어 입력 필드의 값을 가져와 출력 영역에 표시합니다.

마우스 이벤트 활용 예제:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>마우스 이벤트 활용하기</title>
    <style>
        #myBox {
            width: 100px;
            height: 100px;
            background-color: red;
            cursor: pointer; /* 마우스 커서를 손가락 모양으로 변경 */
        }
    </style>
</head>
<body>

<div id="myBox"></div>

<script>
    // 박스 요소 선택
    const myBox = document.getElementById('myBox');

    // 마우스 오버 이벤트 리스너 추가
    myBox.addEventListener('mouseover', function() {
        myBox.style.backgroundColor = "blue"; // 배경색을 파란색으로 변경
    });

    // 마우스 아웃 이벤트 리스너 추가
    myBox.addEventListener('mouseout', function() {
        myBox.style.backgroundColor = "red"; // 배경색을 원래대로 빨간색으로 변경
    });

    // 마우스 클릭 이벤트 리스너 추가
    myBox.addEventListener('click', function() {
        alert("박스가 클릭되었습니다!");
    });
</script>

</body>
</html>

이 예제에서는 mouseover, mouseout, click 이벤트를 사용하여 마우스가 박스 위에 올라가거나 벗어날 때, 그리고 클릭될 때 박스의 배경색을 변경하고 알림 메시지를 표시합니다.

5. 결론: DOM, 웹 개발의 필수 요소

DOM은 웹 문서를 프로그램적으로 조작 가능하게 해주는 핵심 기술입니다. 이를 통해 개발자는 HTML 콘텐츠를 동적으로 업데이트하고 사용자와 상호작용하며 보다 풍부한 경험을 제공할 수 있습니다. DOM의 개념을 이해하고 JavaScript를 통해 DOM을 조작하고 이벤트를 처리하는 방법을 익히는 것은 동적인 웹 페이지를 만들기 위한 필수적인 과정입니다.

728x90

'프로그래밍 > Javascript' 카테고리의 다른 글

자바스크립트 모듈 완벽 가이드: 개념, 사용법, 그리고 실전 활용 (0)	2025.02.11
자바스크립트 비동기 처리: 콜백에서 async/await까지 정복하기 (0)	2025.02.11
자바스크립트 배열 정복: 개념부터 다차원 배열, 유용한 메소드까지 총정리! (0)	2025.02.10
자바스크립트 함수 완전 정복: 표현식, 클로저, 콜백까지 파헤치기 (0)	2025.02.10
자바스크립트 객체의 모든 것: 기초부터 활용까지 (0)	2025.02.10

현재글DOM (Document Object Model): 웹 페이지의 구조와 상호작용을 위한 모든 것

shimdh 님의 블로그

shimdh 님의 블로그 입니다.

250x250

javascript, ASP.NET, jquery, ASP, sql, advanced_nest.js, c++, intermediate_nest.js, python, auto_hotkey, HTTP, node.js, intro_typescript, intro_nest.js, sql_server, tcp, udp,

Today :
Yesterday :

일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

shimdh 님의 블로그