DOM & 이벤트 & BOM

#1. DOM이란?

flowchart TD
    D["document"] --> H["html"]
    H --> HE["head"]
    H --> B["body"]
    HE --> T["title"]
    B --> H1["h1"]
    B --> P["p#demo"]
    B --> BT["button"]
    style D fill:#ede7f6,stroke:#5e35b1
    style B fill:#e8f5e9,stroke:#43a047
    style P fill:#fff3e0,stroke:#fb8c00

DOM 조작은 보통 ① 요소를 선택 → ② 내용·스타일 변경 / 생성·삭제 → ③ 이벤트에 반응의 흐름으로 이루어진다.

#2. 요소 선택하기

// id로 하나 선택
const title = document.getElementById("demo");

// CSS 선택자로 선택 (가장 유연함)
const firstMsg = document.querySelector(".message");   // 첫 번째
const allMsg = document.querySelectorAll(".message");  // 전부

#3. 요소 내용·스타일 변경

• element.textContent: 요소의 텍스트를 읽거나 바꾼다.

• element.innerHTML: 요소의 HTML을 읽거나 바꾼다(태그 포함).

• element.style.속성: 인라인 스타일을 바꾼다. CSS 속성은 카멜표기법으로 쓴다(font-size → fontSize).

const el = document.getElementById("demo");

el.textContent = "텍스트가 변경되었습니다!";
el.innerHTML = "<strong>굵은</strong> 내용";
el.style.color = "red";
el.style.fontSize = "20px";

다음은 버튼을 누르면 문단 텍스트가 바뀌는 예시다.

<p id="demo">이 텍스트는 변경될 예정입니다.</p>
<button onclick="changeText()">텍스트 변경</button>

<script>
  function changeText() {
    document.getElementById("demo").textContent = "변경되었습니다!";
  }
</script>

클릭 전 → 이 텍스트는 변경될 예정입니다.

클릭 후 → 변경되었습니다!

#4. 요소 생성·추가·삭제

• document.createElement(tag): 새 요소를 만든다.

• 부모.appendChild(자식): 부모의 마지막 자식으로 추가한다.

• 부모.removeChild(자식): 자식 요소를 제거한다.

// 새 <p> 요소를 만들어 컨테이너에 추가
const newP = document.createElement("p");
newP.textContent = "새로 추가된 문단입니다.";

const container = document.getElementById("container");
container.appendChild(newP);

#5. 이벤트 처리

이벤트(event)는 클릭, 마우스 이동, 키 입력, 스크롤 등 사용자나 브라우저가 일으키는 사건이다. 자바스크립트로 이를 감지해 동작을 실행한다.

#이벤트를 연결하는 세 가지 방법

<!-- 1) 인라인 이벤트 핸들러 (지양) -->
<button onclick="alert('클릭됨!')">클릭</button>

<!-- 2) 프로퍼티에 함수 할당 -->
<script>
  button.onclick = function () { alert("클릭!"); };
</script>

<!-- 3) addEventListener (권장) -->
<script>
  button.addEventListener("click", function () {
    alert("클릭!");
  });
</script>

#이벤트 객체

이벤트가 발생하면 브라우저는 이벤트 정보를 담은 이벤트 객체를 핸들러의 첫 번째 인수로 전달한다.

button.addEventListener("click", function (event) {
  console.log(event.type);     // "click"
  console.log(event.target);   // 이벤트가 발생한 요소
  console.log(event.clientX, event.clientY);   // 마우스 좌표
});

#주요 이벤트 종류

실시간 입력 반영 예시:

document.getElementById("textInput").addEventListener("input", function (e) {
  document.getElementById("output").textContent = "입력한 내용: " + e.target.value;
});

입력한 내용: 안녕하세요

#6. BOM (Browser Object Model)

BOM은 브라우저 창 자체를 다루는 객체들의 모음이다. DOM이 "문서"를 다룬다면, BOM은 "브라우저 환경"(주소, 화면, 히스토리 등)을 다룬다.

flowchart TD
    W["window<br/>(최상위 객체)"] --> D["document<br/>(문서 = DOM)"]
    W --> L["location<br/>(현재 URL)"]
    W --> N["navigator<br/>(브라우저 정보)"]
    W --> S["screen<br/>(화면 해상도)"]
    W --> H["history<br/>(방문 기록)"]
    style W fill:#ede7f6,stroke:#5e35b1

// window — 타이머, 새 창
setTimeout(() => alert("3초 경과"), 3000);   // 3초 뒤 실행
window.open("https://example.com");          // 새 창 열기

// location — 현재 URL / 페이지 이동
console.log(location.href);                  // 현재 주소 출력
location.href = "https://example.com";       // 페이지 이동

// navigator — 브라우저 정보
console.log(navigator.userAgent);

// screen — 화면 해상도
console.log(screen.width, screen.height);

// history — 앞/뒤로 이동
history.back();      // 이전 페이지
history.forward();   // 다음 페이지