DOM을 사용해서 할 수 있는 일들
1. 요소 찾기
특정 HTML 요소를 찾아서 가져올 수 있습니다.
- 예시: getElementById, querySelector
const title = document.getElementById("title"); // id가 "title"인 요소 찾기2. 내용 변경
HTML 요소 안의 텍스트나 내용을 변경할 수 있습니다.
- 예시: innerText, innerHTML
title.innerText = "내용을 바꿨어요!";
3. 요소 추가
새로운 HTML 요소를 만들어서 추가할 수 있습니다.
- 예시: createElement, appendChild
const newParagraph = document.createElement("p"); // <p> 태그 만들기
newParagraph.innerText = "새로 추가된 문단입니다!";
document.body.appendChild(newParagraph); // <body>에 추가
4. 요소 삭제
특정 요소를 삭제할 수 있습니다.
- 예시: remove()
title.remove(); // id가 "title"인 요소 삭제
5. 속성 수정
HTML 요소의 속성(예: class, style, src 등)을 수정할 수 있습니다.
- 예시: setAttribute, style
title.setAttribute("class", "highlight"); // class 속성 추가/변경
title.style.color = "blue"; // 글자 색상 변경예제 코드
아래 예제는 DOM을 사용해서 여러 작업을 수행합니다.
<!DOCTYPE html>
<html>
<body>
<h1 id="title">안녕하세요!</h1>
<script>
// 요소 찾기
const title = document.getElementById("title");
// 내용 변경
title.innerText = "반가워요, DOM!";
// 요소 추가
const newDiv = document.createElement("div");
newDiv.innerHTML = "<strong>새로운 요소 추가!</strong>";
document.body.appendChild(newDiv);
// 속성 수정
title.style.color = "red";
// 요소 삭제
setTimeout(() => title.remove(), 3000); // 3초 후 <h1> 삭제
</script>
</body>
</html>
DOM은 HTML 문서를 자바스크립트가 제어할 수 있도록 만든 나무 구조입니다.
이 구조를 이용해서 내용 변경, 추가, 삭제와 같은 작업을 할 수 있어요.
즉, HTML은 "정적"이지만, DOM과 자바스크립트를 사용하면 동적으로 변하는 웹페이지를 만들 수 있다!
'TIL' 카테고리의 다른 글
| defer (1) | 2024.12.19 |
|---|---|
| 스타벅스 주문 시스템 만들기 (0) | 2024.12.18 |
| 팀 과제 (1) | 2024.12.16 |
| JavaScript 배열 고급 메서드 활용 (1) | 2024.12.13 |
| 배열 기초 다지기 [ ] (0) | 2024.12.12 |