השיטה getElementsByClassName() משמשת לבחירה או קבלת האלמנטים דרך ערך שם המחלקה שלהם. שיטת DOM זו מחזירה אובייקט דמוי מערך המורכב מכל האלמנטים בעלי שם המחלקה שצוין. בקריאה למתודה getElementsByClassName() בכל אלמנט מסוים, היא תחפש בכל המסמך ותחזיר רק את האלמנטים התואמים לשם המחלקה שצוין או נתון.
תחביר
var ele=document.getELementsByClassName('name');
כאן, השם הוא טיעון החובה שיועבר. זו המחרוזת שמציינת שם מחלקה בודד או שמות מחלקות מרובים שיתאימו.
דוגמה לשיטת getElementsByClassName()
בואו נסתכל על כמה דוגמאות כדי לדעת ולהבין את היישום המעשי של השיטה.
דוגמא
זהו יישום מחלקה פשוט שמחזיר אובייקט דמוי מערך בעת הפעלת המשתנה x.
<h5>DOM Methods </h5> This is a simple class implementation var x=document.getElementsByClassName('Class'); document.write('On calling x, it will return an arrsy-like object: <br>'+x);
תְפוּקָה:
באופן דומה, אנו יכולים ליישם את שיטת getElementsByClassName() להחזרת אוספים של אלמנטים עבור מחלקות מרובות.
ההבדל בין שיטות getElementsByClassName(), querySelector() ו- querySelectorAll()
getElementsByClassName(): זה מתאים לאלמנטים עם שם המחלקה שצוין, ומחזיר קבוצה של האלמנטים התואמים. האלמנטים המוחזרים הם אוסף HTML חי של אלמנטים. ניתן לעדכן רכיבים חיים אלה עוד יותר אם יבוצעו שינויים כלשהם במודל אובייקט המסמך.
querySelector(): הוא מחזיר רק אלמנט בודד התואם לשם המחלקה שצוין. אם הוא לא מוצא שום אלמנט תואם, הוא מחזיר null.
הנקודה העיקרית שיש להבין היא שכל השיטות המתוארות לעיל מחזירות אלמנט אחד או רשימה, אך השיטה getELEmentsByClassName() משרתת את דִינָמִי עדכון, ושתי השיטות האחרות משמשות עבור סטָטִי .