ด้วย JavaScript คุณสามารถสร้างเอกสาร HTML ทั้งหมดขึ้นใหม่ คุณสามารถเพิ่มลบเปลี่ยนหรือจัดเรียงรายการบนหน้า ในการเปลี่ยนบางสิ่งในหน้า JavaScript จำเป็นต้องเข้าถึงทางเข้าสู่องค์ประกอบทั้งหมดในเอกสาร HTML ทางเข้านี้พร้อมกับวิธีการและแอตทริบิวต์ขององค์ประกอบ HTML ที่จะเพิ่มย้ายเปลี่ยนหรือลบได้รับจากโมเดลวัตถุเอกสาร (DOM) ในปี 1998 W3C เปิดตัวข้อกำหนด DOM ระดับแรก ข้อกำหนดนี้อนุญาตให้เข้าถึงและการทำงานของแต่ละองค์ประกอบในหน้า HTML เบราว์เซอร์ทั้งหมดดำเนินการมาตรฐานนี้ดังนั้นความเข้ากันได้ของ DOM จึงหาได้ยาก JavaScript สามารถใช้งาน DOM เพื่ออ่านและเปลี่ยนเอกสาร HTML, XHTML และ XML
DOM แบ่งออกเป็นส่วนต่าง ๆ (คอร์, XML, HTML) และระดับ (ระดับ DOM 1/2/3):แกนหลัก
กำหนดชุดมาตรฐานสำหรับวัตถุเอกสารที่มีโครงสร้างใด ๆ
xml dom
กำหนดชุดมาตรฐานสำหรับเอกสาร XML
html dom
กำหนดชุดมาตรฐานสำหรับเอกสาร HTML
โหนดตาม DOM แต่ละองค์ประกอบในเอกสาร HTML คือโหนด
DOM มีให้เช่นนี้:
โหนดมีความสัมพันธ์แบบลำดับชั้นซึ่งกันและกัน โหนดทั้งหมดในเอกสาร HTML จะสร้างแผนผังเอกสาร (หรือต้นไม้โหนด) แต่ละองค์ประกอบแอตทริบิวต์ข้อความ ฯลฯ ในเอกสาร HTML แสดงถึงโหนดในต้นไม้ ต้นไม้เริ่มต้นที่โหนดเอกสารและมันจะขยายสาขาต่อไปจนกว่าโหนดข้อความทั้งหมดในระดับต่ำสุดของต้นไม้จะอยู่ทุกที่
ภาพต่อไปนี้แสดงแผนผังเอกสาร (ทรีโหนด):
แผนผังเอกสาร (จำนวนโหนด)โปรดดูเอกสาร HTML ต่อไปนี้:
HTML; </html>
โหนดทั้งหมดข้างต้นมีความสัมพันธ์ซึ่งกันและกัน แต่ละโหนดยกเว้นโหนดเอกสารมีโหนดหลัก ตัวอย่างเช่นโหนดหลักของ <head> และ <body> คือ <html> โหนดและโหนดหลักของโหนดข้อความ Hello World! โหนดองค์ประกอบส่วนใหญ่มีไฟล์ย่อย ตัวอย่างเช่นโหนด <head> มีโหนดย่อย: <title> โหนด <title> นอกจากนี้ยังมีบทช่วยสอน DOM Node: Text Node เมื่อโหนดแบ่งปันโหนดพาเรนต์เดียวกันพวกเขาจะเป็นรุ่นเดียวกัน (โหนดเดียวกัน) ตัวอย่างเช่น <H1> และ <p> เป็นเพื่อนของพวกเขาเพราะโหนดหลักของพวกเขาเป็นทั้ง <body> โหนด โหนดยังมีลูกหลาน ตัวอย่างเช่นโหนดข้อความทั้งหมดเป็นลูกหลานของโหนด <html> และโหนดข้อความแรกเป็นลูกหลานของโหนด <head> โหนดยังสามารถมีบรรพบุรุษได้ บรรพบุรุษเป็นโหนดพาเรนต์ของโหนดหรือโหนดพาเรนต์ของโหนดพาเรนต์และอื่น ๆ ตัวอย่างเช่นโหนดข้อความทั้งหมดสามารถใช้โหนด <html> เป็นโหนดก่อนหน้า