` 같은 태그들이 나뭇가지처럼 뻗어 나가는 형태지. 모든 HTML 태그, 태그 안의 텍스트, 심지어 주석까지 전부 각각의 '노드(Node)'라는 객체가 되어서 이 트리를 구성해.

자, 그럼 이 DOM으로 뭘 할 수 있을까? **거의 모든 것.**
자바스크립트는 이 DOM API를 통해 웹 페이지의 모든 요소에 접근하고, 내용을 바꾸고, 스타일을 입히고, 심지어 없던 요소를 새로 만들거나 기존 요소를 삭제할 수도 있어. 우리가 아는 '동적인 웹'은 전부 이 DOM 조작을 통해 이루어지는 거야.

1. DOM 요소에 접근하기 (feat. 쿼리)

DOM을 조작하려면 먼저 원하는 요소를 '선택'해야겠지? 마치 리모컨으로 특정 채널을 고르는 것처럼 말이야. 자바스크립트는 다양한 방법을 제공해.

`document.getElementById('아이디')`
가장 클래식하고 빠른 방법. HTML에서 `id` 속성은 페이지 내에서 유일해야 하거든. 그래서 특정 요소 하나를 콕 집어서 가져올 때 아주 유용해.

// HTML: <div id="hero">나는 영웅!</div>
const heroElement = document.getElementById('hero');
console.log(heroElement); // <div id="hero">...</div> 객체를 반환

`document.getElementsByClassName('클래스명')`
이름에 'Elements'(복수형)가 들어간 걸 주목해. 클래스는 여러 요소가 함께 가질 수 있잖아? 그래서 이 메서드는 해당 클래스를 가진 모든 요소를 `HTMLCollection`이라는 *유사 배열*에 담아서 반환해.

// HTML: <p class="item">항목1</p>, <p class="item">항목2</p>
const items = document.getElementsByClassName('item');
console.log(items); // HTMLCollection [p.item, p.item]
console.log(items[0]); // 첫 번째 p 태그에 접근 가능

`document.querySelector('CSS 선택자')`
현대 자바스크립트의 구세주! CSS 선택자 문법을 그대로 쓸 수 있어서 정말 강력하고 편리해. `#id`, `.class`, `div > p` 같은 복잡한 선택도 가능하지. 단, 조건에 맞는 **첫 번째 요소 하나만** 반환해.

const firstItem = document.querySelector('.item'); // 클래스가 'item'인 첫 번째 요소
const heroAgain = document.querySelector('#hero'); // 아이디가 'hero'인 요소

`document.querySelectorAll('CSS 선택자')`
`querySelector`의 형제. 이름처럼 조건에 맞는 **모든 요소를 `NodeList`**라는 유사 배열에 담아서 반환해. `getElementsByClassName`과 비슷하지만, `NodeList`는 대부분의 경우 '살아있지 않은(static)' 컬렉션이야. 즉, DOM이 바뀌어도 `NodeList` 변수의 내용은 자동으로 업데이트되지 않아. 대신 `forEach`를 쓸 수 있어서 훨씬 편해!

const allItems = document.querySelectorAll('.item');
allItems.forEach(item => {
  console.log(item.textContent);
});
// 출력:
// 항목1
// 항목2

2. DOM 조작하기 (feat. 창조와 변화)

자, 이제 원하는 요소를 선택했으니 마음껏 요리해볼 시간이야.

요소 생성 및 추가
없던 HTML 요소를 자바스크립트로 만들어서 페이지에 붙일 수 있어.

// 1. 새로운 <li> 요소를 만든다.
const newLi = document.createElement('li');

// 2. 텍스트를 추가한다.
newLi.textContent = '새로운 항목!';

// 3. 페이지의 <ul> 태그를 찾아서...
const ul = document.querySelector('ul');

// 4. 그 자식으로 <li>를 추가한다.
ul.appendChild(newLi);

내용 변경: `innerHTML` vs `textContent` vs `innerText`
이 셋은 정말 중요해서 꼭 구분해야 해.

• `innerHTML`: HTML 태그를 **인식**해서 내용을 갈아 끼워. 편리하지만, 사용자가 입력한 값을 그대로 넣으면 `script` 태그 등을 이용한 **XSS(Cross-Site Scripting) 공격**에 취약해질 수 있으니 조심해야 해.
• `textContent`: 순수하게 **텍스트**만 다뤄. HTML 태그를 넣어도 그냥 문자열로 취급해버리지. 빠르고 안전해서 텍스트만 바꿀 땐 이게 최고야.
• `innerText`: `textContent`랑 비슷한데, 약간 더 똑똑해. 화면에 **보이는(rendered)** 텍스트만 가져와. 예를 들어 `display: none;`으로 숨겨진 텍스트는 가져오지 않아. 이 '계산' 과정 때문에 `textContent`보다 조금 느릴 수 있어.

const myDiv = document.querySelector('#my-div');

myDiv.innerHTML = '<strong>중요!</strong>'; // 화면에 '중요!'가 굵게 표시됨
myDiv.textContent = '<strong>중요!</strong>'; // 화면에 '<strong>중요!</strong>' 글자가 그대로 보임

속성(Attribute)과 스타일 변경
`setAttribute`, `getAttribute`로 HTML 속성을 바꾸거나, `element.style` 프로퍼티로 CSS 스타일을 직접 바꿀 수 있어.

const link = document.querySelector('a');

// href 속성 변경
link.setAttribute('href', 'https://www.jaenung.net');

// style 속성을 직접 조작 (인라인 스타일로 들어감)
link.style.color = 'blue';
link.style.fontSize = '20px'; // CSS의 font-size는 JS에서 카멜케이스(camelCase)로!

3. DOM 이벤트: 사용자와의 소통

DOM의 꽃은 바로 **이벤트(Event)**야. 사용자가 버튼을 클릭하거나, 마우스를 움직이거나, 키보드를 누르는 모든 행동이 '이벤트'가 되어 자바스크립트에 신호를 보내. 우리는 이 신호를 받아서 특정 동작을 실행시킬 수 있지.

`addEventListener`
이벤트 처리는 `element.onclick = function() {}` 처럼 할 수도 있지만, 현대적인 방식은 `addEventListener`를 쓰는 거야. 하나의 이벤트(예: 'click')에 여러 개의 함수를 연결할 수 있는 등 훨씬 유연하거든.

const myButton = document.querySelector('#my-button');

function handleClick() {
  alert('버튼이 클릭되었어요!');
}

myButton.addEventListener('click', handleClick);

// 현재 창의 내부 너비와 높이
console.log(window.innerWidth, window.innerHeight);

// 경고창, 확인창, 입력창
alert('경고!');
const isOkay = confirm('계속할까요?');
const userName = prompt('이름을 입력하세요');

// 새 창 열기
window.open('https://www.google.com');

// 현재 페이지의 전체 URL
console.log(location.href);

// 다른 페이지로 이동하기
location.href = 'https://www.naver.com';
// location.assign('https://www.naver.com'); // 위와 동일

// 페이지 새로고침
location.reload();

// 히스토리에 남기지 않고 페이지 이동 (뒤로가기 불가)
// location.replace('https://www.naver.com');

// 뒤로 가기
history.back();

// 앞으로 가기
history.forward();

// 2페이지 뒤로 가기
history.go(-2);

// 브라우저 정보가 담긴 User Agent 문자열
console.log(navigator.userAgent);

// 브라우저 기본 언어
console.log(navigator.language);

// 온라인 상태 확인
console.log(navigator.onLine); // true 또는 false

console.log('시작!');

const timerId = setTimeout(() => {
  console.log('3초가 지났습니다!');
}, 3000);

// 만약 3초가 되기 전에 특정 조건이 만족되면 타이머를 취소할 수 있어.
// clearTimeout(timerId);

let count = 0;
const intervalId = setInterval(() => {
  count++;
  console.log(`1초마다 실행: ${count}번째`);
  if (count >= 5) {
    clearInterval(intervalId); // 5번 실행 후 반복을 멈춤
    console.log('인터벌 종료!');
  }
}, 1000);