גיבור האתרים הנסתר: הבנת ה- DOM

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

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

הבנת חוזה DOM

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

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

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

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

תקן DOM נשמר על ידי ארגון הנקרא קונסורציום הרשת העולמית, או W3C. הם יצרו תיעוד מפורט מאוד המגדיר את ה- DOM תֶקֶן.

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

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

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

כיצד ה- DOM בנוי

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

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

כיצד HTML מתקשר עם ה- DOM

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

אם אתה רק מתחיל עם HTML, הנה חמש טיפים להכיר את זה.

5 שלבים להבנת קוד HTML בסיסי

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

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

כיצד CSS מתקשר עם ה- DOM

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

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

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

כיצד JavaScript מתקשר עם ה- DOM

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

קָשׁוּר: מה זה JavaScript?

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

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

העתיד של פיתוח אתרים ו- DOM

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

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

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

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

WebAssembly מביא רבים מהיתרונות של קוד מקורי לדפדפן, כולל מהירות משופרת וגישה טובה יותר לחומרה. זה יאפשר למתכנתים להשתמש בשפות אחרות כדי לבנות אתרים כמו C ++ ו- Rust.

אבל גם עם השיפורים העצומים ש- WebAssembly יביא, ה- DOM עדיין יהיה שם, ויספק ממשק עקבי בין הקוד למה שמוצג בדפדפן.

כיצד להשתמש ב- Outlook במצב כהה

הפחית את עומס העיניים והגדיל את חיי הסוללה על ידי מעבר של Microsoft Outlook למצב כהה.

על הסופר