نموذج كائن المستند (DOM) هو التمثيل الهيكلي لمستند HTML. DOM عبارة عن شجرة من العقد التي ينشئها المتصفح لكل صفحة ويب على الإنترنت.

DOM هو كائن المنحى. لكل عنصر في DOM مجموعته الخاصة من السمات والطرق التي يمكنك الوصول إليها باستخدام JavaScript.

في هذه المقالة التعليمية ، ستتعلم كيفية استخدام وظائف محدد DOM للوصول إلى عناصر صفحة الويب.

كيفية الوصول إلى عناصر DOM

يمكنك الوصول إلى عنصر DOM ذي المستوى الأعلى لصفحة ويب عبر كائن المستند العام. على سبيل المثال ، إذا كان لديك صفحة ويب مثل ما يلي:

مرحبا


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat؟
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint Persiciatis quos rem a، atque veniam.




عن


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat؟
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint Persiciatis quos rem a، atque veniam.




مقالات



المادة العنوان الأول


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat؟





instagram viewer

 Quae iusto non eligendi hic accusamus itaque ut in delectus sint Persiciatis quos rem a، atque veniam.


 اقرأ أكثر 





المادة العنوان الثاني


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat؟
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint Persiciatis quos rem a، atque veniam.


 اقرأ أكثر 





المادة العنوان الثالث


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat؟
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint Persiciatis quos rem a، atque veniam.


 اقرأ أكثر 





المادة العنوان الرابع


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat؟
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint Persiciatis quos rem a، atque veniam.


 اقرأ أكثر 

الكتابة وثيقة في وحدة تحكم المستعرض لديك والضغط على مفتاح الإدخال سينتج النتيجة التالية:

الإخراج في وحدة التحكم الخاصة بك تفاعلي. يمكنك النقر فوق رأس و الجسم عناصر لتوسيعها. سيؤدي القيام بذلك إلى الإخراج التالي:

كل عنصر قسم في العلامة قابلة للتوسيع أيضًا. اعتمادًا على بنية صفحة الويب ، ستستمر العناصر في التوسع للكشف عن المزيد من العناصر. يجب أن يمنحك هذا فهمًا أوضح لبنية DOM.

متعلق ب: البطل الخفي للمواقع: فهم DOM

كائن المستند له خاصية خاصة ، الجسم، التي تمثل عنصر الجسم. لذلك ، للوصول إلى عنصر الجسم ، يمكنك كتابة ما يلي في وحدة التحكم:

وثيقة

سينتج هذا الناتج التالي:

ولكن هذا هو بقدر ما يمكنك الذهاب باستخدام خصائص الكائن. كل صفحة لها رأس وجسم ولكنها فريدة من نوعها. حتى الكتابة الوثيقة. الجسم أو أي شيء مشابه لن يعمل كما تريد. بدلاً من ذلك ، هناك طرق يمكنك الاتصال بها على كائن المستند للوصول إلى عناصر محددة.

ما هي محددات عنصر DOM؟

محددات عنصر DOM هي مجموعة من طرق JavaScript التي يمكنك استخدامها على كائن المستند للوصول إلى العناصر الموجودة في صفحة الويب. محددات عنصر DOM لها فئتان - محددات مفردة ومتعددة.

تعمل هذه الوظائف بطريقة مشابهة لمحددات CSS. إنها تسمح لك باسترداد العناصر بناءً على اسم العلامة الخاصة بهم ، أو سمات معرفهم وفئتهم. يمكنك أيضًا جلب العناصر باستخدام أي محدد CSS.

متعلق ب: كيفية استهداف جزء من صفحة ويب باستخدام محددات CSS

محددات العنصر الفردي هي:

• getElementById ()
• محدد الاستعلام ()

محددات العناصر المتعددة هي:

• getElementsByTagName ()
• getElementsByClassName ()
• الاستعلاممحدد الكل ()

سيعتمد محدد عنصر DOM الذي تستخدمه على العنصر (العناصر) الذي تحاول الوصول إليه.

استخدام محددات عنصر DOM واحد

سترى في الغالب المحددات داخل تطبيقات جافا سكريبت. لذا ، فلنبتعد عن وحدة التحكم. قم بإنشاء ملف JavaScript واربطه بملف HTML الخاص بك باستخدام علامة البرنامج النصي التالية:

حيث تكون قيمة src هي اسم ملف JavaScript الخاص بك. ضع علامة البرنامج النصي هذه قبل علامة إغلاق النص مباشرةً ، .

ال getElementById () توفر طريقة الوصول إلى عنصر واحد على صفحة ويب باستخدام قيمة المعرف الخاص به. في مستند HTML أعلاه ، توجد عدة عناصر بمعرفات. لاستهداف شعبة عنصر مع معرف "article-3" يمكنك إضافة الشفرة التالية إلى ملف JavaScript الخاص بك:

القيمة = document.getElementById ('article-3')

الآن عنصر div بامتداد المادة 3 يمكن الوصول إلى المعرف وجميع خصائصه المقابلة من ملف القيمة عامل. يمكنك طباعة ملف القيمة متغير إلى وحدة التحكم باستخدام سطر التعليمات البرمجية التالي:

console.log (القيمة)

سترى اسم الفئة الذي تم تعيينه لعنصر div بالإضافة إلى السمات المهمة الأخرى ، مثل HTML الداخلي.

محدد العنصر الفردي الآخر هو محدد الاستعلام (). هذه الوظيفة أكثر تنوعًا ، حيث يمكنك تمرير أي سلسلة محددات CSS لها. ومع ذلك ، لا يزال بإمكانك استخدامه فقط لتحديد عنصر واحد في كل مرة.

على سبيل المثال ، هناك فئة واحدة في تنسيق HTML أعلاه - المقالات. أربعة عناصر div تستخدم هذه الفئة ، ولكن محدد الاستعلام () ستعيد الوظيفة فقط العنصر الأول الذي يحتوي على فئة "articles".

باستخدام querySelector () مع فئة

أضف الكود التالي في نهاية البرنامج النصي الخاص بك:

value = document.querySelector ('. articles')
console.log (القيمة)

هذا سيعيد فقط الأول شعبة عنصر مع فئة "مقالات". لاحظ أنك تحدد المحدد بنفس تنسيق محدد CSS. في CSS ، تحدد النقطة البادئة اسم فئة.

باستخدام querySelector () مع معرف

القيمة = document.querySelector ('# article-3')
console.log (القيمة)

سيعيد هذا الرمز العنصر الوحيد الذي يحتوي على معرّف "article-3" ، وهو العنصر الثالث شعبة عنصر مع فئة "مقالات". مرة أخرى ، تستخدم سلسلة المحدد بنية CSS القياسية ، مع ملف # رمز يحدد المعرف.

استخدام محددات عناصر DOM المتعددة

تقوم وظائف المحدد المتبقية باسترداد مجموعات من العناصر. هم انهم getElementsByTagName (), getElementsByClassName ()، و الاستعلاممحدد الكل ().

استخدام getElementsByTagName ()

ال getElementsByTagName () المحدد يجلب مجموعة من العناصر بنفس اسم العلامة. على سبيل المثال ، إذا كنت تريد تحديد كافة ملفات h2 عناصر على صفحة ويب ، يمكنك استخدام الكود التالي:

القيمة = document.getElementsByTagName ('h2')
console.log (القيمة)

هذا يخزن جميع عناصر h2 في مجموعة HTML تسمى القيمة.

استخدام getElementsByClassName ()

ال getElementsByClassName () يُرجع المحدد مجموعة من العناصر بنفس اسم الفئة.

value = document.getElementsByClassName ('articles')
console.log (القيمة)

سيؤدي إدخال الشفرة أعلاه في ملف JavaScript إلى إرجاع عناصر div الأربعة باسم فئة "articles" في وحدة تحكم المتصفح.

باستخدام querySelectorAll ()

ال الاستعلاممحدد الكل () تقوم الطريقة بإرجاع قائمة العقدة لجميع العناصر التي تطابق المحدد المحدد. للوصول إلى جميع عناصر الفقرة في قسم المدونة ، يمكنك استخدام الكود التالي:

value = document.querySelectorAll ('# blog p')
console.log (القيمة)

يمكنك أيضًا تضمين عدة محددات في السلسلة ، مع فصل كل منها بفاصلة ، تمامًا كما في CSS:

القيمة = document.querySelectorAll ('h2، .articles')
console.log (القيمة)

استخدم محددات DOM لإنشاء صفحات ويب ديناميكية

في هذه المرحلة ، يجب أن يكون لديك فهم واضح لـ DOM وكيف يعمل. يجب أن تعرف أيضًا المحددات الفردية والمتعددة ، وكذلك كيفية استخدامها.

ومع ذلك ، فإن الوصول إلى عناصر HTML ليس سوى الخطوة الأولى فيما يمكنك القيام به باستخدام محددات DOM. ستقطع محددات DOM شوطًا طويلاً في مساعدتك على تطوير الجوانب الوظيفية لموقعك على الويب ، مثل التعامل مع أحداث onclick و onscroll.

قاديشا كين (تم نشر 38 مقالة)

قاديشا كين مطور برامج متكامل وكاتب تقني / تقني. لديها قدرة مميزة على تبسيط بعض المفاهيم التكنولوجية الأكثر تعقيدًا ؛ إنتاج مادة يمكن لأي مبتدئ في مجال التكنولوجيا فهمها بسهولة. إنها شغوفة بالكتابة وتطوير البرامج الشيقة والسفر حول العالم (من خلال الأفلام الوثائقية).

المزيد من Kadeisha Kean