ב-JavaScript, ה' querySelectorAll() השיטה מאחזרת את האלמנט הראשון שמתאים בדיוק לבוררי ה-CSS שצוינו. שיטה זו מתחילה לחצות את עץ ה-DOM כדי לבצע משימה זו. ברגע שהרכיב נמצא, הוא מחיל את המאפיינים המובנים של JavaScript או השיטות המוגדרות בקטע הסקריפט לביצוע משימות מיוחדות. בדרך כלל משתמשים בשיטה זו לבחירת הרכיבים הממוקדים לפי הדרישות. זה מאפשר למשתמשים לבחור את כל האלמנטים התואמים לבורר שצוין או לזה המסוים המוצב באינדקס הנתון.
מדריך זה ממחיש את השימוש בשיטת 'querySelectorAll()' ב-JavaScript.
כיצד להשתמש בשיטת 'querySelectorAll()' ב-JavaScript?
כדי להשתמש ב' querySelectorAll() שיטת ', ציין את בורר ה-CSS כארגומנט שלו. בוררי ה-CSS כוללים 'סוג, מחלקה ומזהה'. אם בורר ה-CSS אינו חוקי, הוא מחזיר שגיאת תחביר, אחרת, הוא מחזיר אובייקט NodeList סטטי כפלט הסטנדרטי שלו.
תחביר
document.querySelectorAll ( בוררי CSS )
בתחביר לעיל, ה-' בוררי CSS ' מתייחסים לכל בוררי ה-CSS התקפים.
בואו נשתמש בתחביר שהוגדר לעיל באופן מעשי.
קוד HTML
סקירה כללית של קוד ה-HTML הנתון:
< h2 מעמד = 'הַדגָמָה' > כותרת ראשונה h2 >< h3 מעמד = 'הַדגָמָה' > כותרת שניה h3 >
< ע מעמד = 'הַדגָמָה' > פסקה ראשונה ע >
< ע מעמד = 'הַדגָמָה' > פסקה שניה ע >
< לַחְצָן בלחיצה = 'jsFunc()' > לחץ כאן ! לַחְצָן >
בשורות הקוד לעיל:
- ה ' ' תג מוסיף כותרת משנה עם המחלקה 'הדגמה'.
- ה ' 'תג מגדיר כותרת משנה שנייה עם אותה מחלקה בשם 'הדגמה'.
- ה ' תגיות 'מטמיעות את הצהרות הפסקה עם אותה מחלקה, כלומר 'הדגמה'.
- ה ' <כפתור> 'תג כולל כפתור חדש עם אירוע עכבר 'onclick' לביצוע הפונקציה 'jsFunc()'.
הערה: קוד ה-HTML המסוים מלווה לאורך מדריך זה.
דוגמה 1: החלת שיטת 'querySelectorAll()' כדי לבחור אלמנטים בעלי אותה מחלקה ולשנות את הצבעים שלהם
דוגמה זו משתמשת בשיטת 'querySelectorAll()' כדי לבחור את כל האלמנטים המשתמשים במחלקה 'demo'.
קוד JavaScript
בואו נסקור את הקוד המצוין להלן:
< תַסרִיט >פוּנקצִיָה jsFunc ( ) {
const list = document.querySelectorAll ( '.הַדגָמָה' ) ;
ל ( לתת אני = 0 ; אני < list.length; i++ ) {
רשימה [ אני ] .style.color = 'כתום אדום' ;
}
}
תַסרִיט >
בשורות הקוד לעיל:
- ה ' jsFunc() הפונקציה מוגדרת.
- בהגדרתו, המשתנה 'רשימה' משתמש ב- ' querySelectorAll() שיטת ' לבחירת כל האלמנטים בעלי המחלקה 'הדגמה'.
- לאחר מכן, ה' ל ' לולאה מאתחלת רשימת צמתים כדי לחזור על כל רכיבי ה-HTML שנמצאו עם המחלקה ' הַדגָמָה ' ולשנות את צבע הטקסט שלהם באמצעות ' סגנון.צבע ' תכונה.
תְפוּקָה
בפלט לעיל, ניתן לראות שצבע הטקסט של האלמנטים הכוללים את אותו שם מחלקה, כלומר 'הדגמה' משתנה בלחיצת הכפתור.
דוגמה 2: החלת שיטת 'querySelectorAll()' לבחירת האלמנטים הספציפיים שנוספו לאינדקס
מלבד כל האלמנטים, המשתמש יכול גם לבחור את האלמנט הספציפי המאונדקס בעל המחלקה 'הדגמה'.
קוד JavaScript
שקול את קוד ה-JavaScript הנתון:
< תַסרִיט >פוּנקצִיָה jsFunc ( ) {
const list = document.querySelectorAll ( 'h2.demo' ) ;
רשימה [ 0 ] .style.color = 'ירוק' ;
}
תַסרִיט >
בקטע הקוד שלמעלה:
- המשתנה 'list' בוחר את האלמנט 'h2' שהמחלקה שלו היא 'demo' בעזרת ה- ' querySelectorAll() ' שיטה.
- לאחר מכן, המשתנה 'רשימה' מציין את האינדקס של אלמנט 'h2' כדי לשנות את צבע הטקסט של אלמנט 'H2' הממוקם באינדקס '0'.
תְפוּקָה
הפלט מראה שלצבע הטקסט של האלמנט 'H2' הממוקם באינדקס אפס, הכיתה 'הדגמה' השתנתה בלחיצת הכפתור.
דוגמה 3: יישום שיטת 'querySelectorAll()' כדי לקבל את מספר האלמנטים בעלי אותה מחלקה
דוגמה זו מאחזרת את מספר האלמנטים בעלי אותה מחלקה באמצעות השיטה 'querySelectorAll()'.
קוד HTML
ראשית, עיין בקוד ה-HTML שהשתנה של 'דוגמה 1':
< ע תְעוּדַת זֶהוּת = 'ל' > ע >
בקוד ה-HTML שצוין לעיל, הוסף פסקה ריקה עם המזהה 'para' בסוף קוד ה-HTML 'דוגמה 1'.
קוד JavaScript
כעת, המשך עם קוד JavaScript:
< תַסרִיט >פוּנקצִיָה jsFunc ( ) {
const nodelist = document.querySelectorAll ( 'h3' ) ;
document.getElementById ( 'ל' ) .innerHTML = nodelist.length;
}
תַסרִיט >
לפי קטע הקוד לעיל:
- הפונקציה 'jsFunc()' בוחרת תחילה את כל האלמנטים '
' באמצעות ' querySelectorAll() ' שיטה.
- לאחר מכן, ה' getElementById() ' השיטה ניגשת לפסקה הריקה שנוספה דרך המזהה שלה 'para' כדי לצרף אותה עם הערך המוחזר של המאפיין 'אורך' שהוחל.
תְפוּקָה
כפי שניתן לראות, הפלט שלמעלה מציג סך הכל '4' אלמנטים התואמים ל'הדגמה' של בורר מחלקות CSS שצוין.
סיכום
ה ' querySelectorAll() ניתן להשתמש בשיטה בקלות על ידי ציון בורר ה-CSS כערך שלו. שיטה זו מתאימה לכל רכיב HTML ובוחרת את אלו התואמים לבורר שצוין. לאחר בחירת האלמנטים, הוא מבצע עליהם את המשימה הנדרשת המוגדרת בסעיף הסקריפט. מדריך זה המחיש בקצרה את השימוש בשיטת 'querySelectorAll()' ב-JavaScript.