웹 개발에서 DOM(Document Object Model)은 매우 중요한 개념입니다. DOM은 HTML이나 XML 문서의 구조를 정의하며, JavaScript와 같은 프로그래밍 언어가 이 구조와 상호작용하고, 이를 조작할 수 있도록 합니다. DOM을 이해하고 활용하면 웹 페이지의 요소들을 자유자재로 조작할 수 있게 되어, 보다 동적이고 사용자 친화적인 웹 애플리케이션을 개발할 수 있습니다.
DOM이란 무엇인가?
DOM은 HTML 및 XML 문서를 트리 구조로 표현하는 인터페이스입니다. DOM을 통해 프로그래밍 언어는 문서의 내용과 구조를 조작할 수 있습니다. 예를 들어, JavaScript를 사용하여 페이지에 새로운 요소를 추가하거나, 특정 요소의 텍스트를 변경하거나, 사용자의 마우스 클릭이나 키보드 입력에 반응하도록 할 수 있습니다.
DOM의 작동 원리
웹 페이지가 로드되면, 브라우저는 해당 페이지의 DOM을 생성합니다. DOM은 HTML 코드를 트리 구조로 변환하여 각 노드가 특정 HTML 요소를 나타내도록 합니다. 이 트리 구조의 루트는 document 객체이며, 각 노드는 문서의 각 요소(예: 문단, 이미지, 헤더, 링크 등)를 나타냅니다.
예를 들어, 아래와 같은 간단한 HTML 코드가 있다고 가정해 봅시다.
<html>
<head>
<title> DOM 블로그 </title>
</head>
<body>
<button> 블로그 읽기 </button>
</body>
</html>위 코드가 DOM으로 변환되면, 아래와 같은 트리 구조가 만들어집니다.
document
│
├── html
│ ├── head
│ │ └── title
│ └── body
│ └── button
이러한 트리 구조 덕분에 DOM을 쉽게 조작할 수 있습니다.
DOM의 구성 요소: 노드와 엘리먼트
DOM의 각 요소는 노드(node)와 엘리먼트(element)로 구성됩니다. 노드는 트리의 각 가지를 나타내며, 엘리먼트는 HTML 태그와 연결된 노드입니다. 각 노드에는 속성(properties)과 메서드(methods)가 있으며, 이를 통해 해당 노드를 조작할 수 있습니다.
속성(Properties)
속성은 노드 또는 요소의 특성 값을 나타냅니다. 예를 들어, 특정 HTML 요소의 텍스트 내용을 변경하고 싶다면, 해당 요소의 innerHTML 속성을 사용할 수 있습니다.
<h1 id="blog-head">DOM에 대한 블로그입니다</h1>위와 같은 HTML이 있을 때, JavaScript를 사용하여 텍스트를 변경해 보겠습니다.
var heading = document.getElementById('blog-head');
heading.innerHTML = '읽고, 배우고, 피드백을 남겨주세요!';위 코드를 통해 innerHTML 속성을 이용해 HTML을 직접 수정하지 않고도 헤딩의 텍스트를 변경할 수 있습니다.
메서드(Methods)
메서드는 노드나 요소에서 실행할 수 있는 함수와 유사한 동작을 정의합니다. 예를 들어, 버튼을 클릭할 때 경고 메시지를 표시하고 싶다면, addEventListener() 메서드를 사용할 수 있습니다.
<button id="my-button">DOM 블로그 읽기</button>
이제 JavaScript를 사용하여 버튼 클릭 시 경고 메시지를 띄워봅시다.
var button = document.getElementById('my-button');
button.addEventListener('click', function() {
alert('DOM 블로그 읽기 버튼을 클릭했습니다!');
});addEventListener() 메서드는 이벤트 리스너를 추가하여 특정 이벤트(예: 클릭)가 발생할 때 실행될 함수를 정의할 수 있게 해줍니다.
DOM 셀렉터: 요소 선택하기
DOM에서 특정 요소를 선택하려면 셀렉터(selector)를 사용해야 합니다. 다양한 셀렉터를 사용하여 특정 요소를 선택하고 조작할 수 있습니다.
1) 태그 이름으로 선택하기: getElementsByTagName()
이 셀렉터는 태그 이름으로 요소를 선택합니다. 예를 들어, 아래 HTML에서 모든 li 요소를 선택할 수 있습니다.
<ul id="title">
<li class="item">하나</li>
<li class="item">둘</li>
<li class="item">셋</li>
</ul>var items = document.getElementsByTagName("li");이 코드는 모든 li 요소를 배열 형태로 반환합니다. 각 요소의 스타일을 변경하려면 아래와 같이 할 수 있습니다.
items[0].style.color = "Red";
items[1].style.color = "Blue";
items[2].style.color = "Green";2) 클래스 이름으로 선택하기: getElementsByClassName()
이 셀렉터는 특정 클래스 이름을 가진 모든 요소를 선택합니다.
<ul id="title">
<li class="item">하나</li>
<li class="item">둘</li>
<li class="item">셋</li>
</ul>
<button class="btn">블로그 읽기</button>
var buttons = document.getElementsByClassName("btn");
buttons[0].textContent = "블로그를 읽고 있습니다";이 코드는 btn 클래스를 가진 버튼의 텍스트 내용을 변경합니다.
3) ID로 선택하기: getElementById()
이 셀렉터는 특정 ID를 가진 요소를 선택합니다. ID는 문서 내에서 유일해야 하므로, 하나의 요소만 반환합니다.
<ul id="title">
<li class="item">하나</li>
<li class="item">둘</li>
<li class="item">셋</li>
</ul>
<button id="my-button">블로그 읽기</button>
var title = document.getElementById("title");
title.style.color = "red";이 코드는 title ID를 가진 요소의 색상을 빨간색으로 변경합니다.
4) 쿼리 셀렉터: querySelector()
쿼리 셀렉터는 태그 이름, 클래스, 또는 ID를 사용하여 요소를 선택할 수 있는 가장 유연한 방법입니다.
<h1 class="header" id="first-head">더 많은 정보를 원하시면 팔로우하세요</h1>
document.querySelector("h1").style.color = "red"; // 태그 이름으로 선택
document.querySelector("#first-head").style.color = "blue"; // ID로 선택
document.querySelector(".header").style.color = "green"; // 클래스로 선택이 방법을 사용하면 HTML 요소를 다양한 방식으로 선택하고 조작할 수 있습니다.
결론
DOM은 웹 페이지를 조작하고, 동적인 사용자 경험을 제공하는 데 있어 필수적인 도구입니다. DOM을 이해하고, 이를 활용하여 HTML 요소를 선택하고 조작하는 방법을 익히면, 웹 개발자로서의 역량을 크게 향상시킬 수 있습니다. 이 블로그에서는 DOM의 기본 개념과 다양한 셀렉터, 속성 및 메서드를 사용하여 웹 페이지를 조작하는 방법을 설명했습니다. 이를 통해 더 나은 사용자 경험을 제공하는 동적 웹 애플리케이션을 개발할 수 있을 것입니다.
'SW > JavaScript' 카테고리의 다른 글
| 패키지.json의 이해 II: 스크립트 활용법 (0) | 2024.11.09 |
|---|---|
| Oracle 데이터베이스에서 JavaScript를 사용하여 Cohere와 Hugging Face AI 호출하기 (0) | 2024.09.09 |
| 리액티브 데이터베이스 액세스: JVM에서의 혁신적 접근 (0) | 2024.09.03 |
| 자바스크립트에서의 Temporal Dead Zone (TDZ) 이해하기 (0) | 2024.08.12 |
| JavaScript의 얕은 복사와 깊은 복사: 차이점과 활용 방법 (0) | 2024.08.06 |