reveal.js

# การจัดการ DOM

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

---

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

**DOM Manipulation** คือการสร้าง เพิ่ม ลบ แก้ไขเนื้อหา attribute class และ style ของ element ด้วย 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 LR
  A["createElement()<br/>สร้าง element"] --> B["textContent / innerHTML<br/>กำหนดเนื้อหา"]
  B --> C["setAttribute / classList<br/>กำหนดคุณสมบัติ"]
  C --> D["appendChild / append<br/>เพิ่มลงหน้าเว็บ"]
  D --> E["remove()<br/>ลบ element"]
</pre>

---

## Method สำคัญ

| Method/Property | ใช้ทำอะไร | ข้อควรระวัง |
|---|---|---|
| `createElement()` | สร้าง element ใหม่ | ต้อง append จึงจะแสดง |
| `appendChild()` | เพิ่มลูกท้ายสุด | รับ Node เท่านั้น |
| `prepend()` | เพิ่มเป็นลูกตัวแรก | ใช้ได้ทั้ง Node/string |
| `innerHTML` | อ่าน/เขียน HTML | ระวัง XSS |
| `textContent` | อ่าน/เขียนข้อความ | ปลอดภัยกว่า |
| `classList` | จัดการ class | เหมาะกับ state |
| `style.property` | ตั้ง inline style | ใช้พอประมาณ |

---

## ตัวอย่างสร้าง Todo Item

```html
<form id="todoForm">
  <input id="todoInput" placeholder="เพิ่มงาน">
  <button>เพิ่ม</button>
</form>
<ul id="todoList"></ul>

function createTodoItem(text) {
    // สร้าง li ใหม่
    const item = document.createElement("li");
    item.textContent = text;

// เพิ่ม class เพื่อใช้ตกแต่งด้วย CSS
    item.classList.add("todo-item");

// เพิ่มปุ่มลบ
    const removeButton = document.createElement("button");
    removeButton.textContent = "ลบ";
    removeButton.setAttribute("type", "button");

// ลบ li เมื่อคลิกปุ่ม
    removeButton.addEventListener("click", () => item.remove());
    item.appendChild(removeButton);

return item;
  }

form.addEventListener("submit", event => {
    event.preventDefault();
    const text = input.value.trim();
    if (!text) return;

// เพิ่ม item เข้า list ท้ายสุด
    list.appendChild(createTodoItem(text));
    input.value = "";
  });

// ตัวอย่างการใช้งานเริ่มต้น
  list.appendChild(createTodoItem("อ่านบทเรียน DOM"));
</script>
```

---

## Attribute และ Class

```js
const link = document.querySelector("a");

// กำหนด attribute
link.setAttribute("target", "_blank");

// อ่าน attribute
console.log(link.getAttribute("href"));

// ลบ attribute
link.removeAttribute("target");

// จัดการ class
link.classList.add("active");
link.classList.toggle("highlight");
console.log(link.classList.contains("active"));
```

---

## `innerHTML` กับ XSS

**XSS (Cross-Site Scripting)** เกิดเมื่อรับ HTML/Script จากผู้ใช้แล้วนำไปแทรกด้วย `innerHTML` โดยไม่ตรวจสอบ

```js
// ระวัง: ถ้า userInput มี script อาจอันตราย
element.innerHTML = userInput;

// ปลอดภัยกว่าเมื่อแสดงเป็นข้อความ
element.textContent = userInput;
```

---

## สมการจำนวน Element หลังเพิ่มข้อมูล

โดยที่ **Enew** คือจำนวน element ใหม่, **Eold** คือจำนวนเดิม, **a** คือจำนวนที่เพิ่ม, และ **r** คือจำนวนที่ลบ

---

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

1. `createElement()` ต่างจาก `innerHTML` อย่างไร
2. ทำไม `textContent` จึงปลอดภัยกว่า `innerHTML`
3. `classList.toggle()` ใช้ทำอะไร
4. `appendChild()` และ `prepend()` ต่างกันอย่างไร
5. การตั้ง inline style ด้วย JS มีข้อควรระวังอะไร

---

## 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>