כמה אלמנטים יש ב HTML DOM

אם בדקתם דף באתר שלכם ב Lighthouse או בכלי בדיקה אחרים, יתכן וראיתם הערה או מידע על כמות האלמנטים שיש לכם ב DOM. ב Lighthouse לדוגמה, תהיה התרעה אם כמות האלמנטים בדום היא מעל 1500 אלמנטים – Avoid an excessive DOM size.
יש התרעה גם על מספר ילדים לאלמנט בודד ועל עומק השרשרת).

אם נרצה לשפר את זה, נצטרך דרך נוחה לראות בכל רגע נתון כמה אלמנטים יש לנו בדום. את זה ניתן לעשות על ידי הקוד הבא. את הקוד הכניסו ל console ב chrome dev tools.

document.getElementsByTagName('*').length

אם נרצה לדעת כמה אלמנטים יש תחת class מסויים? למשל אם אנחנו עובדים על צמצם ההדר בלבד.

document.getElementsByClassName("enter your class name")[0].getElementsByTagName('*').length

לפעמים כדי לנתח את המבנה שנוצר, נצטרך לדעת כמה אלמנטים מסוג B יש תחת אלמנט A – לדוגמה באלמנטור אם נרצה לדעת כמה אלמנטים עוטפים מסוג מסוים יש תחת div כלשהו.

document.getElementsByClassName("enter your parent class heare")[0].getElementsByClassName("enter your child class heare").length

כדי למנות אלמנט ספציפי – למשל לוודא שיש לנו רק אלמנט אחד מסוג H1

document.getElementsByTagName("h1").length;

זאת דוגמה על פי tag אבל כמובן שניתן למנות לפי class או id כמו שראינו.

0 0 דרג
דרג את הפוסט
הרשמה
Notify of
0 תגובות
Inline Feedbacks
הצג את כל התגובות

גם הסניפטים הבאים יעניינו אותך

0
אשמח לשמוע את דעתכם, מוזמנים להשאיר תגובהx