JavaScript DOM 기본 조작

🌿 자바스크립트 DOM 기본 조작

DOM (Document Object Model)은 웹페이지를 자바스크립트로 조작할 수 있도록 만들어주는 문서 객체 구조입니다. HTML 문서를 객체로 바꿔서 자바스크립트가 내용을 읽거나 변경할 수 있도록 해줍니다.

🔹 DOM 요소 선택

자바스크립트에서 HTML 요소를 선택하려면 아래 메서드를 사용합니다.

• document.getElementById("id") - ID로 요소 선택
• document.getElementsByClassName("class") - 클래스 이름으로 선택 (HTMLCollection 반환)
• document.getElementsByTagName("tag") - 태그 이름으로 선택
• document.querySelector("선택자") - CSS 선택자 방식, 첫 번째 요소 반환
• document.querySelectorAll("선택자") - 모든 요소를 NodeList로 반환

let title = document.getElementById("main-title");
let buttons = document.querySelectorAll(".btn");

🔸 DOM 요소 내용 변경

• innerText: 텍스트만 변경
• innerHTML: HTML 구조 포함해서 변경

title.innerText = "새로운 제목입니다!";
title.innerHTML = "<span style='color:red'>HTML 포함</span>";

🎨 스타일 변경

style 속성을 통해 CSS를 직접 변경할 수 있습니다.

title.style.color = "blue";
title.style.fontSize = "24px";

➕ 요소 추가 및 삭제

✅ 새로운 요소 생성

let newEl = document.createElement("p");
newEl.innerText = "새로 추가된 문단입니다.";
document.body.appendChild(newEl);

❌ 기존 요소 삭제

let el = document.getElementById("main-title");
el.remove();

📌 마무리 요약

• DOM은 웹페이지의 구조를 객체처럼 다룰 수 있게 해줌
• 선택자 메서드로 HTML 요소를 가져와 조작 가능
• 텍스트, 스타일, 구조를 모두 자바스크립트로 변경 가능
• createElement, appendChild 등으로 요소 추가도 가능