في حالات مختلفة ، يحتاج المبرمجون إلى الحصول على عنصر HTML من خلال سمة الاسم. افترض أن المطور يريد الوصول إلى عنصر تحكم في النموذج ، مثل زر الاختيار أو مربع الاختيار ، من أجل قراءة قيمته أو معالجتها. وبشكل أكثر تحديدًا ، فإن ' اسم 'لتجميع عناصر التحكم في النموذج ذات الصلة ويمكن تقديم نفس الاسم للعديد من عناصر التحكم ، مما يسمح بالوصول إليها كمجموعة واحدة.
سيوضح هذا المنشور طرق استرداد عنصر HTML بالاسم في JavaScript.
كيف تحصل على العناصر حسب الاسم في JavaScript؟
في JavaScript ، يمكنك الوصول إلى عنصر HTML باستخدام سمة اسمه بمساعدة طرق JavaScript المحددة مسبقًا التالية:
-
- طريقة getElementsByName ()
- أسلوب querySelectorAll ()
الطريقة الأولى: الحصول على العنصر حسب الاسم باستخدام أسلوب 'getElementsByName ()'
للحصول على عنصر HTML بالاسم ، استخدم ' getElementsByName () ' طريقة. توفر هذه الطريقة مجموعة من العناصر التي لها سمة الاسم المحددة.
بناء الجملة
يتم استخدام بناء الجملة التالي لأسلوب getElementsByName ():
document.getElementsByName ( 'اسم' )
مثال
أولاً ، قم بإنشاء ستة أزرار. خمسة منهم لديهم ' اسم 'التي يتم استخدامها للحصول على عنصر HTML' زر '. أرفق حدث onclick بالزر السادس الذي سيستدعي ' تطبيق نمط () ”لتصميم الأزرار الخمسة:
< زر اسم = 'btn' > زر زر >< زر اسم = 'btn' > زر زر >
< زر اسم = 'btn' > زر زر >
< زر اسم = 'btn' > زر زر >
< زر اسم = 'btn' > زر زر > < ر > < ر >
< زر onclick = 'applicationStyle ()' > انقر هنا زر >
تحديد وظيفة ' تطبيق نمط () 'التي ستؤدي إلى النقر فوق الزر وتغيير لون خلفية جميع الأزرار. للقيام بذلك ، أولاً ، احصل على كل ' زر 'كمجموعة من خلال استدعاء' getElementsByName () ' طريقة:
const btns = document.getElementsByName ( 'btn' ) ؛
btns.for كل ( btn = > {
btn.style.background = 'طالبا الأزرق' ؛
} ) ؛
}
كما ترى في الإخراج أثناء النقر فوق الزر ، سيتم تغيير لون خلفية الأزرار الخمسة:
الطريقة 2: الحصول على العنصر حسب الاسم باستخدام أسلوب 'querySelectorAll ()'
يمكنك أيضًا استخدام ' الاستعلاممحدد الكل () 'للحصول على العناصر باستخدام' اسم ”في JavaScript. تُستخدم هذه الطريقة لاسترداد جميع العناصر الموجودة في المستند التي تتطابق مع محدد / سمة محددة مثل فئة CSS أو معرف أو اسم.
بناء الجملة
يتم استخدام البنية المحددة للحصول على العنصر بالاسم باستخدام ' querySelectorAll () ' طريقة:
document.querySelectorAll ( '[name = 'n1']' ) ؛
مثال
في المثال التالي ، سنقوم بتغيير لون الأزرار التي يكون اسمها ' BTN1 ':
< شعبة >< اسم الزر = 'btn' > زر زر >
< اسم الزر = 'btn1' > زر زر >
< اسم الزر = 'btn' > زر زر >
< اسم الزر = 'btn1' > زر زر >
< اسم الزر = 'btn' > زر زر > < ر > < ر >
< زر onclick = 'applicationStyle ()' > انقر هنا زر >
شعبة >
في الوظيفة المحددة ، سنقوم باستدعاء الوصول أولاً إلى جميع عناصر الزر التي يكون اسمها ' BTN1 'ثم قم بتطبيق التصميم عليه:
const btns = document.querySelectorAll ( '[name = 'btn1']' ) ؛
btns.for كل ( btn = > {
btn.style.background = 'طالبا الأزرق' ؛
} ) ؛
}
يشير الناتج المعطى إلى أن زرين فقط قد غيرا لون الخلفية واسمهما 'btn1':
ملحوظة: إذا كنت ترغب في الحصول على عنصر واحد ، فمن المستحسن استخدام document.querySelector بدلاً من document.querySelectorAll.
خاتمة
للحصول على عنصر بالاسم أو استرداده ، استخدم ' getElementsByName () ' أو ال ' الاستعلاممحدد الكل () ' طُرق. الطريقة الأكثر شيوعًا والأكثر استخدامًا للحصول على العنصر بالاسم هي طريقة 'getElementsByName ()'. يوضح هذا المنشور طرق استرداد عنصر HTML بالاسم في JavaScript.