728x90
반응형
SMALL
1. 문서 객체 모델(DOM)의 기본 용어와 개념
1.1 DOM이란?
- Document Object Model (DOM): HTML 문서를 **객체(트리 구조)**로 변환하여 JavaScript에서 조작할 수 있도록 제공하는 인터페이스
- HTML 문서를 프로그래밍적으로 변경할 수 있도록 해줌
✅ DOM 트리 구조 예시
<!DOCTYPE html>
<html>
<head>
<title>문서 객체 모델</title>
</head>
<body>
<h1>Header</h1>
<p>문서 내용입니다.</p>
</body>
</html>
위 HTML 코드는 트리 형태의 구조로 변환
document (최상위 객체)
├── html
│ ├── head
│ │ └── title
│ ├── body
│ ├── h1
│ └── p
1.2 DOM 노드 (Node)
- DOM에서 요소를 노드(Node)라고 부름.
| 노드 유형 | 설명 | 예시 |
| 요소 노드 (Element) | HTML 태그 요소 | `<h1>`, `<p>` |
| 텍스트 노드 (Text) | 요소 내부의 텍스트 | `"문서 내용입니다."` |
| 속성 노드 (Attribute) | 태그의 속성 | `id="header"` |
✅ `document.nodeType`을 활용해 특정 노드의 종류 확인 가능
console.log(document.body.nodeType); // 1 (요소 노드)
console.log(document.body.firstChild.nodeType); // 3 (텍스트 노드)
✅ 핵심 요점 정리
| 항목 | 설명 |
| DOM | HTML 문서를 객체로 변환한 인터페이스 |
| DOM 트리 | HTML 문서가 계층적인 트리 구조로 변환됨 |
| 노드 종류 | 요소 노드, 텍스트 노드, 속성 노드 |
2. 문서 객체 선택
| 구분 | 메서드 | 설명 |
| 1개 선택 | document.getElementById(아이디) | 아이디로 1개 선택 |
| document.querySelector(선택자) | 선택자로 1개 선택 | |
| 여러 개 선택 | document.getElementsByName(이름) | name 속성으로 여러 개 선택 |
| document.getElementsClassName(클래스) | class 속성으로 여러 개 선택 | |
| document.querySelectorAll(선택자) | 선택자로 여러 개 선택 |
2.1 `getElementById()` (ID로 요소 선택)
let header = document.getElementById('header');
header.style.color = 'orange';
header.innerHTML = 'From JavaScript';
2.2 `querySelector()` (CSS 선택자로 요소 선택)
let header = document.querySelector('h1'); // 첫 번째 h1 요소 선택
header.style.background = 'red';
2.3 `querySelectorAll()` (여러 요소 선택)
let headers = document.querySelectorAll('h1');
headers.forEach(header => header.style.color = 'blue');
✅ `querySelectorAll()`은 NodeList를 반환하며, `forEach()` 사용 가능.
✅ 핵심 요점 정리
| 항목 | 설명 |
| `getElementById()` | ID로 특정 요소 선택 |
| `querySelector()` | CSS 선택자로 요소 선택 |
| `querySelectorAll()` | 여러 개의 요소 선택 가능 (NodeList 반환) |
3. 문서 객체 조작
- `textContent` : 문서 객체 내부 글자를 순수 텍스트 형식으로 가져오도록 변경
- `innerHTML` : 문서 객체 내부 글자의 HTML 태그를 반영해 가져오도록 변경
3.1 내부 텍스트 변경 (`textContent`, `innerHTML`)
document.getElementById("header").textContent = "변경된 제목";
document.getElementById("header").innerHTML = "<b>HTML 코드 포함</b>";
✅ `innerHTML`은 보안 문제로 인해 직접적인 사용자 입력값 적용 시 주의 필요.
3.2 스타일 변경 (`style` 속성)
document.getElementById("header").style.color = "red";
document.getElementById("header").style.backgroundColor = "yellow";
3.3 속성 변경 (`setAttribute`, `getAttribute`)
let image = document.getElementById("image");
image.setAttribute("src", "https://via.placeholder.com/150");
console.log(image.getAttribute("src")); // 현재 이미지 URL 출력
✅ `removeAttribute()`를 사용하면 속성을 제거할 수 있음.
✅ 핵심 요점 정리
| 항목 | 설명 |
| `textContent` | 요소 내부 텍스트 변경 |
| `innerHTML` | HTML 포함하여 변경 가능 (보안 문제 주의) |
| `style` | 요소 스타일 변경 |
| `setAttribute()` | 요소 속성 추가/변경 |
4. 이벤트
4.1 이벤트란?
- 사용자의 행동(클릭, 입력 등)에 반응하여 실행되는 코드.
✅ 대표적인 이벤트
| 이벤트 | 설명 |
| `click` | 클릭 이벤트 |
| `mouseover` | 마우스 올리기 |
| `keydown` | 키보드 입력 감지 |
4.2 이벤트 연결 방식
| 구분 | 종류 |
| DOM 레벨 0 | - 인라인 이벤트 모델 - 고전 이벤트 모델 |
| DOM 레벨 2 | - 마이크로소프트 인터넷 익스플로러 이벤트 모델 - 표준 이벤트 모델 |
(1) 인라인 이벤트 (비추천)
<button onclick="alert('버튼 클릭')">버튼</button>
(2) 고전 이벤트 모델 (`onclick`)
let button = document.getElementById("btn");
button.onclick = function () {
alert("버튼 클릭");
};
(3) 표준 이벤트 모델 (`addEventListener`) ✅ 추천 방식
let button = document.getElementById("btn");
button.addEventListener("click", function () {
alert("버튼 클릭");
});
✅ 추가 학습
- `event.preventDefault()` → 기본 이벤트 차단
- `event.stopPropagation()` → 이벤트 전파 중지
✅ 핵심 요점 정리
| 항목 | 설명 |
| 이벤트 종류 | `click`, `mouseover`, `keydown` 등 |
| 이벤트 연결 방식 | `onclick`, `addEventListener()` |
| 이벤트 차단 | `event.preventDefault()` |
📎 참고자료
- MDN 문서 객체 모델 (DOM)
- 자바스크립트 이벤트 핸들링
- HTML5 웹 프로그래밍 입문 4판 (김성윤 저, 한빛미디어)
728x90
반응형
LIST