DOM(Document Object Model) 이란?

1. DOM → 웹 페이지를 동적으로 변경

자바스크립트에서 DOM을 사용하면 웹 페이지의 요소들을 선택하고 조작할 수 있으며, 
예를 들어 특정 HTML 요소의 내용을 변경하거나 스타일을 수정할 수 있다. 
또한, 이벤트 처리, 애니메이션 등 다양한 기능을 구현할 수 있다.

즉, 웹 페이지는 HTML로 작성되는데
DOM을 이용하면 HTML 요소들을 자바스크립트로 선택하고 변경할 수 있다!

2. getElementById() / querySelector() 함수

2-1. document.getElementById() 함수 → 특정 요소 내용 바꿈

특정 ID를 가진 요소를 선택하고, 
이를 통해 해당 요소의 내용을 변경하거나 스타일을 수정할 수 있다. 

2-2. querySelector() 함수 → 스타일 수정

CSS 선택자를 통해 요소를 선택하고 조작할 수 있습니다

3. DOM 예시

3-1. HTML 요소의 내용 변경

// <p> 요소의 내용을 변경하는 예시
let paragraph = document.getElementById('myParagraph'); // ID가 'myParagraph'인 요소 선택
paragraph.textContent = '새로운 내용으로 변경됨'; // 내용 변경

3-2. 스타일 수정하기

// <div> 요소의 배경색과 글자색 변경하는 예시
let divElement = document.querySelector('div'); // 첫 번째 <div> 요소 선택
divElement.style.backgroundColor = 'blue'; // 배경색 변경
divElement.style.color = 'white'; // 글자색 변경

3-3. 이벤트 처리하기

// 버튼 클릭 시 메시지 출력하는 예시
let button = document.getElementById('myButton'); // ID가 'myButton'인 버튼 요소 선택
button.addEventListener('click', function() {
  alert('버튼이 클릭되었습니다!');
});