0Pricing
Frontend Academy · บทเรียน

การเปลี่ยนเนื้อหา: textContent innerHTML classList

อ่านและปรับปรุงเนื้อหาข้อความขององค์ประกอบ แทรก HTML และสลับ เพิ่ม หรือลบคลาส CSS ด้วยโปรแกรม

การเปลี่ยนเนื้อหา: textContent innerHTML classList เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

การอ่านและเขียน textContent

element.textContent ใช้อ่านหรือกำหนดเนื้อหาข้อความธรรมดาขององค์ประกอบ รวมถึงองค์ประกอบลูกทั้งหมด ปลอดภัย เพราะไม่เคยแยกวิเคราะห์ HTML ดังนั้นการกำหนดค่าจาก input ของผู้ใช้จึงไม่ก่อให้เกิดช่องโหว่ XSS

const heading = document.querySelector('h1');
console.log(heading.textContent); // read
heading.textContent = 'New Title'; // write — replaces all children

// Safe with user input:
element.textContent = userInput; // no XSS risk

innerHTML — ใช้อย่างระมัดระวัง

element.innerHTML ใช้อ่านหรือกำหนดมาร์กอัป HTML ภายในองค์ประกอบ สะดวกแต่ อันตรายเมื่อใช้กับ input ของผู้ใช้ เพราะระบบจะแยกวิเคราะห์ HTML และอาจเรียกใช้สคริปต์ได้ (XSS) อย่ากำหนด innerHTML ด้วยข้อมูลผู้ใช้ที่ยังไม่ได้ทำให้ปลอดภัย

card.innerHTML = '<strong>Loading...</strong>'; // safe: hardcoded string

// DANGER — never do this:
element.innerHTML = userInput; // XSS vulnerability

// Safe alternative:
const div = document.createElement('div');
div.textContent = userInput;   // won't parse as HTML

innerText เทียบกับ textContent

innerText คืนค่าเฉพาะข้อความที่มองเห็นได้ โดยเคารพ CSS display:none และทำให้เกิดการคำนวณเลย์เอาต์ ส่วน textContent คืนค่าข้อความทั้งหมด รวมถึงข้อความที่ซ่อนอยู่ และทำงานได้เร็วกว่า ควรเลือกใช้ textContent เว้นแต่ต้องการพฤติกรรมแบบข้อความที่มองเห็นโดยเฉพาะ

classList — การเพิ่มและนำ class ออก

element.classList มีเมธอดสำหรับแก้ไข class ของ CSS โดยไม่ต้องจัดการสตริง className ทั้งหมด add(), remove(), toggle(), contains(), replace()

const btn = document.querySelector('.btn');
btn.classList.add('active');         // add a class
btn.classList.remove('disabled');    // remove a class
btn.classList.toggle('open');        // add if absent, remove if present
console.log(btn.classList.contains('active')); // true

toggle พร้อมพารามิเตอร์บังคับ

classList.toggle('class', condition) จะเพิ่ม class เมื่อ condition เป็นจริง และนำออกเมื่อเป็นเท็จ เป็นวิธีที่กระชับในการทำให้ class สอดคล้องกับสถานะบูลีน

const isDark = true;
document.body.classList.toggle('dark-mode', isDark);
// No more: if/else with add/remove

การอ่านและกำหนดแอตทริบิวต์

element.getAttribute('attr') ใช้อ่านแอตทริบิวต์ใด ๆ element.setAttribute('attr', value) ใช้กำหนดค่า element.removeAttribute('attr') ใช้นำแอตทริบิวต์ออก และ element.hasAttribute('attr') ใช้ตรวจสอบว่ามีแอตทริบิวต์อยู่หรือไม่

const img = document.querySelector('img');
console.log(img.getAttribute('alt'));
img.setAttribute('alt', 'New description');
img.removeAttribute('loading');

แอตทริบิวต์ data-*

แอตทริบิวต์ data-* แบบกำหนดเองใช้เก็บข้อมูลเพิ่มเติมไว้บนองค์ประกอบโดยไม่กระทบ DOM เข้าถึงแอตทริบิวต์เหล่านี้ผ่าน element.dataset ในรูปแบบ camelCase

<div id="card" data-user-id="42" data-role="admin"></div>

const card = document.querySelector('#card');
console.log(card.dataset.userId); // '42'
console.log(card.dataset.role);   // 'admin'
card.dataset.status = 'active';   // sets data-status

พร็อพเพอร์ตี style

element.style.propertyName ใช้กำหนดสไตล์แบบอินไลน์ ให้ใช้ camelCase กับพร็อพเพอร์ตีที่มีขีดกลาง ควรสลับ class ของ CSS แทนการกำหนดสไตล์แบบอินไลน์ เพราะ class จะเก็บสไตล์ไว้ในไฟล์ CSS ซึ่งเป็นตำแหน่งที่เหมาะสม

element.style.backgroundColor = '#e2e8f0'; // camelCase
element.style.marginTop = '16px';
element.style.display = 'none';

// Reset inline style:
element.style.removeProperty('background-color');

การอ่านสไตล์ที่คำนวณแล้ว

getComputedStyle(element) คืนค่าสไตล์ที่ถูกใช้จริงหลังผ่านลำดับความสำคัญของ CSS ไม่ใช่แค่สไตล์แบบอินไลน์ ใช้เพื่ออ่านสไตล์ที่กำหนดโดย class ของ CSS หรือค่าเริ่มต้นของเบราว์เซอร์

const el = document.querySelector('.card');
const styles = getComputedStyle(el);
console.log(styles.fontSize);     // '16px'
console.log(styles.display);      // 'flex'

การแก้ไขแท็ก title และ meta

ชื่อเอกสาร (แท็บเบราว์เซอร์) สามารถเปลี่ยนได้ทุกเมื่อด้วย document.title = 'New Title' สำหรับแอปแบบหน้าเดียว วิธีนี้ช่วยให้ผู้ใช้ได้รับประสบการณ์ที่ดีขึ้นเมื่อนำทางระหว่างมุมมองต่าง ๆ

// Update tab title on route change:
document.title = `${pageName} | MyApp`;

scrollIntoView()

element.scrollIntoView({ behavior: 'smooth' }) จะเลื่อนหน้าอย่างนุ่มนวลจนองค์ประกอบปรากฏในมุมมอง เหมาะอย่างยิ่งสำหรับการนำทางแบบเลื่อนไปยังส่วนต่าง ๆ และการเน้นข้อผิดพลาดในการตรวจสอบแบบฟอร์ม

document.querySelector('#pricing').scrollIntoView({ behavior: 'smooth', block: 'start' });

ตรวจสอบอย่างรวดเร็ว

ควรใช้พร็อพเพอร์ตีใดเพื่อแสดงข้อความที่ผู้ใช้ป้อนใน DOM อย่างปลอดภัยโดยไม่มีความเสี่ยงจาก XSS?

ทบทวน: การแก้ไข DOM

textContent ใช้กำหนดข้อความธรรมดาอย่างปลอดภัย innerHTML ใช้กำหนด HTML แต่อันตรายเมื่อใช้กับ input ของผู้ใช้ classList.add/remove/toggle ใช้จัดการ class ของ CSS ได้อย่างเป็นระเบียบ setAttribute/dataset ใช้จัดการแอตทริบิวต์ HTML ควรสลับ class แทนการใช้สไตล์แบบอินไลน์ getComputedStyle ใช้อ่านสไตล์ที่ถูกใช้จริงในขั้นสุดท้าย

คำถามที่พบบ่อย

บทเรียน “การเปลี่ยนเนื้อหา: textContent innerHTML classList” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การเปลี่ยนเนื้อหา: textContent innerHTML classList” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเปลี่ยนเนื้อหา: textContent innerHTML classList”

อ่านและปรับปรุงเนื้อหาข้อความขององค์ประกอบ แทรก HTML และสลับ เพิ่ม หรือลบคลาส CSS ด้วยโปรแกรม คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “การเปลี่ยนเนื้อหา: textContent innerHTML classList” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม

ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. querySelector และ querySelectorAll
  2. addEventListener และออบเจ็กต์เหตุการณ์
  3. การเปลี่ยนเนื้อหา: textContent innerHTML classList
  4. การสร้างและต่อท้ายองค์ประกอบ
← กลับไปที่ Frontend Academy