JavaScript로 DOM 조작하기Language/JavaScript2023. 10. 12. 22:56
Table of Contents
DOM(Document Object Model)이란?
DOM은 웹 페이지를 구조화하여 프로그래밍 언어에서 다룰 수 있도록 제공되는 인터페이스입니다. 이는 문서의 구조를 계층적 트리 형태로 표현하며, 각 요소는 노드(node)로 구성됩니다.
주요 개념
- 노드(Node): DOM은 노드들의 계층 구조로 이루어집니다. 대표적인 노드에는 다음이 포함됩니다.
Document노드: 전체 문서를 대표하는 최상위 노드Element노드: HTML 요소를 나타냄Text노드: 요소의 텍스트 내용을 나타냄
- DOM 트리: HTML 문서가 DOM으로 변환되면 각 요소는 트리 구조로 연결됩니다. 예를 들어, 아래 HTML 문서의 DOM 트리는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>DOM 트리:
htmlheadtitle
bodyh1
HTML 요소를 JavaScript로 조작하기
JavaScript는 DOM을 통해 HTML 요소를 동적으로 제어할 수 있습니다. 이를 통해 웹 페이지의 콘텐츠, 스타일, 구조를 변경할 수 있습니다.
DOM 접근
JavaScript에서 DOM 요소에 접근하려면 document 객체를 사용합니다.
주요 메서드
getElementById: 특정 ID를 가진 요소를 선택합니다.querySelector: CSS 선택자를 사용하여 첫 번째 일치 요소를 선택합니다.querySelectorAll: CSS 선택자를 사용하여 모든 일치 요소를 선택합니다.
코드 예시
// HTML
// <div id="app">
// <p class="greeting">안녕하세요!</p>
// </div>
// JavaScript
const appElement = document.getElementById('app');
const greetingElement = document.querySelector('.greeting');
// 내용 변경
greetingElement.textContent = 'Hello, World!';
// 스타일 변경
greetingElement.style.color = 'blue';DOM 요소 생성 및 삽입
createElement 메서드를 사용하여 새로운 요소를 생성하고, appendChild 또는 insertBefore를 사용하여 문서에 추가할 수 있습니다.
// 새로운 요소 생성
const newParagraph = document.createElement('p');
newParagraph.textContent = '새로운 문단입니다.';
// 기존 요소에 추가
const appElement = document.getElementById('app');
appElement.appendChild(newParagraph);이벤트(Event) 다루기
이벤트는 사용자가 웹 페이지와 상호작용할 때 발생합니다. JavaScript는 이벤트 리스너(Event Listener)를 통해 이벤트를 처리할 수 있습니다.
이벤트 리스너 추가
addEventListener 메서드를 사용하여 요소에 이벤트를 연결할 수 있습니다.
코드 예시: 클릭 이벤트
const button = document.querySelector('.my-button');
button.addEventListener('click', () => {
alert('버튼이 클릭되었습니다!');
});주요 이벤트 유형
- 마우스 이벤트:
click: 요소가 클릭될 때 발생dblclick: 요소가 더블 클릭될 때 발생mouseover: 마우스가 요소 위로 올려질 때 발생mouseout: 마우스가 요소에서 벗어날 때 발생
- 키보드 이벤트:
keydown: 키가 눌렸을 때 발생keyup: 키가 떼졌을 때 발생
- 입력 및 폼 이벤트:
input: 사용자가 입력 필드의 내용을 변경할 때 발생submit: 폼이 제출될 때 발생
코드 예시: 입력 필드 이벤트
const inputField = document.querySelector('.name-input');
inputField.addEventListener('input', (event) => {
console.log(`입력된 값: ${event.target.value}`);
});이벤트 전파와 중지
이벤트 전파는 이벤트가 DOM 트리의 계층 구조를 따라 전달되는 방식입니다. 이는 캡처링 단계와 버블링 단계로 나뉩니다.
이벤트 전파 단계
- 캡처링(Capturing): 최상위 요소에서 시작하여 이벤트가 발생한 요소까지 내려감.
- 버블링(Bubbling): 이벤트가 발생한 요소에서 최상위 요소로 다시 올라감.
이벤트 중지
stopPropagation 메서드를 사용하여 이벤트 전파를 중지할 수 있습니다.
코드 예시
const outerDiv = document.querySelector('.outer');
const innerDiv = document.querySelector('.inner');
outerDiv.addEventListener('click', () => {
console.log('Outer Div 클릭됨');
});
innerDiv.addEventListener('click', (event) => {
event.stopPropagation(); // 이벤트 전파 중지
console.log('Inner Div 클릭됨');
});위 코드에서 innerDiv를 클릭하면 outerDiv의 이벤트는 실행되지 않습니다.
'Language > JavaScript' 카테고리의 다른 글
| JavaScript의 클로저(Closure) (0) | 2023.10.13 |
|---|---|
| JavaScript에서 비동기 처리하기 (0) | 2023.10.13 |
| javascript 객체(Object)와 배열(Array) (0) | 2023.10.12 |
| Javascript의 반복문과 함수 (0) | 2023.10.12 |
| JavaScript 기본 문법 (0) | 2023.10.12 |
