DOM & Events — FullstackKit

DOM คืออะไร?

เมื่อเบราว์เซอร์โหลด HTML มันจะสร้าง ต้นไม้ ของ element ขึ้นมาในหน่วยความจำ เราเรียกต้นไม้นี้ว่า DOM (Document Object Model)

document
  └── html
       ├── head
       │    └── title
       └── body
            ├── h1
            ├── p
            └── button   ← เราจะจับตัวนี้ด้วย JS

DOM คือ สะพาน ที่ทำให้ JavaScript เข้าไปอ่าน/แก้/เพิ่ม element บนหน้าเว็บได้

ค้นหา Element

ก่อนจะจัดการ element เราต้อง "หามันก่อน":

// ด้วย CSS selector (แนะนำ)
const button = document.querySelector("button");
const card = document.querySelector(".card");
const title = document.querySelector("#main-title");

// หาหลายตัว
const allItems = document.querySelectorAll("li");

อ่านและเปลี่ยนเนื้อหา

const heading = document.querySelector("h1");

// อ่าน
console.log(heading.textContent);

// เปลี่ยน
heading.textContent = "สวัสดีจาก JavaScript!";

เปลี่ยน Style

const box = document.querySelector(".box");
box.style.backgroundColor = "yellow";
box.style.fontSize = "24px";

เพิ่ม/ลด Class

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

card.classList.add("active");       // เพิ่ม class
card.classList.remove("hidden");    // ลบ class
card.classList.toggle("dark");      // สลับ (มีอยู่→ลบ, ไม่มี→เพิ่ม)

Events — ทำปุ่มให้ทำงาน

Event คือสิ่งที่เกิดขึ้นบนหน้าเว็บ เช่น คลิก, พิมพ์, เลื่อนเมาส์ เราใช้ Event Listener บอกว่า "ถ้าเกิด event นี้ ให้ทำฟังก์ชันนี้"

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

button.addEventListener("click", function () {
  alert("คุณกดปุ่มแล้ว!");
});

หรือใช้ arrow function:

button.addEventListener("click", () => {
  alert("คุณกดปุ่มแล้ว!");
});

โปรเจกต์จริง: เครื่องนับ (Counter)

ลองทำปุ่มเพิ่ม/ลดตัวเลข — นี่คือ "Hello World" ของโลก DOM!

HTML (index.html):

<!DOCTYPE html>
<html lang="th">
  <head>
    <meta charset="UTF-8" />
    <title>Counter</title>
    <style>
      body { font-family: sans-serif; text-align: center; padding-top: 50px; }
      #count { font-size: 48px; margin: 20px; }
      button { font-size: 20px; padding: 10px 20px; margin: 5px; }
    </style>
  </head>
  <body>
    <h1>เครื่องนับ</h1>
    <div id="count">0</div>
    <button id="decrease">-</button>
    <button id="increase">+</button>

    <script src="script.js"></script>
  </body>
</html>

JavaScript (script.js):

let count = 0;
const countEl = document.querySelector("#count");

document.querySelector("#increase").addEventListener("click", () => {
  count++;
  countEl.textContent = count;
});

document.querySelector("#decrease").addEventListener("click", () => {
  count--;
  countEl.textContent = count;
});

เปิดไฟล์ HTML ในเบราว์เซอร์ กด + และ - ดู — ตัวเลขเปลี่ยนได้! 🎉

อ่านค่าจาก input

<input id="nameInput" type="text" />
<button id="sayHi">ทักทาย</button>
<p id="result"></p>

document.querySelector("#sayHi").addEventListener("click", () => {
  const name = document.querySelector("#nameInput").value;
  document.querySelector("#result").textContent = "สวัสดี " + name;
});

สังเกต .value — ใช้อ่านค่าที่ผู้ใช้พิมพ์ใน input

Event ที่ใช้บ่อย

Event	เกิดเมื่อ
`click`	คลิก
`input`	พิมพ์ในช่องข้อความ
`change`	เปลี่ยนค่า (เช่น dropdown)
`submit`	ส่งฟอร์ม
`mouseover`	เอาเมาส์ไปวาง

สรุป

แนวคิด	สรุป
DOM	ตัวแทนของหน้าเว็บที่ JS จัดการได้
`querySelector`	ค้นหา element
`textContent`	อ่าน/เปลี่ยนข้อความ
`classList`	เพิ่ม/ลด class
`addEventListener`	รอรับ event แล้วทำงาน

จบโมดูล Frontend! บทหน้าเราจะไปฝั่ง Backend เริ่มด้วย Node.js & npm ⚙️