คลาสที่ใช้ในการจัดการ DOM/จัดการเหตุการณ์ใน TypeScript

ในบทความนี้ เราจะอธิบายคลาสที่ใช้ในการจัดการ DOM/จัดการเหตุการณ์ใน TypeScript

คุณสามารถเรียนรู้เกี่ยวกับคลาส Document, คลาส Element และ NodeList รวมถึงคลาสที่เกี่ยวข้องกับเหตุการณ์ต่าง ๆ ผ่านตัวอย่างโค้ด

YouTube Video

คลาสที่ใช้ในการจัดการ DOM/จัดการเหตุการณ์ใน TypeScript

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

ด้านล่างนี้เป็นการอธิบายคลาสและส่วนต่อประสานที่ใช้บ่อยในการจัดการ DOM และการจัดการเหตุการณ์

คลาส/ส่วนต่อประสานหลักที่ใช้ในการจัดการ DOM

Document

Document เป็นอ็อบเจกต์ที่แทนเอกสาร HTML หรือ XML ใช้สำหรับเข้าถึงต้นไม้ DOM หรือตามหาองค์ประกอบ

ตัวอย่างโค้ด

 1// Get the element using getElementById
 2const element = document.getElementById('myElement') as HTMLDivElement | null;
 3if (element) {
 4    element.textContent = 'Hello, TypeScript!';
 5}
 6
 7// querySelector can specify a generic type for more precise typing
 8const button = document.querySelector<HTMLButtonElement>('#myButton');
 9button?.addEventListener('click', () => {
10    console.log('Button clicked!');
11
12    // Create a new element dynamically
13    const newDiv = document.createElement('div');
14    newDiv.textContent = 'New element created!';
15    document.body.appendChild(newDiv);
16});

วิธีการหลัก

• getElementById ใช้ดึงองค์ประกอบที่มีแอตทริบิวต์ id ที่ระบุไว้
• querySelector ใช้ดึงองค์ประกอบโดยใช้ตัวเลือก CSS
• createElement ใช้สร้างองค์ประกอบ HTML ใหม่

คำอธิบายโค้ด

• โค้ดนี้ดึงองค์ประกอบที่มีแอตทริบิวต์ id ด้วย getElementById และเปลี่ยนข้อความของมัน นอกจากนี้ยังดึงปุ่มด้วย querySelector และเพิ่มตัวดักฟังเหตุการณ์คลิก เมื่อมีการคลิก จะสร้างองค์ประกอบ div ใหม่ด้วย createElement และเพิ่มเข้าไปในเนื้อหาหลัก มีการใช้ Generics และ type assertion เพื่อความปลอดภัยของชนิดข้อมูลระหว่างดำเนินการกับ DOM

Element

Element เป็นส่วนต่อประสานที่แทนองค์ประกอบ HTML เดี่ยวๆ ใน DOM มักใช้บ่อยที่สุดเมื่อมีการจัดการ DOM

ตัวอย่างโค้ด

 1// Use querySelector to manipulate element properties
 2const divElement = document.querySelector<HTMLDivElement>('.myClass');
 3if (divElement) {
 4    // Set innerHTML
 5    divElement.innerHTML = '<strong>Hello with innerHTML!</strong>';
 6
 7    // Set textContent
 8    divElement.textContent = 'Hello with textContent!';
 9
10    // Add a new class
11    divElement.classList.add('newClass');
12
13    // Set a custom attribute
14    divElement.setAttribute('data-role', 'content');
15}

คุณสมบัติและเมธอดหลัก

• คุณสมบัติ innerHTML ช่วยให้สามารถกำหนดหรือรับเนื้อหา HTML ขององค์ประกอบได้
• คุณสมบัติ textContent ช่วยให้สามารถกำหนดหรือรับเนื้อหาข้อความขององค์ประกอบได้
• classList เป็นพร็อพเพอร์ตี้สำหรับจัดการคลาส ช่วยให้คุณสามารถเพิ่ม ลบ หรือสลับคลาสได้
• เมธอด setAttribute ใช้กำหนดแอตทริบิวต์ในองค์ประกอบ

คำอธิบายโค้ด

• โค้ดนี้แสดงตัวอย่างการตั้งค่าคอนเทนต์ด้วย innerHTML และ textContent สำหรับองค์ประกอบที่ดึงมาด้วย querySelector การเพิ่มคลาสด้วย classList และการตั้งค่าแอตทริบิวต์ที่กำหนดเองด้วย setAttribute การทำงานต่าง ๆ ถูกดำเนินการอย่างปลอดภัยของชนิดข้อมูลด้วยการใช้ generics

NodeList และ HTMLCollection

NodeList และ HTMLCollection เป็นคอลเลกชันที่บรรจุองค์ประกอบ DOM หลายๆ ตัว ตัวอย่างเช่น querySelectorAll จะคืนค่าเป็น NodeList และ getElementsByClassName จะคืนค่าเป็น HTMLCollection

ตัวอย่างโค้ด

 1// NodeList supports forEach iteration
 2const divs: NodeListOf<HTMLDivElement> = document.querySelectorAll('div');
 3divs.forEach(div => {
 4    div.textContent = 'Updated!';
 5});
 6
 7// HTMLCollection is not directly iterable, convert it to an array
 8const spans: HTMLCollectionOf<HTMLSpanElement> =
 9    document.getElementsByClassName('span-item') as HTMLCollectionOf<HTMLSpanElement>;
10Array.from(spans).forEach(span => {
11    span.textContent = 'Changed!';
12});

• โค้ดนี้แสดงตัวอย่างการจัดการ NodeList โดยตรงด้วย forEach และแปลง HTMLCollection เป็นอาร์เรย์เพื่อวนซ้ำ

คลาส/ส่วนต่อประสานหลักที่ใช้ในการจัดการเหตุการณ์

Event

Event เป็นคลาสพื้นฐานสำหรับเหตุการณ์ทั้งหมดที่เกิดขึ้นใน DOM เหตุการณ์ต่างๆ เช่น การคลิก การป้อนข้อมูล และการโหลดหน้าเว็บ สืบทอดจากคลาส Event

ตัวอย่างโค้ด

 1const form = document.querySelector<HTMLFormElement>('#myForm');
 2form?.addEventListener('submit', (event: Event) => {
 3    // target refers to the element that triggered the event (the form)
 4    const target = event.target as HTMLFormElement;
 5
 6    // type shows the kind of event, e.g., "submit"
 7    console.log(`Event type: ${event.type}`);
 8
 9    // preventDefault disables the default form submission
10    event.preventDefault();
11    console.log('Form submission prevented.');
12});

คุณสมบัติและเมธอดหลัก

• คุณสมบัติ target หมายถึงองค์ประกอบ (EventTarget) ที่เกิดเหตุการณ์ขึ้น
• type หมายถึงประเภทของเหตุการณ์ที่เกิดขึ้น เช่น click หรือ input
• เมธอด preventDefault ยกเลิกการทำงานเริ่มต้นของเหตุการณ์

คำอธิบายโค้ด

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

MouseEvent

MouseEvent แทนเหตุการณ์ที่เกี่ยวข้องกับการใช้งานเมาส์ เหตุการณ์เมาส์ เช่น click และ mousemove ใช้คลาสนี้

ตัวอย่างโค้ด

1const div = document.getElementById('clickArea');
2if (div) {
3    div.addEventListener('click', (event: MouseEvent) => {
4        console.log(`Clicked at: (${event.clientX}, ${event.clientY})`);
5    });
6}

• โค้ดนี้เป็นตัวอย่างการใช้ MouseEvent เพื่อแสดงพิกัดของเมาส์

คุณสมบัติหลัก

• clientX คือพิกัดแกน X ของตำแหน่งเมาส์ภายในหน้า
• clientY คือพิกัดแกน Y ของตำแหน่งเมาส์ภายในหน้า
• button แสดงว่าปุ่มเมาส์ปุ่มใดถูกกด 0 คือปุ่มซ้าย, 1 คือปุ่มกลาง, และ 2 คือปุ่มขวา

KeyboardEvent

KeyboardEvent แทนเหตุการณ์ที่เกี่ยวข้องกับการใช้งานคีย์บอร์ด เหตุการณ์ keydown และ keyup อยู่ในประเภทนี้

ตัวอย่างโค้ด

 1document.addEventListener('keydown', (event: KeyboardEvent) => {
 2    // Show the key name (e.g., "Enter", "a")
 3    console.log(`Key pressed: ${event.key}`);
 4
 5    // Show the physical key code (e.g., "Enter", "KeyA")
 6    console.log(`Key code: ${event.code}`);
 7
 8    // Check if Alt/Ctrl/Shift key was pressed
 9    console.log(`Alt pressed: ${event.altKey}`);
10    console.log(`Ctrl pressed: ${event.ctrlKey}`);
11    console.log(`Shift pressed: ${event.shiftKey}`);
12
13    if (event.key === 'Enter') {
14        console.log('Enter was pressed');
15    }
16});

คุณสมบัติหลัก

• key คือชื่อของปุ่มที่ถูกกด เช่น Enter หรือ a
• code คือรหัสที่สอดคล้องกับปุ่มบนแป้นพิมพ์
• altKey, ctrlKey และ shiftKey เป็นคุณสมบัติที่บ่งชี้ว่าปุ่ม Alt, Ctrl หรือ Shift ถูกกดหรือไม่

คำอธิบายโค้ด

• โค้ดนี้ใช้ KeyboardEvent เพื่อล็อกชื่อของปุ่มที่ถูกกด (key), โค้ดของปุ่ม (code) และตรวจสอบว่ามีการกดปุ่มเสริม (altKey, ctrlKey, shiftKey) ด้วยหรือไม่ นอกจากนี้ยังทำงานพิเศษเมื่อกดปุ่ม Enter

FocusEvent

FocusEvent เกี่ยวข้องกับเหตุการณ์ของการได้หรือสูญเสียโฟกัส เหตุการณ์ focus และ blur อยู่ในประเภทนี้

ตัวอย่างโค้ด

 1const inputElement = document.getElementById('myInput');
 2if (inputElement) {
 3    inputElement.addEventListener('focus', (event: FocusEvent) => {
 4        console.log('Input focused');
 5    });
 6
 7    inputElement.addEventListener('blur', (event: FocusEvent) => {
 8        console.log('Input lost focus');
 9    });
10}

• โค้ดนี้เป็นตัวอย่างการใช้ FocusEvent เพื่อตรวจสอบและบันทึกเมื่อ input field ได้รับหรือสูญเสียโฟกัส

การกำหนดประเภทใน TypeScript

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

การใช้ Event Listener ที่กำหนดประเภท

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

1const input = document.querySelector<HTMLInputElement>('#myInput');
2// Event listener with explicit type annotation for safety
3input?.addEventListener('input', (event: Event) => {
4    // event.target is EventTarget, so it needs to be cast to the correct type
5    const target = event.target as HTMLInputElement;
6    console.log(`Current value: ${target.value}`);
7});

• โค้ดนี้เป็นตัวอย่างการใช้ event listener ที่ระบุชนิดเพื่อจัดการเหตุการณ์ input และดึงรวมถึงบันทึกค่าปัจจุบันของ input field อย่างปลอดภัย

การจัดการเหตุการณ์โดยใช้แบบทั่วไป

การใช้ generics ใน TypeScript ช่วยให้คุณสามารถจัดการเหตุการณ์แบบทั่วไปที่รองรับประเภทเหตุการณ์ต่างๆ ได้

 1// Generic event handler function
 2function handleEvent<T extends Event>(event: T) {
 3    console.log(`Event type: ${event.type}`);
 4    if (event.target instanceof HTMLElement) {
 5        console.log(`Target element: ${event.target.tagName}`);
 6    }
 7}
 8
 9const input = document.querySelector<HTMLInputElement>('#myInput');
10input?.addEventListener('input', handleEvent);

• โค้ดนี้เป็นตัวอย่างของ event handler ทั่วไปโดยใช้ generics เพื่อบันทึกประเภทเหตุการณ์และชื่อแท็กขององค์ประกอบเป้าหมาย

สรุป

ใน TypeScript, ประเภทต่างๆ ถูกใช้งานใน API มาตรฐานของ DOM ระหว่างการจัดการ DOM และการจัดการเหตุการณ์ เพื่อเพิ่มความปลอดภัยและความเข้าใจในโค้ด ด้วยการใช้คลาสต่างๆ เช่น Document และ Element รวมถึงคลาสที่เกี่ยวข้องกับเหตุการณ์ เช่น Event, MouseEvent และ KeyboardEvent สามารถพัฒนาโค้ดที่ปลอดภัยในแง่ของประเภทข้อมูลได้ นอกจากนี้ การใช้ querySelector<T>() หรือ HTMLCollectionOf<T> ยังช่วยให้สามารถจัดการ DOM ได้อย่างปลอดภัยตามชนิดข้อมูล

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

YouTube Video