سيوضح هذا البرنامج التعليمي الطرق المختلفة لاختيار عناصر DOM في JavaScript.
ما هي الطرق المختلفة لتحديد عناصر DOM في JavaScript؟
استخدم الطرق التالية لتحديد عناصر DOM في JavaScript:
- طريقة getElementById ()
- طريقة getElementsByClassName ()
- طريقة getElementsByTagName ()
- طريقة الاستعلام ()
- أسلوب querySelectorAll ()
الطريقة الأولى: حدد عناصر DOM باستخدام طريقة 'getElementById ()'
لاختيار عناصر DOM ، استخدم ' getElementById () 'استنادًا إلى المعرف المخصص للعنصر. تختار هذه الطريقة عنصرًا واحدًا من خلال ' بطاقة تعريف ' يصف. يعطي إشارة إلى العنصر مع المعرف المحدد ويعيد ' باطل 'إذا لم يتم العثور على عنصر مطابق.
بناء الجملة
استخدم الصيغة الموضحة أدناه لطريقة getElementById ():
وثيقة. getElementById ( 'idName' )
هنا ، ' idName 'هو اسم سمة المعرف المخصصة لعنصر.
مثال
في ملف HTML ، أنشئ عنوانين في عنصر div باستخدام ' h4 ' بطاقة شعار. قم بتعيين معرفات لعنصر div وعناصر العناوين 'h4' المسماة ' شعبة ' و ' عنوان '، على التوالى. أضف سمة النمط إلى عنصر div لمحاذاة في المركز. أيضًا ، قم بتعيين فئة ' قسم 'إلى العنوان الثاني الذي يغير لونه:
< شعبة بطاقة تعريف = 'div' أسلوب = 'محاذاة النص: مركز ؛' >< h4 بطاقة تعريف = 'عنوان' > الوصول إلى عناصر DOM باستخدام طرق مختلفة < / h4 >
< h4 فصل = 'قسم' بطاقة تعريف = 'عنوان' > حدد عناصر DOM في JavaScript باستخدام طريقة 'getElementById ()'
< / h4 >
< / شعبة >
الآن ، سوف نحصل على ' شعبة 'باستخدام المعرف المخصص له بمساعدة' getElementById () ' طريقة:
كان getById = وثيقة. getElementById ( 'div' ) ؛طباعة العنصر مقابل المعرف ' شعبة 'على وحدة التحكم:
وحدة التحكم. سجل ( getById ) ؛يمكن ملاحظة أنه تم استرداد عنصر HTML المطلوب بنجاح:
الطريقة 2: حدد عناصر DOM باستخدام طريقة 'getElementsByClassName ()'
يمكنك أيضًا تحديد عنصر DOM باستخدام فئته المخصصة بمساعدة ' getElementsByClassName () ' طريقة. يقوم باختيار قائمة من العناصر من خلال اسم الفئة الخاصة بهم. يقوم بإخراج كائن HTMLCollection مباشر ، كائن يشبه المصفوفة يحتوي على جميع العناصر مع اسم الفئة المحدد.
بناء الجملة
تُستخدم الصيغة التالية للأسلوب 'getElementsByClassName ()':
وثيقة. getElementsByClassName ( “className” )مثال
هنا ، سوف نحصل على العنصر الذي يحتوي على الفئة ' قسم 'وطباعة على وحدة التحكم:
كان getByClass = وثيقة. getElementsByClassName ( 'قسم' ) ؛وحدة التحكم. سجل ( getByClass ) ؛
كما ترى في الإخراج ، تم إرجاع مصفوفة بطول 1 تحتوي على عنصر ' h4 'الذي ينتمي إلى الفصل' قسم ':
الطريقة الثالثة: حدد عناصر DOM باستخدام طريقة 'getElementsByTagName ()'
في حالة عدم وجود معرف أو فئة معينة لعنصر ما ، استخدم ' getElementsByTagName () 'طريقة للحصول على العنصر من خلال اسم العلامة الخاصة بهم. تقوم أيضًا بإرجاع كائن HTMLCollection المباشر ، وهو كائن يشبه المصفوفة يحتوي على جميع العناصر التي لها اسم العلامة المحدد.
بناء الجملة
اتبع بناء الجملة المحدد لاختيار العناصر بناءً على اسم العلامة:
getElementsByTagName ( اسم العلامة )مثال
قم باستدعاء طريقة 'getElementsByTagName ()' بتمرير اسم العلامة ' h4 '. بعد ذلك ، اطبع قائمة العناصر التي تطابق اسم العلامة المحدد على وحدة التحكم:
كان getByTag = وثيقة. getElementsByTagName ( 'h4' ) ؛وحدة التحكم. سجل ( getByTag ) ؛
انتاج |
الطريقة الرابعة: حدد عناصر DOM باستخدام أسلوب 'querySelector ()'
استخدم ال ' محدد الاستعلام () ”للحصول على عنصر DOM. يختار عنصرًا واحدًا يتطابق مع محدد CSS محدد. تقوم بإرجاع أول عنصر مطابق تم العثور عليه في المستند. إذا لم يتم مطابقة أي عنصر ، فإنه يعطي ' باطل '.
بناء الجملة
يتم استخدام الصيغة المذكورة أدناه للأسلوب 'querySelector ()':
وثيقة. الاستعلام ( يصف )هنا ، السمة هي محدد CSS ، مثل معرف أو فئة مثل ' #myId '' .صفي '.
مثال
استدعاء الأسلوب 'querySelector ()' ومرر المعرف ' #عنوان 'للحصول على العناصر التي تحتوي على نفس المعرف:
كان getByquery = وثيقة. الاستعلام ( '#عنوان' ) ؛وحدة التحكم. سجل ( getByquery ) ؛
يعطي العنصر المطابق الأول كناتج:
الطريقة الخامسة: حدد عناصر DOM باستخدام أسلوب 'querySelectorAll ()'
إذا كنت تريد تحديد جميع العناصر التي تحتوي على السمة المحددة (معرف أو فئة) ، فاستخدم ' الاستعلاممحدد الكل () ' طريقة. يختار قائمة بالعناصر التي تطابق محدد CSS محددًا. يعطي كائن NodeList الذي يحتوي على جميع العناصر الموجودة في المستند التي تطابق محدد CSS المحدد.
بناء الجملة
استخدم الصيغة التالية للحصول على قائمة العناصر:
وثيقة. الاستعلام ( يصف )مثال
للحصول على قائمة العنصر المطابق التي تحتوي على المعرف ' عنوان ' مع ال ' الاستعلاممحدد الكل () 'والطباعة على العناصر الموجودة على وحدة التحكم:
كان getByqueryAll = وثيقة. الاستعلام ( '#عنوان' ) ؛وحدة التحكم. سجل ( getByqueryAll ) ؛
انتاج |
هذا كل ما يتعلق بتحديد عناصر DOM في جافا سكريبت.
خاتمة
لتحديد عناصر DOM في JavaScript ، استخدم ' getElementById () '،' getElementsByClassName () '،' getElementsByTagName () '،' محدد الاستعلام () '، أو ال ' الاستعلاممحدد الكل () ' طريقة. توفر هذه الطرق طرقًا مختلفة لاختيار العناصر من DOM بناءً على المعرفات الفريدة أو أسماء الفئات أو أسماء العلامات أو محددات CSS. يوضح هذا البرنامج التعليمي الطرق المختلفة لاختيار عناصر DOM في JavaScript.