Javascript DOM คืออะไร

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

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

เราสามารถจัดการเนื้อหาหรือการจัดสไตล์ของหน้าได้ด้วยการเข้ารหัสในคอนโซล

DOM เองเป็นโครงสร้างข้อมูลแบบทรีที่มีองค์ประกอบพาเรนต์และองค์ประกอบย่อยที่ซ้อนกัน องค์ประกอบที่ไม่มีลูกเรียกว่า 'ใบไม้' ขณะตรวจสอบหน้า คุณจะเห็นองค์ประกอบ head node ของ tree ของเราเป็นเอกสาร จากนั้น html tag ของเรา แล้วก็ head tag ซึ่งมีสคริปต์และชื่อของเรา โดยแยกออกเป็นต้นไม้เดี่ยว นอกจากนี้เรายังสามารถเห็นแท็กร่างกายของเราซึ่งแยกจากแท็กส่วนหัวและแยกออกเป็นต้นไม้ต้นอื่นที่มีองค์ประกอบต่างกัน ด้านล่างนี้เป็นตัวอย่างขององค์ประกอบที่ใช้แทนโฮมเพจของ Career Karma

สังเกตว่าส่วนด้านขวาของหน้าแรกได้รับการเน้นอย่างไรเมื่อวางเมาส์เหนือองค์ประกอบย่อยขององค์ประกอบ div ของแท็ก body ในบทความนี้ เราจะพูดถึงวิธีการเลือกองค์ประกอบใน DOM เพื่อให้สามารถจัดการได้ในอนาคต

การเลือกองค์ประกอบใน DOM

มีสองวิธีในการเลือกองค์ประกอบใน DOM หนึ่งคือการใช้เมธอด getElements อีกวิธีหนึ่งคือการใช้เมธอด querySelector

เมธอด getElement

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

document.getElementsByTagName(‘p’) :ขอให้สังเกตว่ามีแท็กเจ็ด p อยู่ในหน้าแรกของ Career Karma

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

document.getElementsByClassName(‘hzjqne’) :สิ่งนี้จะส่งคืนคอลเล็กชัน HTML ที่มีองค์ประกอบทั้งหมดที่มีคลาสที่กำหนด

document.getElementById(‘__NEXT_DATA__’) :การรับองค์ประกอบด้วย id จะส่งคืนองค์ประกอบที่ตรงกันในคอนโซล เนื่องจากชื่อรหัสต้องไม่ซ้ำกัน จึงไม่ควรส่งคืนคอลเลกชั่นใดๆ

วิธีเลือกแบบสอบถาม

เมื่อใช้วิธีตัวเลือกแบบสอบถาม เราต้องจำไว้ว่าให้ใส่จุดก่อนชื่อคลาสและสัญลักษณ์แฮชหน้าชื่อรหัสเพื่อค้นหาหรือเลือกสิ่งที่เรากำลังมองหา นี่เป็นข้อผิดพลาดที่พบบ่อยที่สุดเมื่อใช้ querySelector() หรือ querySelectorAll() วิธีการ

สังเกตในภาพหน้าจอด้านบน เราได้รับองค์ประกอบที่จัดชั้นเรียนหรือรหัส

ความแตกต่างอีกประการหนึ่งคือเมื่อใช้ querySelectorAll() แทนที่จะเป็นคอลเล็กชัน HTML เราได้รับสิ่งที่เรียกว่า node list ซึ่งเป็นอ็อบเจกต์คล้ายอาร์เรย์

ความแตกต่างระหว่างคอลเล็กชัน HTML และรายการโหนดคือ เราสามารถใช้ .forEach() เมธอดในรายการโหนด เราไม่สามารถทำเช่นนี้กับคอลเล็กชัน HTML หากเราพยายามจัดการ DOM อย่างไรก็ตาม JavaScript มีวิธีที่เราสามารถใช้เพื่อสร้างอาร์เรย์จากวัตถุที่เหมือนอาร์เรย์ เช่น คอลเล็กชัน HTML หรือรายการโหนด วิธีนั้นคือ .from() และมาจากคลาส Array Array.from(arrayLikeObject)

โปรดทราบว่าเราสามารถเลือกองค์ประกอบทั้งหมดด้วย querySelectors ที่เราสามารถทำได้ด้วย getMethods() .

บทสรุป

DOM เป็นอินเทอร์เฟซที่มีประสิทธิภาพซึ่งแสดงถึง HTML ของหน้าเว็บ มีโครงสร้างแบบต้นไม้ที่เราเห็นเมื่อตรวจสอบหน้า เราสามารถใช้วิธีเช่น querySelector() หรือ getMethods เพื่อให้สามารถจัดการกับสิ่งที่เราเห็นด้วย JavaScript