ما هو HTML DOM؟
HTML DOM هو نموذج كائن لـ HTML . تحدد:
- عناصر HTML ككائنات
- خصائص جميع عناصر HTML
- طرق لجميع عناصر HTML
- الأحداث لجميع عناصر HTML
HTML DOM هي واجهة برمجة تطبيقات (واجهة برمجة) لجافا سكريبت :
- يمكن لـ JavaScript إضافة / تغيير / إزالة عناصر HTML
- يمكن لـ JavaScript إضافة / تغيير / إزالة سمات HTML
- يمكن لـ JavaScript إضافة / تغيير / إزالة أنماط CSS
- يمكن أن يتفاعل JavaScript مع أحداث HTML
- يمكن لـ JavaScript إضافة / تغيير / إزالة أحداث HTML
HTML DOM (نموذج كائن المستند)
عندما يتم تحميل صفحة ويب ، يقوم المستعرض بإنشاء ملف D ocument O bject M للصفحة.
تم إنشاء نموذج HTML DOM كشجرة من الكائنات :
شجرة كائنات HTML DOM
البحث عن عناصر HTML
عندما تريد الوصول إلى عناصر HTML باستخدام JavaScript ، عليك أن تجد العناصر أولاً.
هناك عدة طرق للقيام بذلك:
- البحث عن عناصر HTML عن طريق المعرف
- البحث عن عناصر HTML عن طريق اسم العلامة
- البحث عن عناصر HTML حسب اسم الفئة
- البحث عن عناصر HTML بواسطة محددات CSS
- البحث عن عناصر HTML من خلال مجموعات كائن HTML
البحث عن عنصر HTML بالمعرف
أسهل طريقة للعثور على عنصر HTML في DOM ، هي باستخدام معرف العنصر.
يجد هذا المثال العنصر بالمعرف = "مقدمة":
مثال
var myElement = document.getElementById("intro");
إذا تم العثور على العنصر ، فإن الطريقة ستعيد العنصر ككائن (في myElement).
إذا لم يتم العثور على العنصر ، فسيحتوي myElement على قيمة خالية.
البحث عن عناصر HTML عن طريق اسم العلامة
يجد هذا المثال جميع عناصر <p>:
مثال
var x = document.getElementsByTagName("p");
يجد هذا المثال العنصر بالمعرف = "main" ، ثم يعثر على جميع عناصر <p> داخل "main":
مثال
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
البحث عن عناصر HTML حسب اسم الفئة
إذا كنت تريد البحث عن جميع عناصر HTML بنفس اسم الفئة ، فاستخدم getElementsByClassName ().
يعرض هذا المثال قائمة بجميع العناصر مع class = "intro".
مثال
var x = document.getElementsByClassName("intro");
لا يعمل البحث عن العناصر حسب اسم الفئة في Internet Explorer 8 والإصدارات السابقة.
البحث عن عناصر HTML بواسطة CSS Selectors
إذا كنت تريد العثور على جميع عناصر HTML التي تتطابق مع محدد CSS محدد (المعرف ، وأسماء الفئات ، والأنواع ، والسمات ، وقيم السمات ، وما إلى ذلك) ، فاستخدم طريقة querySelectorAll ().
يعرض هذا المثال قائمة بكافة عناصر <p> مع class = "intro".
مثال
var x = document.querySelectorAll("p.intro");
لا يعمل أسلوب querySelectorAll () في Internet Explorer 8 والإصدارات السابقة.
البحث عن عناصر HTML من خلال مجموعات كائنات HTML
يمكن الوصول إلى مجموعات كائنات HTML أيضًا:
دروس HTML DOM
دروس HTMLDOM كاملة
كانت هذه مقدمة قصيرة عن HTMLDOM.
للحصول على برنامج تعليمي كامل لـ HTMLDOM ، انتقل إلى W3Schools HTMLDOM Tutorial .