หัวข้อ 2: การจัดการ DOM

คำจำกัดความ

DOM Manipulation คือการสร้าง เพิ่ม ลบ แก้ไขเนื้อหา attribute class และ style ของ element ด้วย JavaScript

%%{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()
สร้าง element"] --> B["textContent / innerHTML
กำหนดเนื้อหา"]
  B --> C["setAttribute / classList
กำหนดคุณสมบัติ"]
  C --> D["appendChild / append
เพิ่มลงหน้าเว็บ"]
  D --> E["remove()
ลบ element"]

Method สำคัญ

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

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

<script>
  const form = document.getElementById("todoForm");
  const input = document.getElementById("todoInput");
  const list = document.getElementById("todoList");

  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

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 โดยไม่ตรวจสอบ

// ระวัง: ถ้า 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 มีข้อควรระวังอะไร

กลับสัปดาห์ที่ 5