DOM Manipulation

DOM (Document Object Model) คือ tree structure ที่ browser สร้างจาก HTML — JavaScript ใช้ DOM API จัดการ elements

การเลือก Elements

// querySelector — เลือกตัวแรกที่เจอ (CSS selector)
const title = document.querySelector("h1");
const btn = document.querySelector("#submit-btn");
const card = document.querySelector(".card");

// querySelectorAll — เลือกทั้งหมด (NodeList)
const items = document.querySelectorAll(".item");
items.forEach(item => console.log(item.textContent));

// เลือกด้วย ID (แบบเก่าแต่ยังใช้ได้)
const app = document.getElementById("app");

# Python ไม่มี DOM — ใช้ library เช่น BeautifulSoup
from bs4 import BeautifulSoup
soup = BeautifulSoup(html, "html.parser")
title = soup.select_one("h1")

// C ไม่มี DOM โดยตรง
// ใช้ library เช่น libxml2 สำหรับ parse HTML

-- SQL ไม่เกี่ยวกับ DOM
-- แต่คิดได้ว่า querySelector คล้าย SELECT ... WHERE
SELECT * FROM elements WHERE class = 'card' LIMIT 1;

สร้าง Elements

// สร้าง element ใหม่
const div = document.createElement("div");
div.textContent = "สวัสดี!";
div.className = "greeting";

// เพิ่มเข้า DOM
document.querySelector("#app").appendChild(div);

// สร้างหลาย elements ด้วย innerHTML (ระวัง XSS)
const container = document.querySelector("#list");
container.innerHTML = `
  <ul>
    <li>รายการ 1</li>
    <li>รายการ 2</li>
    <li>รายการ 3</li>
  </ul>
`;

textContent vs innerHTML

const el = document.querySelector("#output");

// textContent — safe, แสดงเป็น text ธรรมดา
el.textContent = "<b>bold</b>"; // แสดง: <b>bold</b>

// innerHTML — parse HTML (ระวัง XSS)
el.innerHTML = "<b>bold</b>";   // แสดง: **bold**

classList — จัดการ CSS classes

const card = document.querySelector(".card");

card.classList.add("active");          // เพิ่ม class
card.classList.remove("hidden");       // ลบ class
card.classList.toggle("expanded");     // สลับ — มีก็ลบ ไม่มีก็เพิ่ม
card.classList.contains("active");     // true/false
card.classList.replace("old", "new");  // เปลี่ยน class

style Property

const box = document.querySelector(".box");

// inline style (ใช้น้อยที่สุดเท่าที่จำเป็น)
box.style.backgroundColor = "#3498db";
box.style.padding = "1rem";
box.style.display = "none";

// ดีกว่า — toggle class แทน
box.classList.toggle("hidden");

ลบ Elements

const item = document.querySelector(".item");

// วิธีสมัยใหม่
item.remove();

// วิธีเก่า (ผ่าน parent)
item.parentElement.removeChild(item);

ตัวอย่าง: สร้าง Card List

const users = [
  { name: "สมชาย", role: "Developer" },
  { name: "สมหญิง", role: "Designer" },
];

const container = document.querySelector("#app");

users.forEach(user => {
  const card = document.createElement("div");
  card.className = "card";
  card.innerHTML = `
    <h3>${user.name}</h3>
    <p>${user.role}</p>
  `;
  container.appendChild(card);
});