▶ JavaScript Examples

JavaScript HTML DOM

JavaScript HTML DOM: 웹 페이지의 동적 조작

HTML DOM(Document Object Model)은 웹 페이지의 구조를 프로그래밍적으로 표현한 객체 모델입니다. JavaScript를 사용하면 이 DOM을 통해 HTML 요소를 선택하고 수정하며, 이벤트를 처리할 수 있습니다. 이 가이드는 JavaScript를 사용하여 HTML DOM을 조작하는 방법을 설명합니다.

1. DOM 소개

1.1. DOM 구조

DOM은 웹 페이지의 모든 요소(HTML 태그)를 객체로 표현하며, 이 객체들은 부모와 자식 관계를 형성하여 트리 구조를 이룹니다. 예를 들어, 다음과 같은 HTML이 있을 때:

<!DOCTYPE html>
<html>
<head>
    <title>Document Title</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is a paragraph.</p>
</body>
</html>

이 HTML의 DOM 구조는 다음과 같습니다:

Document
 └── html
     ├── head
     │   └── title
     └── body
         ├── h1
         └── p

2. DOM 요소 선택

JavaScript를 사용하여 DOM 요소를 선택하는 방법은 여러 가지가 있습니다. 가장 많이 사용하는 방법은 다음과 같습니다.

2.1. getElementById()

특정 ID를 가진 요소를 선택합니다.

const heading = document.getElementById('myHeading');

2.2. getElementsByClassName()

특정 클래스를 가진 모든 요소를 선택합니다. 이 메서드는 HTMLCollection을 반환합니다.

const paragraphs = document.getElementsByClassName('myClass');

2.3. getElementsByTagName()

특정 태그 이름을 가진 모든 요소를 선택합니다.

const listItems = document.getElementsByTagName('li');

2.4. querySelector()

CSS 선택자와 유사한 문법을 사용하여 첫 번째 요소를 선택합니다.

const firstParagraph = document.querySelector('p');

2.5. querySelectorAll()

CSS 선택자와 유사한 문법을 사용하여 모든 요소를 선택합니다. 이 메서드는 NodeList를 반환합니다.

const allParagraphs = document.querySelectorAll('p');

3. DOM 요소 조작

JavaScript를 사용하여 선택한 DOM 요소를 수정할 수 있습니다.

3.1. 텍스트 변경

textContent 속성을 사용하여 요소의 텍스트를 변경할 수 있습니다.

const heading = document.getElementById('myHeading');
heading.textContent = 'New Heading Text';

3.2. HTML 내용 변경

innerHTML 속성을 사용하여 요소의 HTML 내용을 변경할 수 있습니다.

const content = document.getElementById('content');
content.innerHTML = '<p>This is new content!</p>';

3.3. 스타일 변경

style 속성을 사용하여 요소의 CSS 스타일을 변경할 수 있습니다.

const paragraph = document.querySelector('p');
paragraph.style.color = 'blue'; // 텍스트 색상 변경
paragraph.style.fontSize = '20px'; // 폰트 크기 변경

3.4. 클래스 추가 및 제거

classList 속성을 사용하여 요소의 클래스 목록을 조작할 수 있습니다.

const element = document.getElementById('myElement');
element.classList.add('newClass'); // 클래스 추가
element.classList.remove('oldClass'); // 클래스 제거

4. DOM 요소 추가 및 삭제

JavaScript를 사용하여 DOM에 새로운 요소를 추가하거나 기존 요소를 삭제할 수 있습니다.

4.1. 요소 추가

createElement() 메서드를 사용하여 새로운 요소를 만들고, appendChild() 메서드를 사용하여 부모 요소에 추가할 수 있습니다.

const newParagraph = document.createElement('p'); // 새로운 <p> 요소 생성
newParagraph.textContent = 'This is a new paragraph.'; // 텍스트 추가
document.body.appendChild(newParagraph); // <body>에 추가

4.2. 요소 삭제

removeChild() 메서드를 사용하여 특정 요소를 삭제할 수 있습니다.

const paragraphToRemove = document.getElementById('removeMe');
document.body.removeChild(paragraphToRemove); // 삭제할 요소 제거

5. 이벤트 처리

JavaScript를 사용하여 DOM 요소에 이벤트를 처리할 수 있습니다.

5.1. 클릭 이벤트

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
    alert('Button was clicked!'); // 버튼 클릭 시 알림 표시
});

5.2. 마우스 이벤트

마우스 오버 및 아웃 이벤트를 처리할 수 있습니다.

const hoverElement = document.getElementById('hoverMe');
hoverElement.addEventListener('mouseover', function() {
    hoverElement.style.backgroundColor = 'yellow'; // 마우스 오버 시 배경색 변경
});

hoverElement.addEventListener('mouseout', function() {
    hoverElement.style.backgroundColor = ''; // 마우스 아웃 시 배경색 초기화
});

6. 전체 예제: JavaScript로 DOM 조작하기

아래는 JavaScript를 사용하여 DOM을 조작하는 전체 예제입니다.

6.1. HTML 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript DOM Example</title>
</head>
<body>
    <h1 id="myHeading">Hello, World!</h1>
    <button id="myButton">Click Me</button>
    <p id="removeMe">This paragraph will be removed.</p>
    <script src="script.js"></script>
</body>
</html>

6.2. JavaScript 코드 (script.js)

document.addEventListener('DOMContentLoaded', function() {
    const heading = document.getElementById('myHeading');
    heading.textContent = 'New Heading Text'; // 텍스트 변경

    const button = document.getElementById('myButton');
    button.addEventListener('click', function() {
        alert('Button was clicked!'); // 클릭 이벤트 처리

        const paragraphToRemove = document.getElementById('removeMe');
        document.body.removeChild(paragraphToRemove); // 요소 삭제
    });
});

7. 요약

JavaScript HTML DOM은 웹 페이지의 구조를 프로그래밍적으로 조작할 수 있는 강력한 도구입니다. JavaScript를 사용하여 HTML 요소를 선택하고, 수정하며, 이벤트를 처리할 수 있습니다.

DOM 요소 선택: getElementById(), querySelector() 등을 사용하여 요소 선택.
DOM 조작: textContent, innerHTML, style 속성을 사용하여 요소 수정.
요소 추가 및 삭제: createElement(), appendChild(), removeChild() 메서드를 사용하여 요소 관리.
이벤트 처리: addEventListener()를 사용하여 다양한 사용자 상호작용 처리.

JavaScript를 통해 더욱 동적이고 상호작용이 풍부한 웹 애플리케이션을 개발할 수 있습니다.

코딩 스쿨 JavaScript