การทำงานกับวัตถุเอกสาร (DOM) ใน TypeScript

การทำงานกับ Document Object Model (DOM) ใน TypeScript เป็นส่วนสำคัญในการจัดการและปรับแต่งหน้าเว็บไซต์ของเรา โดย DOM เป็นโครงสร้างที่แสดงโครงสร้างของเอกสาร HTML หรือ XML และให้เราสามารถเข้าถึงและแก้ไขอิลิเมนต์บนหน้าเว็บได้

นี่คือตัวอย่างการใช้งาน DOM ใน TypeScript:

Copycopy code to clipboard
// การเข้าถึงอิลิเมนต์ด้วย ID
const element = document.getElementById('myElement');

// การเข้าถึงและแก้ไขเนื้อหาของอิลิเมนต์
element.innerHTML = 'สวัสดี, TypeScript!';

// การเพิ่มอิลิเมนต์ลงในอิลิเมนต์หลัก
const newElement = document.createElement('div');
newElement.innerHTML = 'นี่คืออิลิเมนต์ใหม่';
element.appendChild(newElement);

// การลบอิลิเมนต์
element.removeChild(newElement);

// การเปลี่ยนแปลงลักษณะของอิลิเมนต์
element.style.backgroundColor = 'red';
element.style.fontSize = '20px';

// การตรวจสอบและเพิ่ม/ลบคลาส CSS
element.classList.add('highlight');
element.classList.remove('highlight');

// การใช้งานอิลิเมนต์ที่เป็นส่วนย่อย
const parentElement = document.getElementById('parentElement');
const childElement = parentElement.querySelector('.child');`

ในตัวอย่างข้างต้น เราใช้ document.getElementById เพื่อเข้าถึงอิลิเมนต์โดยใช้ ID และเข้าถึงและแก้ไขเนื้อหาของอิลิเมนต์โดยใช้ innerHTML และ appendChild เพื่อเพิ่มอิลิเมนต์ลงในอิลิเมนต์หลัก ส่วนการลบอิลิเมนต์เราใช้ removeChild

เรายังสามารถเปลี่ยนแปลงลักษณะของอิลิเมนต์ได้ โดยการใช้ style และกำหนดค่าต่าง ๆ เช่น backgroundColor หรือ fontSize

เรายังสามารถตรวจสอบและเพิ่มหรือลบคลาส CSS ได้โดยใช้ classList ซึ่งเราใช้ add เพื่อเพิ่มคลาสและ remove เพื่อลบคลาส

นอกจากนี้ เรายังสามารถใช้ querySelector เพื่อเข้าถึงอิลิเมนต์ที่เป็นส่วนย่อยในอิลิเมนต์หลักได้ ในตัวอย่างนี้เราใช้ .child เพื่อเลือกอิลิเมนต์ที่มีคลาส 'child' ใน parentElement

เมื่อเราทำงานกับ DOM ใน TypeScript เราสามารถใช้เมธอดและคุณสมบัติอื่น ๆ เพื่อเข้าถึงและปรับแต่งอิลิเมนต์ได้อย่างหลากหลาย นอกจากตัวอย่างที่แสดงในโค้ดข้างต้น นี่คือบางเมธอดและคุณสมบัติที่น่าสนใจเพิ่มเติม:

Copycopy code to clipboard
// การเข้าถึงและแก้ไขแอตทริบิวต์ของอิลิเมนต์
element.getAttribute('name');
element.setAttribute('name', 'value');

// การตรวจสอบว่าอิลิเมนต์มีคลาสให้มีหรือไม่
element.classList.contains('className');

// การเปลี่ยนแปลงเนื้อหาของอิลิเมนต์ให้เป็นข้อความพิเศษ (innerText)
element.innerText = 'ข้อความพิเศษ';

// การจัดการกับอิลิเมนต์ที่มีลำดับ
element.previousElementSibling;
element.nextElementSibling;
element.parentElement;
element.children;

// การดักจับเหตุการณ์ (event)
element.addEventListener('click', (event) => {
 // โค้ดที่ทำงานเมื่อมีการคลิกอิลิเมนต์
});`

โดยในตัวอย่างเพิ่มเติมนี้ เราใช้ getAttribute เพื่อเข้าถึงและแก้ไขแอตทริบิวต์ของอิลิเมนต์ และ setAttribute เพื่อกำหนดค่าแอตทริบิวต์ใหม่ ในการตรวจสอบว่าอิลิเมนต์มีคลาสให้มีหรือไม่ เราใช้ classList.contains

นอกจากนี้ยังมีคุณสมบัติอื่น ๆ ที่น่าสนใจ เช่นการเข้าถึงและแก้ไขเนื้อหาของอิลิเมนต์โดยใช้ innerText การจัดการกับอิลิเมนต์ที่มีลำดับ เช่น previousElementSibling, nextElementSibling, parentElement, children และการดักจับเหตุการณ์ (event) ด้วย addEventListener ซึ่งเราสามารถระบุชนิดของเหตุการณ์ที่ต้องการจับได้ เช่น 'click', 'mouseover', 'keydown' เป็นต้น