การใช้งาน DOM Manipulation

ในบทที่แล้ว เราได้เรียนรู้เกี่ยวกับ Math Object ซึ่งช่วยให้เราจัดการกับตัวเลขและการคำนวณต่างๆ ได้อย่างมีประสิทธิภาพ ในบทนี้ เราจะมาสำรวจอีกหนึ่งความสามารถที่สำคัญของ JavaScript ซึ่งก็คือการ DOM (Document Object Model) Manipulation หรือการปรับเปลี่ยนโครงสร้าง HTML ของหน้าเว็บผ่าน JavaScript นั่นเอง

DOM คือโครงสร้างที่แสดงถึงหน้าเว็บ HTML ในรูปแบบของ Object tree ทำให้เราสามารถเข้าถึงและเปลี่ยนแปลงองค์ประกอบต่างๆ บนหน้าเว็บได้ด้วย JavaScript ไม่ว่าจะเป็นการเพิ่มข้อความ, เปลี่ยนรูปภาพ, หรือแม้กระทั่งสร้าง elements ใหม่ทั้งหมด การเข้าใจ DOM Manipulation จึงเป็นสิ่งจำเป็นสำหรับนักพัฒนาเว็บทุกคน

การเลือก Elements ด้วย `querySelector`

ก่อนที่เราจะสามารถเปลี่ยนแปลง elements ใดๆ ได้ เราจำเป็นต้องเลือก elements นั้นๆ ก่อน ซึ่ง JavaScript มีหลายวิธีในการเลือก elements แต่ querySelector และ querySelectorAll เป็นวิธีที่ได้รับความนิยมมากที่สุด เนื่องจากมีความยืดหยุ่นและใช้งานง่าย

querySelector จะเลือก elements แรกที่ตรงกับ CSS selector ที่เรากำหนด ส่วน querySelectorAll จะเลือก elements ทั้งหมดที่ตรงกับ CSS selector นั้นๆ และคืนค่าเป็น NodeList (คล้าย Array)

// เลือก element ที่มี id เป็น "myElement"
const myElement = document.querySelector('#myElement');

// เลือก element แรกที่อยู่ใน class "myClass"
const firstElement = document.querySelector('.myClass');

// เลือก elements ทั้งหมดที่อยู่ใน class "myClass"
const allElements = document.querySelectorAll('.myClass');

// เลือก element p ที่อยู่ภายใน div ที่มี id เป็น "container"
const paragraphInContainer = document.querySelector('#container p');

กรณีใช้งานจริง: สมมติว่าเรามี HTML code ดังนี้:

<div id="container">
  <p class="myClass">Paragraph 1</p>
  <p class="myClass">Paragraph 2</p>
</div>

เราสามารถใช้ querySelector และ querySelectorAll เพื่อเลือก paragraph elements ได้ดังนี้:

const container = document.querySelector('#container');
const firstParagraph = container.querySelector('.myClass'); // เลือก Paragraph 1
const allParagraphs = container.querySelectorAll('.myClass'); // เลือกทั้ง Paragraph 1 และ Paragraph 2

ข้อผิดพลาดที่พบบ่อย:

Selector ผิดพลาด: ตรวจสอบให้แน่ใจว่า CSS selector ของคุณถูกต้องและตรงกับ element ที่ต้องการเลือก
Element ยังไม่โหลด: หาก JavaScript code ของคุณทำงานก่อนที่ HTML จะโหลดเสร็จ querySelector อาจคืนค่า null
NodeList ไม่ใช่ Array: querySelectorAll คืนค่า NodeList ซึ่งคล้าย Array แต่ไม่มี methods บางอย่างของ Array (เช่น push)

การเปลี่ยนแปลง Attributes

เมื่อเราเลือก elements ได้แล้ว เราสามารถเปลี่ยนแปลง attributes ต่างๆ ของ elements นั้นได้ เช่น src ของ <img> tag, href ของ <a> tag, หรือ class ของ elements ต่างๆ

เราสามารถใช้ setAttribute เพื่อกำหนดค่า attribute และ getAttribute เพื่ออ่านค่า attribute

// เลือก element รูปภาพ
const image = document.querySelector('#myImage');

// เปลี่ยน attribute src
image.setAttribute('src', 'new-image.jpg');

// เปลี่ยน attribute alt
image.setAttribute('alt', 'รูปภาพใหม่');

// อ่านค่า attribute alt
const altText = image.getAttribute('alt');
console.log(altText); // Output: รูปภาพใหม่

นอกจากนี้ เรายังสามารถเข้าถึง attributes บางอย่างได้โดยตรงผ่าน property ของ element เช่น element.src, element.href, หรือ element.className

// เลือก element ลิงก์
const link = document.querySelector('#myLink');

// เปลี่ยน attribute href
link.href = 'https://www.example.com';

// เปลี่ยน attribute class
link.className = 'new-class';

// อ่านค่า attribute href
const linkURL = link.href;
console.log(linkURL); // Output: https://www.example.com

กรณีใช้งานจริง: การเปลี่ยนรูปภาพเมื่อผู้ใช้คลิกปุ่ม:

<img id="myImage" src="default-image.jpg" alt="รูปภาพเริ่มต้น">
<button id="changeButton">เปลี่ยนรูปภาพ</button>

<script>
  const image = document.querySelector('#myImage');
  const button = document.querySelector('#changeButton');

  button.addEventListener('click', () => {
    image.src = 'new-image.jpg';
    image.alt = 'รูปภาพใหม่';
  });
</script>

ข้อผิดพลาดที่พบบ่อย:

ชื่อ attribute ผิด: ตรวจสอบให้แน่ใจว่าคุณใช้ชื่อ attribute ที่ถูกต้อง (เช่น className แทน class ใน JavaScript)
การเปลี่ยนแปลงไม่แสดงผล: หากการเปลี่ยนแปลง attribute ไม่แสดงผลบนหน้าเว็บ ตรวจสอบให้แน่ใจว่า JavaScript code ของคุณทำงานหลังจากที่ element นั้นถูกโหลด

การสร้างและเพิ่ม Elements

DOM Manipulation ไม่ได้จำกัดอยู่แค่การเปลี่ยนแปลง elements ที่มีอยู่แล้ว เรายังสามารถสร้าง elements ใหม่และเพิ่มเข้าไปใน DOM ได้อีกด้วย

เราสามารถใช้ document.createElement เพื่อสร้าง elements ใหม่, document.createTextNode เพื่อสร้าง text node, และ appendChild เพื่อเพิ่ม elements เข้าไปใน parent element

// สร้าง element ใหม่
const newParagraph = document.createElement('p');

// สร้าง text node
const text = document.createTextNode('ข้อความใหม่');

// เพิ่ม text node เข้าไปใน paragraph element
newParagraph.appendChild(text);

// เลือก parent element ที่เราต้องการเพิ่ม paragraph
const container = document.querySelector('#container');

// เพิ่ม paragraph element เข้าไปใน container
container.appendChild(newParagraph);

เรายังสามารถใช้ insertBefore เพื่อเพิ่ม element ก่อน element อื่นๆ และ removeChild เพื่อลบ element

// สร้าง element ใหม่
const newHeading = document.createElement('h2');
const headingText = document.createTextNode('หัวข้อใหม่');
newHeading.appendChild(headingText);

// เลือก parent element และ element ที่เราต้องการแทรกก่อน
const container = document.querySelector('#container');
const firstChild = container.firstChild;

// แทรก heading element ก่อน element แรก
container.insertBefore(newHeading, firstChild);

// ลบ paragraph element
const paragraphToRemove = document.querySelector('.myClass');
container.removeChild(paragraphToRemove);

กรณีใช้งานจริง: การสร้างรายการ (list) แบบ dynamic:

<ul id="myList"></ul>

<script>
  const list = document.querySelector('#myList');
  const items = ['Item 1', 'Item 2', 'Item 3'];

  items.forEach(itemText => {
    const listItem = document.createElement('li');
    const textNode = document.createTextNode(itemText);
    listItem.appendChild(textNode);
    list.appendChild(listItem);
  });
</script>

ข้อผิดพลาดที่พบบ่อย:

การเพิ่ม element ผิดตำแหน่ง: ตรวจสอบให้แน่ใจว่าคุณเพิ่ม element เข้าไปใน parent element ที่ถูกต้องและในตำแหน่งที่ต้องการ
การอ้างอิง element ที่ถูกลบไปแล้ว: ระวังการอ้างอิง element ที่ถูกลบไปแล้ว เพราะจะทำให้เกิด error
ประสิทธิภาพ: การเปลี่ยนแปลง DOM บ่อยๆ อาจส่งผลต่อประสิทธิภาพของหน้าเว็บ ควรพิจารณาใช้เทคนิคต่างๆ เพื่อลดจำนวนการเปลี่ยนแปลง DOM (เช่น การใช้ DocumentFragment)

สรุป: ในบทนี้ เราได้เรียนรู้เกี่ยวกับการ DOM Manipulation ซึ่งเป็นเครื่องมือที่สำคัญในการสร้างเว็บแอปพลิเคชันที่ dynamic และ interactive เราได้ครอบคลุมหัวข้อต่างๆ เช่น การเลือก elements, การเปลี่ยนแปลง attributes, และการสร้างและเพิ่ม elements ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการ Event Handling ซึ่งจะช่วยให้เราตอบสนองต่อการกระทำของผู้ใช้ได้

การใช้งาน DOM Manipulation