אם בדקתם דף באתר שלכם ב 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 כמו שראינו.