HTML DOM: כיצד להשתמש במודל אובייקט מסמך

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

• קונספט HTML DOM
• מהו ה- HTML DOM
• מה ה- HTML DOM אינו
• מאיפה הגיע ה- DOM
• מאפייני HTML DOM
• מציאת אלמנטים של HTML

קונספט HTML DOM

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

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

מהו ה- HTML DOM

מודל אובייקט המסמך הוא ממשק API לתכנות למסמכים. מודל האובייקט עצמו דומה מאוד למבנה המסמכים שהוא מדגם. לדוגמה, שקול טבלה זו, הלקוחה ממסמך HTML:

 
 
 
גרוב צל
 
אאוליאני
 
 
 
מעבר לנהר, צ'רלי
 
דוריאן
 
    

מה ה- HTML DOM אינו

סעיף זה נועד לתת הבנה מדויקת יותר של מודל אובייקט המסמך על ידי הבחנה שלו ממערכות אחרות שעשויות להראות כמוהו.

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

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

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

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

מודל אובייקט המסמך אינו מגדיר 'סמנטיקה פנימית אמיתית' של XML או HTML. הסמנטיקה של אותן שפות מוגדרת על ידי השפות עצמן.

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

מודל אובייקט המסמך, למרות שמו, אינו מתחרה במודל אובייקט הרכיבים (COM). COM, כמו CORBA, הוא דרך בלתי תלויה בשפה לציין ממשקים ואובייקטים. מודל אובייקט המסמך הוא מערכת ממשקים ואובייקטים המיועדים לניהול מסמכי HTML ו- XML. ה- DOM יכול להיותמיושם באמצעות מערכות שאינן תלויות שפה כמו COM או CORBA, הוא עשוי להיות מיושם באמצעות כריכות ספציפיות לשפה כמו כריכות Java או ECMAScript שצוינו במסמך זה.

מאיפה הגיע דגם אובייקט המסמך

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

עם זאת, כאשר הוקמה קבוצת העבודה של מודל אובייקט המסמך, הצטרפו אליו גם ספקים בתחומים אחרים, כולל עורכי HTML או XML ומאגרי מסמכים. כמה מהספקים הללו עבדו עם SGML לפני ש- XML ​​פותח כתוצאה מכך, מודל אובייקט המסמך הושפע מ- SGML Groves ומתקן HyTime. חלק מהספקים הללו פיתחו גם מודלים עצמאיים משלהם למסמכים על מנת לספק אותםתכנות ממשקי API עבור עורכי SGML / XML או מאגרי מסמכים, ומודלים של אובייקטים אלה השפיעו גם על מודל אובייקט המסמך.

מאפייני HTML DOM

בואו נראה את המאפיינים של אובייקטים המסמכים אליהם ניתן לגשת ולשנות את אובייקט המסמך.

הדרכה לאינפורמטיקה למתחילים להורדה בחינם

1. אובייקט חלון: אובייקט החלון נמצא תמיד בראש ההיררכיה.
2. אובייקט מסמך: כאשר מסמך HTML נטען לחלון, הוא הופך לאובייקט מסמך.
3. אובייקט טופס: הוא מיוצג על ידי טופס תגים.
4. קישורי אובייקטים: הוא מיוצג על ידי קישור תגים.
5. חפצי עוגן: הוא מיוצג על ידי a href תגים.
6. אלמנטים לבקרת טופס: טופס יכול לכלול אלמנטים שליטה רבים כגון שדות טקסט, לחצנים, לחצני רדיו ותיבות סימון וכו '.

שיטות של אובייקט מסמך :

1. כתוב ('מחרוזת'): כותב את המחרוזת הנתונה על המסמך.
2. getElementById (): מחזיר את האלמנט בעל ערך ה- id הנתון.
3. getElementsByName (): מחזיר את כל האלמנטים בעלי ערך השם הנתון.
4. getElementsByTagName (): מחזיר את כל האלמנטים בעלי שם התג הנתון.
5. getElementsByClassName (): מחזיר את כל האלמנטים בעלי שם המחלקה הנתון.

מציאת אלמנטים של HTML

כאשר ברצונך לגשת לאלמנטים HTML עם JavaScript, עליך למצוא תחילה את האלמנטים.

ישנן מספר דרכים לעשות זאת:

• מציאת רכיבי HTML לפי מזהה
• מציאת רכיבי HTML לפי שם התג
• מציאת רכיבי HTML לפי שם הכיתה

מציאת אלמנט HTML לפי מזהה

הדרך הקלה ביותר למצוא אלמנט HTML ב- DOM היא באמצעות מזהה האלמנט.

דוגמא

מציאת רכיבי HTML לפי שם תג

דוגמה זו מוצאת את האלמנט עם id = 'main' ואז מוצאת הכל

אלמנטים בתוך 'ראשי':

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

בדוק את שלנו שמגיע עם הדרכה חיה בהנחיית מדריך וניסיון פרויקט אמיתי. הכשרה זו גורמת לך להיות בקיאים במיומנויות לעבוד עם טכנולוגיות אינטרנט מקדימות וקדמיות. הוא כולל הדרכה בנושא פיתוח אתרים, jQuery, Angular, NodeJS, ExpressJS ו- MongoDB.

יש לך שאלה עבורנו? אנא הזכיר זאת בקטע ההערות בבלוג 'תמונות HTML' ונחזור אליך.