הבנת מודל אובייקט מסמך (DOM) בפרטים

כולנו שמענו על DOM, או מודל אובייקט מסמך, כי נזכר מעת לעת, הקשורים ל- JavaScript. DOM הוא מושג חשוב למדי בפיתוח אינטרנט. בלי זה, לא היינו יכולים לשנות באופן דינמי דפי HTML בדפדפן.

למידה והבנה של תוצאות DOM בדרכים טובות יותר גישה, שינוי ומעקב אלמנטים שונים של דף HTML. מודל אובייקט המסמך עשוי גם לעזור לנו להפחית את העלאות מיותרות בזמן ביצוע התסריט.

עצי מבנה נתונים

לפני שנדבר על מה שה- DOM הוא, איך הוא בא לידי קיום, איך הוא קיים, ומה שקורה בתוכו, אני רוצה שתדע על עצים. לא סוג מחטניים ונשירים אלא על עץ מבנה נתונים.

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

כמובן, זה לא כל מה שיש מבנה נתונים, אבל זה די הרבה איפה הכל מתחיל. זה “הסדר” הוא בלב כל זה. זה די חשוב DOM גם כן. אבל אנחנו לא מדברים על DOM עדיין, אז תן לי לנווט אותך לכיוון a מבנה נתונים שאתה עשוי להיות מוכר: מערכים.

מערכים ועצים

מערכים יש מדדים ו אורך, הם יכולים להיות רב מימדי, ויש להם תכונות רבות יותר. עד כמה חשוב לדעת את הדברים האלה על מערכים, בואו לא נדאג עם זה עכשיו. לנו, מערך הוא די פשוט. ללא שם: כאשר אתה לסדר דברים שונים בשורה.

באופן דומה, כאשר חושבים על עצים, נניח, זה בערך לשים דברים מתחת אחד לשני, החל רק עם דבר אחד בראש.

עכשיו, אתה יכול לקחת את ברווזים שורה אחת מלפני, להפוך אותו זקוף, ותגיד לי את זה “עכשיו, כל ברווז נמצא תחת ברווז אחר”. אז זה עץ? זה.

תלוי מה הנתונים שלך או איך אתה משתמש בו, הנתונים העליון בעץ שלך (קרא את שורש) עשוי להיות משהו שהוא בחשיבות נהדרת או משהו שהוא רק שם אלמנטים נוספים מתחתיו.

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

המשמעות של DOM

DOM מייצג מודל אובייקט מסמך. המסמך מצביע על מסמך HTML (XML) אשר מיוצג כאובייקט. (ב- JavaScript כל דבר יכול רק להיות מיוצג כאובייקט!)

המודל הוא שנוצרו על ידי הדפדפן זה לוקח מסמך HTML ויוצר אובייקט המייצג את זה. אנחנו יכולים לגשת אובייקט זה עם JavaScript. ומאחר שאנו משתמשים אובייקט זה כדי לתפעל את מסמך ה- HTML ולבנות יישומים משלנו, DOM הוא בעצם API.

עץ DOM

בקוד JavaScript, מסמך ה- HTML הוא המיוצגת כאובייקט. כל הנתונים שנקראו מתוך המסמך הם נשמר גם כאובייקטים, (כמו שאמרתי קודם, ב- JavaScript הכל יכול רק להיות מיוצג כאובייקטים).

אז, זה בעצם ההסדר הפיזי של נתונים DOM בקוד: הכל מסודרים כאובייקטים. אבל מבחינה הגיונית, זה עץ.

מנתח DOM

כל תוכנת דפדפן יש תוכנית בשם DOM Parser כי הוא אחראי ניתוח מסמך HTML ל- DOM.

דפדפנים לקרוא דף HTML ולהפוך את הנתונים שלה לתוך אובייקטים המרכיבים את DOM. המידע הקיים באובייקטים אלה של JavaScript DOM מסודרים באופן הגיוני כעץ מבנה נתונים המכונה עץ DOM.

ניתוח נתונים מ- HTML לעץ DOM

קח קובץ HTML פשוט. יש לו את אלמנט שורש . שלה תת אלמנטים הם ו , לכל אחד מהם יש הרבה אלמנטים משלהם.

אז בעצם, הדפדפן קורא את הנתונים במסמך HTML, משהו דומה לזה:

ו, מסדר אותם לתוך עץ DOM ככה:

הייצוג של כל אלמנט HTML (ותוכן השייכות שלו) בעץ DOM ידוע בשם a צומת. ה צומת שורש הוא הצומת של .

ה ממשק DOM ב- JavaScript נקרא מסמך (שכן זה ייצוג של מסמך ה- HTML). לכן, אנו ניגשים לעץ DOM של מסמך HTML דרך ה מסמך ממשק ב - JavaScript.

אנחנו לא יכולים רק לגשת, אבל גם לתפעל את מסמך ה- HTML דרך DOM. ניתן להוסיף אלמנטים לדף אינטרנט, להסיר ולעדכן אותם. בכל פעם שאנו משנים או מעדכנים כל צומת בעץ DOM, זה משקף בדף האינטרנט.

כיצד צמתים מתוכננים

הזכרתי קודם כל פיסת נתונים ממסמך HTML נשמר כאובייקט ב- JavaScript. אז, איך הנתונים נשמרים כאובייקט יכול להיות מסודרים באופן הגיוני כעץ?

בצמתים של עץ DOM יש מאפיינים או מאפיינים מסוימים. כמעט כל צומת בעץ יש צומת הורה (הצומת שמעליה), צמתים (הצמתים מתחתיו) אחים (צמתים אחרים השייכים לאותו הורה). לאחר זה משפחה מעל, למטה, סביב הצומת הוא מה שמקבל את זה בתור חלק מעץ.

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

הימנע מניפולציה של DOM

ככל שאנו עשויים למצוא עדכון DOM שימושי (כדי לשנות את דף האינטרנט), יש דבר כזה מגזים.

תגיד, אתה רוצה לעדכן את הצבע של