במצבים שונים, מתכנתים צריכים לקבל את אלמנט ה-HTML לפי תכונת השם. נניח שהמפתח רוצה לגשת לפקד טופס, כמו לחצן בחירה או תיבת סימון, כדי לקרוא או לתפעל את הערך שלו. ליתר דיוק, ה' שֵׁם תכונה ' משמשת לקיבוץ פקדי טפסים הקשורים וניתן לספק את אותו שם לפקדים רבים, מה שמאפשר לגשת אליהם כקבוצה אחת.
פוסט זה ימחיש את השיטות לאחזור רכיב HTML לפי שם ב-JavaScript.
איך להשיג אלמנטים לפי שם ב-JavaScript?
ב-JavaScript, אתה יכול לגשת לרכיב HTML באמצעות תכונת השם שלו בעזרת שיטות JavaScript המוגדרות מראש הבאות:
-
- getElementsByName() שיטה
- שיטת querySelectorAll()
שיטה 1: קבל אלמנט לפי שם באמצעות שיטת 'getElementsByName()'.
כדי לקבל את רכיב ה-HTML לפי שם, השתמש ב-' getElementsByName() ' שיטה. שיטה זו נותנת אוסף של אלמנטים בעלי תכונת השם שצוינה.
תחביר
התחביר הבא משמש עבור שיטת getElementsByName():
document.getElementsByName ( 'שֵׁם' )
דוגמא
ראשית, צור שישה כפתורים. לחמישה מהם יש ' שֵׁם ' תכונה המשמשת לקבלת רכיב HTML ' לַחְצָן '. צרף את אירוע onclick עם הכפתור השישי שיקרא את ' applicationStyle() ' פונקציה לסגנון חמשת הכפתורים:
< לַחְצָן שֵׁם = 'btn' > לַחְצָן לַחְצָן >< לַחְצָן שֵׁם = 'btn' > לַחְצָן לַחְצָן >
< לַחְצָן שֵׁם = 'btn' > לַחְצָן לַחְצָן >
< לַחְצָן שֵׁם = 'btn' > לַחְצָן לַחְצָן >
< לַחְצָן שֵׁם = 'btn' > לַחְצָן לַחְצָן > < br >< br >
< כפתור לחץ על = 'applyStyle()' > לחץ כאן לַחְצָן >
הגדר פונקציה ' applicationStyle() ” שיפעיל את לחיצת הכפתור וישנה את צבע הרקע של כל הכפתורים. כדי לעשות זאת, ראשית, קבל את כל ' לַחְצָן ' רכיבים כקבוצה על ידי קריאת ' getElementsByName() ' שיטה:
const btns = document.getElementsByName ( 'btn' ) ;
btns.forEach ( btn = > {
btn.style.background = 'כחול צוער' ;
} ) ;
}
כפי שניתן לראות בפלט תוך כדי לחיצה על הכפתור, צבע הרקע של חמשת הכפתורים ישתנה:
שיטה 2: קבל אלמנט לפי שם באמצעות שיטת 'querySelectorAll()'.
אתה יכול גם להשתמש ב' querySelectorAll() ' השיטה לקבלת אלמנטים באמצעות ' שֵׁם ' תכונה ב-JavaScript. שיטה זו משמשת כדי לאחזר את כל האלמנטים במסמך התואמים לבורר/תכונה שצוינו כמו CSS class, id או name.
תחביר
התחביר הנתון משמש לקבלת האלמנט לפי שם באמצעות ' querySelectorAll()' שיטה:
document.querySelectorAll ( '[]' ) ;
דוגמא
בדוגמה הבאה, נשנה את הצבע רק של אותם כפתורים ששמם הוא ' btn1 ”:
< div >< שם הכפתור = 'btn' > לַחְצָן לַחְצָן >
< שם הכפתור = 'btn1' > לַחְצָן לַחְצָן >
< שם הכפתור = 'btn' > לַחְצָן לַחְצָן >
< שם הכפתור = 'btn1' > לַחְצָן לַחְצָן >
< שם הכפתור = 'btn' > לַחְצָן לַחְצָן > < br >< br >
< כפתור לחץ על = 'applyStyle()' > לחץ כאן לַחְצָן >
div >
בפונקציה המוגדרת, נקרא תחילה גישה לכל רכיבי הכפתור ששמם הוא ' btn1 ' ולאחר מכן החל סטיילינג עליו:
const btns = document.querySelectorAll ( '[]' ) ;
btns.forEach ( btn = > {
btn.style.background = 'כחול צוער' ;
} ) ;
}
הפלט הנתון מסמל שרק שני כפתורים שינו את צבע הרקע שלהם ששמו הוא 'btn1':
הערה: אם אתה רוצה לקבל אלמנט בודד, מומלץ להשתמש ב-document.querySelector במקום ב-document.querySelectorAll.
סיכום
לקבלת או אחזור של רכיב לפי שם, השתמש ב-' getElementsByName() ' או ה ' querySelectorAll() ' שיטות. השיטה הנפוצה והיעילה ביותר לקבלת האלמנט לפי שם היא שיטת 'getElementsByName()'. פוסט זה המחיש את השיטות לאחזור רכיב HTML לפי שם ב-JavaScript.