การทำความเข้าใจกับรายละเอียดโมเดลวัตถุเอกสาร (DOM)

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

การเรียนรู้และทำความเข้าใจเกี่ยวกับ DOM ทำให้ผลลัพธ์ดีขึ้น การเข้าถึงการเปลี่ยนแปลงและการตรวจสอบ องค์ประกอบต่าง ๆ ของหน้า HTML Document Object Model อาจช่วยเราได้ ลดการเพิ่มขึ้นโดยไม่จำเป็นในเวลาดำเนินการสคริปต์.

ต้นไม้โครงสร้างข้อมูล

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

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

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

อาร์เรย์และต้นไม้

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

ในทำนองเดียวกันเมื่อคิดถึงต้นไม้สมมติว่ามันเกี่ยวกับ วางสิ่งที่อยู่ด้านล่างซึ่งกันและกัน, เริ่มต้นด้วยสิ่งเดียวที่ด้านบน.

ตอนนี้คุณอาจใช้เป็ดสายเดี่ยวมาก่อน, ทำให้มันตั้งตรง, และบอกฉันว่า “ตอนนี้เป็ดทุกตัวอยู่ภายใต้เป็ดตัวอื่น”. มันเป็นต้นไม้หรือไม่? มันคือ.

ขึ้นอยู่กับว่าข้อมูลของคุณคืออะไรหรือคุณใช้งานอย่างไรข้อมูลสูงสุดในทรีของคุณ (เรียกว่า ราก) อาจเป็นสิ่งที่เป็น มีความสำคัญยิ่ง หรือบางสิ่งบางอย่างที่นั่นเท่านั้น ล้อมรอบองค์ประกอบอื่น ๆ ไว้ข้างใต้.

ทั้งสองวิธีองค์ประกอบสูงสุดในโครงสร้างข้อมูลทรีทำสิ่งที่สำคัญมาก มันเป็นสถานที่ที่จะ เริ่มค้นหาข้อมูลใด ๆ ที่เราต้องการดึงออกมาจากต้นไม้.

ความหมายของ DOM

DOM ย่อมาจาก แบบจำลองวัตถุเอกสาร. เอกสาร ชี้ไปที่เอกสาร HTML (XML) ซึ่งเป็น แสดงเป็นวัตถุ. (ใน JavaScript ทุกอย่างสามารถแสดงได้เป็นวัตถุเท่านั้น!)

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

ต้นไม้ DOM

ในโค้ด JavaScript เอกสาร HTML คือ แสดงเป็นวัตถุ. ข้อมูลทั้งหมดที่อ่านจากเอกสารนั้นคือ บันทึกเป็นวัตถุด้วย, ซ้อนกันภายใต้ซึ่งกันและกัน (เพราะอย่างที่ฉันพูดก่อนหน้านี้ใน JavaScript ทุกอย่างสามารถแสดงเป็นวัตถุเท่านั้น).

ดังนั้นนี่คือการจัดเรียงทางกายภาพของข้อมูล DOM ในรหัส: ทุกอย่างคือ จัดเป็นวัตถุ. อย่างไรก็ตามมีเหตุผล, มันเป็นต้นไม้.

DOM Parser

ซอฟต์แวร์เบราว์เซอร์ทุกตัวมีโปรแกรมที่เรียกว่า เครื่องมือแยกวิเคราะห์ DOM ที่รับผิดชอบ แยกเอกสาร HTML เป็น DOM.

เบราว์เซอร์อ่านหน้า HTML และเปลี่ยนข้อมูลเป็นวัตถุที่ประกอบเป็น DOM ข้อมูลที่มีอยู่ในวัตถุ DOM เหล่านี้ของ JavaScript ถูกจัดเรียงอย่างมีเหตุผลเป็นโครงสร้างข้อมูลที่เรียกว่าต้นไม้ DOM.

การแยกข้อมูลจาก HTML ไปยังทรี DOM

ใช้ไฟล์ HTML อย่างง่าย มันมี องค์ประกอบราก . ของมัน องค์ประกอบย่อย เป็น และ , แต่ละคนมีองค์ประกอบย่อย ๆ มากมายของตนเอง.

เบราว์เซอร์เป็นหลัก อ่านข้อมูลในเอกสาร HTML, สิ่งที่คล้ายกับสิ่งนี้:

และ, จัดเรียงไว้ในต้นไม้ DOM อย่างนี้:

การเป็นตัวแทนของแต่ละองค์ประกอบ HTML (และเนื้อหาที่เป็นของมัน) ในต้นไม้ DOM เป็นที่รู้จักกันเป็น ปม. โหนดรูท เป็นโหนดของ .

ส่วนต่อประสาน DOM ใน JavaScript ถูกเรียก เอกสาร (เนื่องจากเป็นการแสดงเอกสาร HTML) ดังนั้นเราจึงสามารถเข้าถึงแผนผัง DOM ของเอกสาร HTML ได้ ผ่าน เอกสาร อินเตอร์เฟซ ใน JavaScript.

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

วิธีการออกแบบโหนด

ฉันได้กล่าวก่อนหน้านี้ว่าข้อมูลทุกส่วนจากเอกสาร HTML คือ บันทึกเป็นวัตถุใน JavaScript. ดังนั้นวิธีบันทึกข้อมูลเป็นวัตถุสามารถจัดตรรกะเป็นต้นไม้?

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

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

หลีกเลี่ยงการจัดการ DOM มากเกินไป

เท่าที่เราอาจพบว่าการปรับปรุง DOM มีประโยชน์ (เพื่อที่จะแก้ไขหน้าเว็บ) มีสิ่งต่าง ๆ เช่น หักโหม.

สมมติว่าคุณต้องการอัปเดตสีของ