9. DOM (Document Object Model)
- HTML 문서의 요소를 효과적으로 다루기 위해 모든 요소를 트리 구조로 표현한 모델을 DOM(Document Object Model) 이라고 한다.
- JavaScript는 이 DOM을 활용해 HTML 문서의 내용을 조작할 수 있다.
DOM의 개념
- HTML 문서를 트리 형태로 구조화하여 태그, 속성, 텍스트를 객체처럼 다룰 수 있게 만든 구조이다.
- 최상위 노드는
document객체이다. - DOM을 통해 HTML 요소에 접근, 수정, 삭제, 생성 가능하다.
HTML 문서 읽는 순서
DOM 요소 접근 방법
JavaScript에서 DOM 요소에 접근하는 방법은 여러 가지가 있다.
1) 요소 자체에 접근
let h1 = document.getElementById("text");
console.log(h1);2) 요소의 텍스트만 접근 (innerText)
let span = document.getElementById("number").innerText;
console.log("innerText:", span);3) HTML 구조 전체 접근 (innerHTML)
let spanHtml = document.getElementById("number").innerHTML;
console.log("innerHTML:", spanHtml);
innerText는 태그를 무시하고 순수 텍스트만,
innerHTML은 HTML 태그 구조까지 포함하여 인식한다.
4) 요소의 텍스트 수정
document.getElementById("text").innerText = "변경된 텍스트입니다.";주의사항
document.getElementById("text").innerText = "<a href='#'>JS로 변경한 텍스트입니다.</a>";
// 출력: <a href='#'>JS로 변경한 텍스트입니다.</a>
document.getElementById("text").innerHTML = "<a href='#'>JS로 변경한 텍스트입니다.</a>";
// 출력: JS로 변경한 텍스트입니다. (링크 포함)innerText: HTML 태그 인식 ❌ (문자 그대로 출력)innerHTML: HTML 구조로 렌더링됨 (태그까지 포함)
DOM 접근 요약
| 접근 방식 | 설명 | 특징 |
|---|---|---|
innerText | 요소 안의 텍스트에 접근 | 태그 무시 |
innerHTML | 요소 안의 HTML 전체 접근 | 태그 인식 |
getElementById | 특정 id의 요소 객체에 접근 | 가장 많이 사용되는 접근 방식 |
10. 이벤트 연결
JavaScript에서 이벤트(event)란 사용자의 동작(클릭, 입력 등)에 반응하는 동작을 의미한다.
이벤트를 연결하는 방법에는 대표적으로 3가지가 있다.
10-1. 인라인 방식
- 태그 안에 직접
onclick등의 속성으로 함수를 연결 - 코드가 많아지면 유지보수가 어려워짐
const print = () => {
alert("함수가 실행되었습니다.");
}<button onclick="print()">알림창 출력</button>10-2. addEventListener 방식
- JS 코드로 HTML 요소에 이벤트를 연결
- 함수 호출 시
()생략 → 즉시 실행 방지
const print = () => {
alert("함수가 실행되었습니다.");
}
document.getElementById("btn2").addEventListener("click", print);<button id="btn2">분리된 이벤트 실행</button>10-3. 익명 함수 방식
- 함수 선언 없이 이벤트와 동시에 정의
- 해당 태그에서만 사용하는 이벤트에 적합
document.getElementById("btn3").addEventListener("click", () => {
alert("나만 쓰는 함수입니다.");
});<button id="btn3">오직 나만 쓰는 함수</button>전체 예시 코드
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이벤트 연결 예제</title>
</head>
<body>
<button id="btn1" onclick="print()">알림창 출력</button>
<button id="btn2">분리된 이벤트 실행</button>
<button id="btn3">오직 나만 쓰는 함수</button>
<script>
// 1. 인라인 방식
const print = () => {
alert("함수가 실행되었습니다.");
}
// 2. addEventListener 방식
document.getElementById("btn2").addEventListener("click", print);
// 3. 익명 함수 방식
document.getElementById("btn3").addEventListener("click", () => {
alert("나만 쓰는 함수입니다.");
});
</script>
</body>
</html>Tip!
- 이벤트 연결 시에는 반드시 함수가 먼저 선언된 후에 연결해야 한다.
- 이벤트명은 대소문자를 구분 (
click,keydown,mouseenter,submit등)한다. onclick,onchange같은 속성은 HTML 태그에서 직접 사용할 수 있다.
Data Scientist, interested in CV, NLP