7회차 .js

정상희·2025년 3월 27일

코딩공부

목록 보기

17/60

현재 오즈코딩스쿨 강의를 통해 프론트엔드를 학습하고 있습니다.
본 포스트는 해당 강의에 대한 내용 정리를 목적으로 합니다.

1. DOM

DOM(Document Object Model)이란?
DOM(문서 객체 모델) 은 웹 페이지(HTML 문서)를 브라우저가 이해할 수 있도록 객체로 변환한 구조다. HTML 문서를 자바스크립트로 조작할 수 있도록 만든 모델.

1)DOM의 역할

웹 페이지가 로드되면, 브라우저는 HTML 문서를 트리 구조(Tree Structure)로 변환.
이 구조를 이용하면 자바스크립트로 HTML 요소를 추가, 변경, 삭제할 수 있다.

✔ HTML 코드

<!DOCTYPE html>
<html>
<head>
    <title>DOM 예제</title>
</head>
<body>
    <h1 id="title">Hello, DOM!</h1>
    <p class="desc">이 문장은 JavaScript로 변경할 수 있습니다.</p>
</body>
</html>

✔ 브라우저가 생성한 DOM 구조

document
 ├── html
 │    ├── head
 │    │    ├── title (DOM 예제)
 │    ├── body
 │         ├── h1#title (Hello, DOM!)
 │         ├── p.desc (이 문장은 JavaScript로 변경할 수 있습니다.)

2) DOM을 조작하는 방법 (JavaScript)

a. 요소 선택하기

자바스크립트에서는 document 객체를 사용해 HTML 요소를 가져올 수 있다.

// ID로 요소 선택
let title = document.getElementById("title");

// 클래스명으로 요소 선택 (배열처럼 여러 개를 가져옴)
let paragraphs = document.getElementsByClassName("desc");

// 태그명으로 요소 선택
let allParagraphs = document.getElementsByTagName("p");

// CSS 선택자 사용 (첫 번째 요소)
let firstParagraph = document.querySelector(".desc");

// CSS 선택자 사용 (모든 요소)
let allDesc = document.querySelectorAll(".desc");

b. 요소 내용 변경하기 (innerText, innerHTML, textContent)

let title = document.getElementById("title");
title.innerText = "Hello, JavaScript!"; // 텍스트 변경

✔ innerText: 화면에 보이는 텍스트만 변경
✔ textContent: 숨겨진 텍스트까지 포함해 변경
✔ innerHTML: HTML 태그까지 포함해서 변경 가능

let paragraph = document.querySelector(".desc");
paragraph.innerHTML = "<strong>이 문장은 변경되었습니다!</strong>";

c. 요소 속성 변경 (setAttribute, getAttribute)

let title = document.getElementById("title");

// ID 확인
console.log(title.getAttribute("id")); // title

// 클래스 추가
title.setAttribute("class", "highlight");

// 스타일 변경
title.style.color = "blue";
title.style.fontSize = "24px";

d. 요소 추가 및 삭제 (createElement, appendChild, remove)

📌 새로운 요소 추가

// 새로운 <p> 태그 생성
let newParagraph = document.createElement("p");
newParagraph.innerText = "새로운 문장이 추가되었습니다!";

// body에 추가
document.body.appendChild(newParagraph);

📌 요소 삭제

let title = document.getElementById("title");
title.remove(); // <h1> 요소 삭제

3) DOM 이벤트 다루기

DOM을 사용하면 버튼 클릭, 키보드 입력, 마우스 이동 등의 이벤트도 다룰 수 있다.

// 버튼 클릭 이벤트 추가
let button = document.createElement("button");
button.innerText = "클릭하세요";
document.body.appendChild(button);

button.addEventListener("click", function () {
    alert("버튼이 클릭되었습니다!");
});