หากคุณต้องการเป็นนักพัฒนาเว็บ คุณต้องรู้ว่า DOM คืออะไร คุณควรรู้วิธีเลือกองค์ประกอบ DOM ต่างๆ เพื่อให้คุณสามารถอ่านเนื้อหาหรือเปลี่ยนแปลงได้ การสำรวจ DOM จะบอกคุณถึงวิธีการสำรวจ DOM โดยใช้ JavaScript ที่เอกสาร HTML สร้างขึ้น นี่คือคำแนะนำฉบับสมบูรณ์เกี่ยวกับวิธีใช้ JavaScript เพื่อย้ายผ่าน DOM
Document Object Model หรือ DOM เป็นวิธีแบบต้นไม้เพื่อแสดงว่าเอกสาร HTML มีลักษณะอย่างไร ให้ API ที่ให้คุณในฐานะนักพัฒนาเว็บ ใช้ JavaScript เพื่อโต้ตอบกับเว็บไซต์ได้ แต่ละส่วนของ DOM เรียกว่า”โหนด”DOM เป็นวิธีเดียวที่จะเปลี่ยนโครงสร้าง เนื้อหา และสไตล์ของเอกสาร HTML
การข้ามผ่าน DOM หรือที่เรียกว่าการเดินหรือการนำทาง DOM เป็นกระบวนการของการเลือกโหนดในแผนผัง DOM จากจุดอื่นๆ โหนด คุณอาจทราบวิธีใช้รหัส คลาส หรือชื่อแท็กขององค์ประกอบเพื่อเข้าถึงองค์ประกอบในแผนผัง DOM แล้ว
วิธีสำรวจ DOM โดยใช้ JavaScript
ทำความเข้าใจเกี่ยวกับ DOM Tree
DOM ถูกตั้งค่าเหมือนแผนผัง โดยแต่ละสาขาเป็นโหนด แม้ว่าโหนดจำนวนมากจะหมายถึงองค์ประกอบ HTML แต่โหนดเหล่านี้ยังหมายถึงแอตทริบิวต์และข้อความที่ไปกับองค์ประกอบด้วย ในส่วนต่อไปนี้ คุณจะได้เรียนรู้เพิ่มเติมเกี่ยวกับวิธีการประกอบโครงสร้าง DOM คุณยังได้เรียนรู้เกี่ยวกับส่วนต่างๆ ที่ใช้ในการระบุโหนดและกลุ่มของโหนด ซึ่งเป็นกุญแจสำคัญในการเข้าถึงโหนดด้วยวิธีที่เป็นประโยชน์
วัตถุเอกสารเป็นฐานของโหนดทั้งหมดของ DOM โหนดถูกจัดเรียงเป็นต้นไม้โดยมีโหนดซ้อนอยู่ใต้โหนดอื่น ด้านล่างนี้คือตัวอย่างการแสดง DOM ของหน้าเว็บอย่างง่าย: การทราบการจัดเรียงของโครงสร้าง DOM และส่วนย่อยของต้นไม้จะช่วยให้คุณเข้าใจวิธีการเข้าถึงโหนดเฉพาะเมื่อทำงานกับ JavaScript โดยเฉพาะอย่างยิ่งเมื่อคุณทำงานกับหน้าเว็บที่ซับซ้อนมากขึ้น ส่วนการนำทางส่วนแผนผัง DOM ของคู่มือนี้มีการสนทนาเชิงลึกเพิ่มเติมเกี่ยวกับการย้ายโหนดของแผนผัง DOM
การนำทาง DOM Tree
โดยใช้วิธีการมาตรฐานบนวัตถุ DOM สิ่งเหล่านี้มีมานานแล้วและมีวิธีการเลือกที่ตรงไปตรงมาที่สุด การใช้ตัวเลือกแบบสอบถาม คุณลักษณะเหล่านี้ค่อนข้างใหม่ใน JavaScript มาตรฐานและมีวิธีการเลือกขั้นสูง เหมาะอย่างยิ่งเมื่อคุณต้องการสร้างคิวรีที่ซับซ้อนโดยใช้คำสั่งไม่กี่คำสั่ง
คำถามที่พบบ่อย
คุณสามารถเข้าถึง DOM โดยใช้ JavaScript ได้หรือไม่
JavaScript สามารถใช้แอตทริบิวต์ className ขององค์ประกอบ HTML เพื่อค้นหาและส่งคืนอาร์เรย์ของโหนดที่ตรงกัน getElementByClassName เป็นฟังก์ชันในตัวสำหรับการดำเนินการนี้ ()
จะจัดการ DOM ใน JavaScript ได้อย่างไร
JavaScript สามารถเปลี่ยนองค์ประกอบ HTML ทั้งหมดในหน้า JavaScript สามารถเปลี่ยนแอตทริบิวต์ HTML ทั้งหมดในหน้า JavaScript สามารถเปลี่ยนสไตล์ CSS ทั้งหมดในเพจได้ JavaScript สามารถลบองค์ประกอบและแอตทริบิวต์ HTML ที่มีอยู่ JavaScript สามารถเพิ่มองค์ประกอบ HTML และแอตทริบิวต์ใหม่
ฉันจะเข้าถึง DOM ของเว็บไซต์ได้อย่างไร
เลื่อนเคอร์เซอร์ไปที่แผงองค์ประกอบ กด Control + F หรือ Command + F (Mac) แถบค้นหาจะเปิดขึ้นที่ด้านล่างของ DOM Tree Type The Moon เป็นนายหญิงที่ห้าวหาญ ประโยคสุดท้ายถูกเน้นใน DOM Tree