مع JavaScript ، يمكنك إعادة بناء مستند HTML بالكامل. يمكنك إضافة أو إزالة أو تغيير أو إعادة تربية العناصر على الصفحة. لتغيير شيء ما على الصفحة ، يحتاج JavaScript إلى الوصول إلى مدخل جميع العناصر في مستند HTML. يتم الحصول على هذا المدخل ، إلى جانب طريقة وسمات عنصر HTML لإضافة أو نقل أو تغيير أو إزالة ، بواسطة نموذج كائن المستند (DOM). في عام 1998 ، أصدرت W3C مواصفات DOM الأولى. تتيح هذه المواصفات الوصول وتشغيل كل عنصر فردي في صفحة HTML. تقوم جميع المتصفحات بتنفيذ هذا المعيار ، وبالتالي يصعب العثور على توافق DOM. يمكن استخدام DOM بواسطة JavaScript لقراءة وتغيير مستندات HTML و XHTML و XML.
ينقسم DOM إلى أجزاء مختلفة (النوى ، XML ، HTML) والمستوى (DOM Level 1/2/3):ندوب الأساس
تحديد مجموعة من المعايير لأي كائن مستند منظم
XML DOM
تحديد مجموعة من المعايير لمستندات XML
HTML DOM
تحديد مجموعة من المعايير لوثائق HTML.
العقدةوفقًا لـ DOM ، فإن كل مكون في مستند HTML هو عقدة.
يتم توفير DOM مثل هذا:
العقد لها علاقة هرمية مع بعضها البعض. تشكل جميع العقد في مستند HTML شجرة مستندات (أو شجرة عقدة). يمثل كل عنصر ، سمة ، نص ، إلخ. في مستند HTML عقدة في الشجرة. تبدأ الشجرة في عقدة المستند ، وتستمر في تمديد الفروع حتى تكون جميع العقد النصية في أدنى مستوى من الشجرة موجودة في كل مكان.
تُظهر الصورة التالية شجرة مستندات (شجرة العقدة):
شجرة الوثيقة (عدد العقد)يرجى الاطلاع على وثيقة HTML التالية:
html ؛ </html>
جميع العقد المذكورة أعلاه لها علاقة مع بعضها البعض. كل عقدة باستثناء عقد المستندات لديها العقد الأصل. على سبيل المثال ، العقد الأصل لـ <Head> و <body> هي <html> العقد ، والعقد الأصل لعقدة النص Hello World! معظم العقد العناصر لها nodes الفرعية. على سبيل المثال ، تحتوي العقدة <head> على node sub -node: <title>. <title> يوجد أيضًا تعليمي Sub -node: Text Node DOM. عندما تشترك العقد في نفس العقدة الأصل ، فهي في نفس الجيل (نفس العقدة). على سبيل المثال ، <H1> و <p> زملائهم ، لأن العقد الأم كلاهما <Body> العقد. يمكن أن يكون للعقد أيضًا ذرية. على سبيل المثال ، جميع العقد النصية هي أحفاد العقد <html> ، والعقدة النصية الأولى هي نسل العقدة <head>. العقد يمكن أن يكون أيضا أسلاف. الجد هو العقدة الأصل للعقدة ، أو العقدة الأصل للعقدة الأصل ، وهلم جرا. على سبيل المثال ، يمكن لجميع العقد النصية استخدام العقد <html> كعقد سلف.