reveal.js

# Document Object Model และการเลือกอีลีเมนต์

Lesson 1 - JavaScript กับ DOM และ Event

---

## คำจำกัดความ

**DOM (Document Object Model)** คือโครงสร้างแบบ tree ที่ browser สร้างจาก HTML เพื่อให้ JavaScript เข้าถึง อ่าน และแก้ไขหน้าเว็บได้

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#458588", "primaryTextColor": "#fbf1c7", "primaryBorderColor": "#fabd2f", "lineColor": "#a89984", "secondaryColor": "#b8bb26", "tertiaryColor": "#d3869b", "background": "#282828", "mainBkg": "#3c3836", "textColor": "#ebdbb2"}}}%%
flowchart TD
  A["document<br/>เอกสารหลัก"] --> B["html<br/>Root element"]
  B --> C["head<br/>ข้อมูลเอกสาร"]
  B --> D["body<br/>เนื้อหาหน้าเว็บ"]
  D --> E["header<br/>Parent node"]
  D --> F["main<br/>Sibling node"]
  F --> G["section<br/>Child node"]
  G --> H["p<br/>Text content"]
</pre>

---

## DOM Tree: Parent, Child, Sibling

- **Parent Node** คือ node แม่ที่ครอบ node อื่น
- **Child Node** คือ node ลูกที่อยู่ภายใน parent
- **Sibling Node** คือ node ที่มี parent เดียวกัน

---

## วิธีเลือก Element

| Method | คืนค่า | เหมาะกับ |
|---|---|---|
| `getElementById()` | Element หรือ `null` | เลือกด้วย id |
| `querySelector()` | Element แรกหรือ `null` | เลือกด้วย CSS selector |
| `querySelectorAll()` | NodeList | เลือกหลาย element |
| `getElementsByClassName()` | HTMLCollection | เลือกด้วย class |
| `getElementsByTagName()` | HTMLCollection | เลือกด้วย tag |

---

## ตัวอย่างโค้ดเลือกอีลีเมนต์

```html
<main id="app">
  <h1 class="title">DOM Lesson</h1>
  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>
</main>

// เลือก element แรกด้วย CSS selector
  const title = document.querySelector(".title");

// เลือก li ทุกตัว คืนค่าเป็น NodeList
  const items = document.querySelectorAll("li");

// แสดงผลลัพธ์การใช้งาน
  console.log(app);
  console.log(title.textContent);
  items.forEach(item => console.log(item.textContent));
</script>
```

---

## การ Traverse DOM

```js
const current = document.querySelector("li");

// parentElement คือ element แม่
console.log(current.parentElement);

// children คือ element ลูกทั้งหมด
console.log(current.parentElement.children);

// nextElementSibling คือ element ถัดไปในระดับเดียวกัน
console.log(current.nextElementSibling);
```

---

## สมการจำนวน Node ใน Tree อย่างง่าย

โดยที่ **N** คือจำนวน node ที่พิจารณา, **p** คือ parent node, **c** คือ child nodes, และ **s** คือ sibling nodes

---

## แบบทดสอบหลังเรียน

1. DOM คืออะไร
2. `querySelector()` และ `querySelectorAll()` ต่างกันอย่างไร
3. NodeList และ HTMLCollection ต่างกันอย่างไรในภาพรวม
4. `parentElement` ใช้ทำอะไร
5. ทำไม `getElementById()` จึงคืนค่าได้เพียง element เดียว

---

## End

<a href="/web-programming/05-dom-event/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>