"> 제목 "> 제목 ">

<head>
  <!-- HTML Meta Tags -->
  <meta charset="UTF-8" />
  <title> 제목 </title>
  <meta
    name="description"   content=" 설명 "   />
  <meta name="keywords" content="키워드, 양파고, Yang Phago, 노션, 양파고 노션, notion" />

  <!-- Open Graph / Facebook -->
  <meta   property="og:title"   content="제목 "  />
  <meta  property="og:description" content=" 설명, 양파고, Yang Phago, 노션, 양파고 노션  "  />
  <meta property="og:image" content="대표 이미지" />
  <meta property="og:url" content="페이지 주소" />
  <meta property="og:type" content="website" />
</head>

목차(클릭하세요)

<aside> 💡 DOM: (Document Object Model)

</aside>

[소스코드 참고 사이트]

https://github.com/SantiagoGdaR/vanilla-spa

1. DOM이란?

✅ HTML 문서를 객체의 트리 구조로 표현한 것

HTML: 가족 구성원들의 이름이 적힌 종이
DOM: 가족 관계를 나타내는 실제 가계도 (부모-자식 관계가 명확한 트리 구조)
JavaScript: 가계도를 보고 "김철수의 아버지는 누구지?" 같은 질문에 답하거나, 새 가족 구성원을 추가하는 사람

1-1. 왜 필요한가?

➡️브라우저는 HTML 문서를 읽어서 DOM 트리를 만들고, 자바스크립트로 DOM에 접근하여 내용을 바꾸거나 추가/삭제할 수 있음

웹 페이지를 프로그래밍적으로 조작할 수 있게 해주는 인터페이스

1-2.DOM 구조 예시

<html>
  <head>
    <title>DOM 예제</title>
  </head>
  <body>
    <h1 id="title">안녕하세요</h1>
    <p class="msg">DOM 실습 중입니다.</p>
    <button id="btn">클릭</button>
  </body>
</html>

이것을 도식화 해보면?

html
 ├── head
 │    └── title
 └── body
      ├── h1 (id="title")
      ├── p (class="msg")
      └── button (id="btn")

1-3.DOM 조작 예제코드

import "./styles.css";

// 1) 먼저 #app 안에 HTML을 채움
document.getElementById("app").innerHTML = `
  <h1 id="title">안녕하세요</h1>
  <p class="msg">DOM 실습 중입니다.</p>
  <button id="btn">클릭</button>
`;

// 2) 그 다음 DOM을 선택
const title = document.getElementById("title");
const msg = document.querySelector(".msg");
const btn = document.getElementById("btn");

// 3) 버튼 클릭 시에만 DOM 조작되도록 변경
btn.addEventListener("click", function () {
  title.textContent = "Hello DOM!";
  msg.textContent = "이 문장은 DOM조작으로 바뀐거임.";
  alert("버튼이 클릭됨!");
});