مетод getElementById() في Document HTML DOM

التعريف والاستخدام

getElementById() يستعيد العنصر الذي يحمل id المحدد.

إذا لم يكن العنصر موجودًا،getElementById() سيقوم هذا الطريقة بالعودة بـ null.

getElementById() هذه هي واحدة من أكثر الطرق استخدامه في HTML DOM. تقريبًا في كل مرة تريد قراءة أو تعديل عنصر HTML، ستستخدمها.

ملاحظة

يجب أن يكون أي id فريدًا، ولكن:

إذا كان هناك عدة عناصر تحتوي على نفس id، getElementById() يعود لأول.

انظر أيضًا:

مетод getElementsByTagName()

مетод getElementsByClassName()

مетод querySelector()

مетод querySelectorAll()

مثال

مثال 1

الحصول على العنصر الذي يحمل id معين:

document.getElementById("demo");

تجربة شخصية

مثال 2

الحصول على العنصر وتغيير لونه:

const myElement = document.getElementById("demo");
myElement.style.color = "red";

تجربة شخصية

مثال 3

أو فقط تغيير لونه:

document.getElementById("demo").style.color = "red";

تجربة شخصية

النصوص

document.getElementById(elementId)

المتغيرات

المتغيرات وصف
elementId مطلوب. القيمة الخاصة بـ id للعنصر.

القيمة التي تعود إليها

نوع وصف
العنصر

العنصر الذي يحتوي على id المحدد.

إذا لم يتم العثور على شيء، فإنها تعود إلى null.

تفاصيل تقنية

getElementById() هذه الطريقة هي طريقة شائعة ومهمة لأنها توفر وسيلة سهلة للحصول على عنصر Element الذي يمثل العنصر المحدد في المستند.

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

ملاحظة:اسم هذه الطريقة يبدأ ب Id بتوافق النهاية، وليس ID، لا تنسى كتابتها بشكل صحيح!

في مستندات HTML، يتم دائمًا استرجاع الخاصية التي تحتوي على id المحدد. HTMLDocument.getElementByName() الطريقة، بناءً على القيمة في خاصية الاسم الخاصة بها لتحديد العناصر HTML.

في مستندات XML، يتم استخدام هذه الطريقة باستخدام أي خاصية من النوع id لتحديد العنصر، بغض النظر عن اسم هذه الخاصية. إذا كان نوع الخاصية غير معروف (مثل ما إذا كان معالج XML تجاهل أو لم يتم تحديد DTD للوثيقة)، فإن هذه الطريقة تعود دائماً nullفي جافا سكربت على الجهاز، هذه الطريقة ليست تستخدم غالباً مع مستندات XML. في الواقع،getElementById() تم تعريف هذا الطريقة في البداية كجزء من واجهة HTMLDocument، ولكن تم نقلها إلى واجهة Document في المستوى الثاني من DOM.

دعم المتصفح

document.getElementById() هي خاصية مستوى DOM 2 (2001).

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

كروم إي إي إدج فايرفوكس سفاري أوبرا
كروم إي إي إدج فايرفوكس سفاري أوبرا
دعم 9-11 دعم دعم دعم دعم

الصفحات ذات الصلة

دليل تعليمات CSS:نحوية CSS

دليل مرجع CSS:محدد #id في CSS

دليل مرجع HTML DOM:خصائص id الخاص بـ HTML DOM

دليل مرجع HTML DOM:مفهوم Style في HTML DOM