JavaScript
DOM Manipulation
Modify content & attributes
เรียนรู้การเปลี่ยนข้อความด้วย textContent, แทรก HTML ด้วย innerHTML, จัดการ attributes และ CSS class ด้วย classList
เปลี่ยนข้อความด้วย `textContent`
หลังจากเลือก element ได้แล้ว สิ่งแรกที่ทำได้คือเปลี่ยนข้อความภายใน `element.textContent` คือ property ที่เก็บข้อความใน element — อ่านได้ เขียนได้
textContent อ่านและเขียนข้อความล้วน ๆ — ไม่แปล HTML tag ใด ๆ
const heading = document.querySelector("h1");
// อ่านข้อความปัจจุบัน
console.log(heading.textContent); // "สวัสดี"
// เขียนข้อความใหม่
heading.textContent = "ยินดีต้อนรับ";
console.log(heading.textContent); // "ยินดีต้อนรับ"`textContent` ปลอดภัยกว่า `innerHTML` เพราะถ้าใส่ string ที่มี `<script>` หรือ HTML tag เข้าไป มันจะแสดงเป็นข้อความธรรมดา ไม่ได้แปลงเป็น HTML จริง ๆ
เปลี่ยน HTML ภายในด้วย `innerHTML`
`element.innerHTML` คล้าย `textContent` แต่แปล HTML string เป็น element จริง ๆ ได้ เหมาะสำหรับกรณีที่ต้องการแทรก tag ใหม่เข้าไปใน element
innerHTML แทนที่เนื้อหาภายใน element ทั้งหมดด้วย HTML ใหม่
const list = document.querySelector("ul");
// แทรก HTML ใหม่ทั้งหมด
list.innerHTML = "<li>รายการ A</li><li>รายการ B</li>";
// ผลลัพธ์ใน DOM:
// <ul>
// <li>รายการ A</li>
// <li>รายการ B</li>
// </ul>⚠️ **ระวัง XSS (Cross-Site Scripting)** — ห้ามนำข้อมูลที่มาจาก user (เช่น input value) ใส่ลงใน `innerHTML` โดยตรง เพราะอาจเปิดช่องให้ผู้ไม่ประสงค์ดีฝัง script อันตรายได้ ถ้าต้องการแสดงข้อความจาก user ให้ใช้ `textContent` แทน
อ่านและแก้ไข attributes ด้วย `getAttribute` / `setAttribute`
Attribute คือค่าที่กำหนดใน HTML tag เช่น `href`, `src`, `disabled`, `class`, `id` - `element.getAttribute(name)` — อ่านค่า attribute - `element.setAttribute(name, value)` — เซ็ตค่า attribute - `element.removeAttribute(name)` — ลบ attribute ออก
getAttribute / setAttribute ใช้ได้กับทุก attribute ไม่ว่าจะเป็น standard หรือ custom
const link = document.querySelector("a");
// อ่าน attribute
console.log(link.getAttribute("href")); // "https://example.com"
// เซ็ต attribute ใหม่
link.setAttribute("href", "https://google.com");
link.setAttribute("target", "_blank");
// ลบ attribute
const btn = document.querySelector("button");
btn.removeAttribute("disabled"); // ปลด disabled ออกจัดการ CSS class ด้วย `classList`
`element.classList` เป็น object พิเศษที่ให้เพิ่ม ลบ และสลับ CSS class ได้ง่าย โดยไม่ต้องแก้ attribute `class` ทั้งหมด
| Method | หน้าที่ | ตัวอย่าง |
|---|---|---|
| classList.add(name) | เพิ่ม class | el.classList.add("active") |
| classList.remove(name) | ลบ class | el.classList.remove("active") |
| classList.toggle(name) | เพิ่มถ้าไม่มี / ลบถ้ามีอยู่แล้ว | el.classList.toggle("open") |
| classList.contains(name) | ตรวจว่ามี class นั้นอยู่ไหม (คืน boolean) | el.classList.contains("active") |
classList.toggle เหมาะสำหรับการสลับสถานะ เช่น เปิด/ปิด menu หรือ dark/light mode
const menu = document.querySelector("#menu");
// เปิด/ปิด class "open" ทุกครั้งที่เรียก
menu.classList.toggle("open");
// ตรวจก่อนเพิ่ม
if (!menu.classList.contains("highlight")) {
menu.classList.add("highlight");
}ข้อควรระวัง
- **innerHTML กับ XSS** — อย่าใส่ข้อมูลจาก user เข้า innerHTML โดยตรง ให้ใช้ `textContent` แทนเมื่อต้องการแสดงข้อความ
- **textContent vs innerText** — `textContent` คืนข้อความทั้งหมดรวม element ที่ซ่อนอยู่, `innerText` คืนเฉพาะข้อความที่มองเห็น แต่ช้ากว่าเพราะต้องคำนวณ layout
- **setAttribute เขียนทับ** — `setAttribute('class', 'new')` จะลบ class เดิมทั้งหมด ถ้าต้องการเพิ่มเฉพาะ class ให้ใช้ `classList.add()` แทน
- **removeAttribute vs property = ''** — `removeAttribute('disabled')` ลบ attribute จริง ๆ ต่างจาก `el.disabled = false` ซึ่งเป็นการเซ็ต property