การจัดการ DOM ใน TypeScript

บทความนี้อธิบายเกี่ยวกับการจัดการ DOM ใน TypeScript

คุณจะได้เรียนรู้วิธีการจัดการองค์ประกอบ DOM รวมถึงการเพิ่มหรือลบองค์ประกอบใน DOM tree ผ่านตัวอย่างโค้ด

YouTube Video

การจัดการ DOM ใน TypeScript

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

ขอแนะนำวิธีพื้นฐานสำหรับการจัดการ DOM ด้วย TypeScript

การรับองค์ประกอบ DOM

ใช้วัตถุ document เพื่อดึงองค์ประกอบ HTML วิธีการต่อไปนี้มักถูกใช้งาน:

1. document.getElementById document.getElementById จะดึงอิลิเมนต์ที่มีแอตทริบิวต์ ID ตามที่ระบุไว้`

1// Type is HTMLElement | null
2const element = document.getElementById('myElement');
3if (element) {
4    console.log(element.innerHTML);
5}

• document.getElementById จะดึงอิลิเมนต์ที่มี ID ตามที่ระบุและอนุญาตให้เข้าถึงเนื้อหาของมันได้หากมีอยู่`

2. document.querySelector document.querySelector จะดึงอิลิเมนต์แรกที่ตรงกับ CSS selector ที่ระบุไว้`

1// Type is Element | null
2const element = document.querySelector('.myClass');
3if (element) {
4    console.log(element.textContent);
5}

• document.querySelector จะดึงอิลิเมนต์แรกที่ตรงกับ CSS selector ที่ระบุ และให้คุณเข้าถึงเนื้อหาของมันถ้ามีอยู่`

3. document.querySelectorAll document.querySelectorAll จะดึงอิลิเมนต์ทั้งหมดที่ตรงกับ CSS selector ที่ระบุไว้`

1// Type is NodeListOf<HTMLDivElement>
2const elements = document.querySelectorAll('div');
3elements.forEach((el) => console.log(el.innerHTML));

• document.querySelectorAll จะดึงอิลิเมนต์ทั้งหมดที่ตรงกับ CSS selector ที่ระบุ และสามารถเข้าถึงเนื้อหาของแต่ละอิลิเมนต์ผ่านการวนลูป`

การกำหนดชนิดข้อมูลขององค์ประกอบ

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

1const inputElement = document.getElementById('myInput') as HTMLInputElement;
2if (inputElement) {
3    console.log(inputElement.value);  // Access the value property of the input element
4}

• คีย์เวิร์ด as เป็นโอเปอเรเตอร์สำหรับยืนยันชนิดข้อมูลใน TypeScript ใช้เพื่อบอกคอมไพเลอร์อย่างชัดเจนว่าให้ถือค่าหนึ่งเป็นชนิดข้อมูลที่ระบุ
• ใน TypeScript คุณสามารถใช้การยืนยันชนิดข้อมูล (type assertion) เพื่อกำหนดให้อิลิเมนต์ที่ดึงมาเป็นชนิดข้อมูลเฉพาะ และเข้าถึงพร็อพเพอร์ตี้หรือเมธอดที่เฉพาะของชนิดนั้นได้

การจัดการ DOM

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

1. การเปลี่ยนข้อความขององค์ประกอบ

   คุณสามารถเปลี่ยนข้อความหรือ HTML ขององค์ประกอบได้โดยใช้ textContent หรือ innerHTML

1const element = document.getElementById('myElement');
2if (element) {
3    element.textContent = 'New Text';  // Set the text content to 'New Text'
4}

• คุณสามารถใช้ textContent หรือ innerHTML ของอิลิเมนต์เพื่อเปลี่ยนข้อความที่แสดงหรือเปลี่ยนเนื้อหา HTML ของมัน

2. การเปลี่ยนสไตล์ขององค์ประกอบ

   คุณสามารถปรับแต่งสไตล์ภายในได้โดยใช้คุณสมบัติ style ขององค์ประกอบ

1const element = document.getElementById('myElement');
2if (element) {
3    element.style.color = 'blue';
4    element.style.fontSize = '20px';
5}

• โค้ดนี้จะดึงอิลิเมนต์ที่ระบุ เปลี่ยนสีข้อความเป็นสีน้ำเงิน และตั้งขนาดฟอนต์เป็น 20px

3. การเปลี่ยนแอตทริบิวต์ขององค์ประกอบ

   หากต้องการเปลี่ยนแอตทริบิวต์ขององค์ประกอบ ให้ใช้ setAttribute

1const link = document.querySelector('a');
2if (link) {
3    link.setAttribute('href', 'https://example.com');
4}

• โค้ดนี้จะเปลี่ยนแอตทริบิวต์ href ของอิลิเมนต์ลิงก์ตัวแรกบนหน้าเป็น https://example.com

4. การจัดการคลาสขององค์ประกอบ

   เพื่อเพิ่มหรือลบคลาสขององค์ประกอบ ให้ใช้ classList

1const element = document.getElementById('myElement');
2if (element) {
3    element.classList.add('active');
4    element.classList.remove('inactive');
5}

• โค้ดนี้จะเพิ่มคลาส active และลบคลาส inactive ออกจากอิลิเมนต์ที่ระบุ

การเพิ่มและลบองค์ประกอบ DOM

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

1. การสร้างและเพิ่มองค์ประกอบใหม่

   ใช้ document.createElement เพื่อสร้างองค์ประกอบใหม่และเพิ่มเข้าไปใน DOM

1const newDiv = document.createElement('div');
2newDiv.textContent = 'New Element';  // Set the text content to 'New Element'
3document.body.appendChild(newDiv);  // Add the new element to the body

• โค้ดนี้จะสร้างอิลิเมนต์ <div> ใหม่ กำหนดข้อความ และเพิ่มเข้าไปใน <body> ของหน้า

2. การลบองค์ประกอบ

   หากต้องการลบองค์ประกอบ ให้ใช้เมธอด removeChild หรือ remove

 1const parentElement = document.getElementById('parentElement');
 2const childElement = document.getElementById('childElement');
 3if (parentElement && childElement) {
 4    parentElement.removeChild(childElement); // Remove the child element
 5}
 6
 7// Alternatively
 8const element = document.getElementById('myElement');
 9if (element) {
10    element.remove();  // Remove the element itself
11}

• โค้ดนี้จะแสดงวิธีลบอิลิเมนต์ลูกที่เฉพาะเจาะจงออกจากพาเรนต์ และลบอิลิเมนต์นั้นเองโดยตรง

การเพิ่มเหตุการณ์ (Event)

ใน TypeScript คุณสามารถเพิ่มตัวฟังเหตุการณ์ (event listener) ให้กับองค์ประกอบเพื่อดำเนินการตามความโต้ตอบของผู้ใช้

1const button = document.getElementById('myButton');
2if (button) {
3    button.addEventListener('click', () => {
4        console.log('Button was clicked');  // Log when the button is clicked
5    });
6}

• โค้ดนี้จะเพิ่ม event listener ที่จะแสดงข้อความในคอนโซลเมื่อปุ่มถูกคลิก
• โดยใช้ addEventListener คุณสามารถฟังและจัดการเหตุการณ์ต่างๆ เช่น คลิก การเคลื่อนเมาส์ และการกดแป้นพิมพ์

ข้อควรระวังสำหรับการจัดการ DOM ใน TypeScript

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

1. การตรวจสอบค่าว่าง (null)

   เนื่องจากองค์ประกอบ DOM อาจไม่มีอยู่จริง ขอแนะนำให้ตรวจสอบค่าว่าง (null) ก่อนการจัดการใน TypeScript

2. การกำหนดชนิดข้อมูลโดยชัดเจน

   เมื่อทำงานกับองค์ประกอบเฉพาะ (เช่น HTMLInputElement) มักจะใช้การประกาศชนิดข้อมูล (as) เพื่อระบุชนิดและใช้งานคุณสมบัติเฉพาะทาง เช่น value

เมื่อคำนึงถึงสิ่งเหล่านี้ การจัดการ DOM ด้วย TypeScript ทำให้คุณสามารถเขียนโค้ดที่ปลอดภัยและคาดการณ์ได้มากขึ้น ด้วยการผสานความยืดหยุ่นของ JavaScript และความปลอดภัยของชนิดข้อมูลใน TypeScript

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video