JavaScript คือ ตอนที่ 4 : DOM คืออะไร

14พ.ค. 2023 by รับทำแอพ สบายไอที
  1. ทำความเข้าใจกับ Document Object Model (DOM)
  2. การเลือกองค์ประกอบ DOM
  3. การแก้ไของค์ประกอบ DOM
  4. การเพิ่มและการลบองค์ประกอบ (Elements) DOM
  5. การจัดการ (Handling) เหตุการณ์ (Events)
  6. การแพร่กระจาย (Propagation) เหตุการณ์: Bubbling และ Capturing

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

1. ทำความเข้าใจกับ Document Object Model (DOM)

ก่อนที่เราจะดำดิ่งสู่ส่วนการจัดการ สิ่งสำคัญคือต้องเข้าใจว่า DOM คืออะไร พูดง่ายๆ ก็คือ DOM เป็นอินเทอร์เฟซการเขียนโปรแกรมสำหรับเอกสาร HTML และ XML ซึ่งแสดงถึงโครงสร้างของเอกสารในรูปแบบต้นไม้ ช่วยให้นักพัฒนาสามารถปรับเปลี่ยนเนื้อหา โครงสร้าง และสไตล์ของเว็บไซต์หรือแอปได้แบบไดนามิก

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

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

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

  • getElementById(id): วิธีนี้จะเลือกองค์ประกอบตาม ID
  • getElementsByClassName(name): วิธีนี้จะเลือกองค์ประกอบตามชื่อคลาส
  • getElementsByTagName(name): วิธีนี้จะเลือกองค์ประกอบตามชื่อแท็ก
  • querySelector(selector): วิธีนี้ใช้ตัวเลือก CSS เพื่อเลือกองค์ประกอบ
  • querySelectorAll(selector): วิธีนี้ใช้ตัวเลือก CSS เพื่อเลือกหลายองค์ประกอบ

ตัวอย่างเช่น หากคุณกำลังทำแอพมือถือและต้องการเลือกปุ่มที่มี ID “submit” คุณจะใช้ getElementById วิธีการต่อไป นี้

let button = document.getElementById("submit");

3. การแก้ไของค์ประกอบ DOM

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

  • innerHTML: คุณสมบัตินี้ได้รับหรือตั้งค่าเนื้อหา HTML ภายในองค์ประกอบ
  • textContent: คุณสมบัตินี้ได้รับหรือตั้งค่าเนื้อหาข้อความขององค์ประกอบและผู้สืบทอด
  • setAttribute(name, value): วิธีนี้ตั้งค่าของแอตทริบิวต์สำหรับองค์ประกอบ
  • removeAttribute(name): วิธีนี้จะลบแอตทริบิวต์ออกจากองค์ประกอบ
  • style: คุณสมบัตินี้ได้รับหรือตั้งค่ารูปแบบอินไลน์ขององค์ประกอบ

ตัวอย่างเช่น หากคุณกำลังทำเว็บแอพและต้องการเปลี่ยนข้อความภายในปุ่ม “Submit” เป็น “Send” คุณจะใช้คุณสมบัติ textContent:

button.textContent = "Send";

4. การเพิ่มและการลบองค์ประกอบ (Elements) DOM

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

  • createElement(tagName): วิธีนี้จะสร้างองค์ประกอบใหม่
  • appendChild(child): วิธีการนี้จะเพิ่มองค์ประกอบลูกใหม่ที่ส่วนท้ายขององค์ประกอบหลัก
  • insertBefore(newNode, referenceNode): วิธีการนี้แทรกโหนดใหม่ก่อนโหนดอ้างอิงในฐานะลูกของโหนดหลักเฉพาะ
  • removeChild(child): วิธีนี้จะลบโหนดลูกออกจากโหนดหลัก

ตัวอย่างเช่น หากคุณต้องการเพิ่มรายการใหม่ลงในรายการในแอปบนอุปกรณ์เคลื่อนที่ คุณจะใช้ and createElementเมธอดappendChild:

let listItem = document.createElement("li");
listItem.textContent = "New Item";
let list = document.getElementById("myList");
list.appendChild(listItem);

5. การจัดการ (Handling) เหตุการณ์ (Events)

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

  • addEventListener(event, function): วิธีการนี้แนบตัวจัดการเหตุการณ์กับองค์ประกอบโดยไม่ต้องเขียนทับตัวจัดการเหตุการณ์ที่มีอยู่ คุณสามารถเพิ่มตัวจัดการเหตุการณ์จำนวนมากให้กับองค์ประกอบเดียว
  • removeEventListener(event, function): เมธอดนี้จะลบตัวจัดการเหตุการณ์ที่แนบมากับaddEventListener()เมธอด

ตัวอย่างเช่น หากคุณกำลังทำเว็บแอพและต้องการบันทึกข้อความไปยังคอนโซลทุกครั้งที่มีการคลิกปุ่ม คุณจะใช้วิธีการต่อไปนี้addEventListener:

button.addEventListener("click", function() {
    console.log("Button clicked!");
});

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

6. การแพร่กระจาย (Propagation) เหตุการณ์: Bubbling และ Capturing

เมื่อเหตุการณ์เกิดขึ้นกับองค์ประกอบ ขั้นแรกจะเรียกใช้ตัวจัดการในองค์ประกอบนั้น จากนั้นจึงเรียกใช้ตัวจัดการในองค์ประกอบหลัก จากนั้นจึงดำเนินการตามบรรพบุรุษอื่นๆ กระบวนการนี้เรียกว่า “เดือดปุดๆ” เนื่องจากเหตุการณ์จะเดือดปุดๆ จากส่วนในสุดไปยังส่วนนอก นอกจากนี้ยังมีขั้นตอนของการประมวลผลเหตุการณ์ที่เรียกว่า “Capturing” ซึ่งเป็นสิ่งที่ตรงกันข้ามกับการเดือดปุดๆ เหตุการณ์ลงมาที่องค์ประกอบ ยิงตัวจัดการจากด้านนอกสุดไปยังด้านในสุด

การทำความเข้าใจสองขั้นตอนนี้มีความสำคัญอย่างยิ่งในการการทำเว็บ ทำแอพ ที่ซับซ้อน ขึ้นอยู่กับสถานการณ์ คุณอาจต้องการจัดการเหตุการณ์ในระยะ Bubbling, Capturing หรือทั้งสองอย่าง

element.addEventListener(event, handler, phase);

ถ้าphaseเป็นtrueฟังก์ชันจะระบุขั้นตอนการจับภาพ มิฉะนั้นจะหมายถึงขั้นตอนการเดือด

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

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

นี่เป็นเพียงส่วนเล็กของภูเขาน้ำแข็งในการการทำเว็บ ทำแอพ และทำแอพมือถือด้วย JavaScript ยังมีแง่มุมอื่นๆ เช่น การทำงานกับ API การใช้เฟรมเวิร์ก JavaScript เช่น React หรือ Vue และการทำความเข้าใจแนวคิด JavaScript ขั้นสูง ซึ่งทั้งหมดนี้มีส่วนสนับสนุนชุดทักษะของคุณในฐานะนักพัฒนา

อย่างไรก็ตาม การจัดการ DOM เป็นหนึ่งในทักษะพื้นฐานที่นักพัฒนา JavaScript ทุกคนควรรู้ เมื่อคุณเชี่ยวชาญแล้ว คุณจะสามารถทำแอพที่ซับซ้อนและโต้ตอบได้มากขึ้น ไม่ว่าจะเป็นการทำเว็บไซต์ ทำเว็บแอพ หรือทำแอพมือถือ

JavaScript คืออะไร

JavaScript คือ ตอนที่ 3 : ออบเจกต์ (Objects) และอาร์เรย์ (Arrays)
JavaScript คือ ตอนที่ 5 : การเขียนโปรแกรมแบบซิงโครนัส (Synchronous) และอะซิงโครนัส (Asynchronous)