JavaScript 기초: DOM 조작

JavaScript 기초: DOM 조작

이번 포스팅에서는 JavaScript를 이용한 DOM(Document Object Model) 조작 방법을 배워보겠습니다. DOM은 HTML 문서를 트리 구조로 표현한 것으로, JavaScript를 통해 요소를 추가, 삭제, 수정할 수 있습니다.

1. DOM 선택

JavaScript로 DOM 요소를 선택하는 방법입니다.

1.1 getElementById

const title = document.getElementById("title");
console.log(title.textContent); // 선택된 요소의 텍스트 내용 출력
    

1.2 querySelector

CSS 선택자를 사용하여 요소를 선택합니다.

const firstParagraph = document.querySelector("p");
console.log(firstParagraph.textContent);
    

2. DOM 조작

2.1 내용 변경

HTML 요소의 내용을 변경하는 방법입니다.

const title = document.getElementById("title");
title.textContent = "새로운 제목입니다!";
    

2.2 스타일 변경

JavaScript로 CSS 스타일을 변경할 수 있습니다.

const box = document.querySelector(".box");
box.style.backgroundColor = "lightblue";
box.style.padding = "20px";
    

2.3 요소 추가

새로운 요소를 생성하여 DOM에 추가합니다.

const newElement = document.createElement("p");
newElement.textContent = "이것은 새로 추가된 문단입니다.";
document.body.appendChild(newElement);
    

2.4 요소 삭제

DOM에서 요소를 제거하는 방법입니다.

const removeElement = document.getElementById("remove-me");
removeElement.remove();
    

3. 이벤트 추가

DOM 요소에 이벤트를 추가하여 동작을 제어할 수 있습니다.

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

4. 활용 예제

실습 과제

1. HTML 문서에 새로운 리스트 항목(li)을 추가하는 코드를 작성하세요.

정답 확인 👇

// 실습 1: 리스트 항목 추가하기
const ul = document.querySelector("ul"); // <ul> 요소 선택
const newLi = document.createElement("li"); // 새로운 <li> 요소 생성
newLi.textContent = "새로운 항목"; // 내용 추가
ul.appendChild(newLi); // <ul>에 추가

            

이번 포스팅에서는 JavaScript로 DOM을 조작하는 방법을 배웠습니다. 다음에는 이벤트와 콜백에 대해 알아보겠습니다!