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

ה-DOM מונחה עצמים. לכל רכיב ב-DOM יש קבוצה משלו של תכונות ושיטות שאליהם אתה יכול לגשת באמצעות JavaScript.

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

כיצד לגשת לרכיבי DOM

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

ברוך הבא


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




על אודות


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




מאמרים



כותרת המאמר הראשונה


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.





instagram viewer



 קרא עוד 





כותרת מאמר שני


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 קרא עוד 





כותרת מאמר שלישית


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 קרא עוד 





כותרת מאמר רביעית


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 קרא עוד 

הקלדה מסמך במסוף הדפדפן שלך והקשה על אנטר תפיק את הפלט הבא:

הפלט בקונסולה שלך הוא אינטראקטיבי. אתה יכול ללחוץ על רֹאשׁ ו גוּף אלמנטים כדי להרחיב אותם. פעולה זו תפיק את הפלט הבא:

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

קָשׁוּר: הגיבור הנסתר של האתרים: הבנת ה-DOM

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

document.body

זה יפיק את הפלט הבא:

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

מהם בוררי רכיבי DOM?

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

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

קָשׁוּר: כיצד למקד לחלק מדף אינטרנט באמצעות בוררי CSS

בוררי האלמנטים הבודדים הם:

• getElementById()
• querySelector()

בוררי הרכיבים המרובים הם:

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

בורר רכיבי ה-DOM שבו אתה משתמש יהיה תלוי ברכיב(ים) שאליהם אתה מנסה לקבל גישה.

שימוש בבוררי רכיב DOM בודדים

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

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

ה getElementById() השיטה מספקת גישה לרכיב בודד בדף אינטרנט באמצעות הערך של המזהה שלו. במסמך HTML למעלה ישנם מספר אלמנטים עם מזהים. כדי למקד את div רכיב עם המזהה "מאמר-3" תוכל להוסיף את הקוד הבא לקובץ ה-JavaScript שלך:

value = document.getElementById('article-3')

כעת רכיב ה-div עם ה- מאמר-3 ID וכל המאפיינים התואמים שלו נגישים מה- ערך מִשְׁתַנֶה. אתה יכול להדפיס את ערך משתנה לקונסולה באמצעות שורת הקוד הבאה:

console.log (ערך)

תראה את שם המחלקה שהוקצה לרכיב div וכן תכונות חשובות אחרות, כגון ה-HTML הפנימי.

בורר האלמנט הבודד האחר הוא ה- querySelector(). פונקציה זו היא רב-תכליתית יותר, מכיוון שאתה יכול להעביר לה כל מחרוזת בורר CSS. עם זאת, אתה עדיין יכול להשתמש בו רק כדי לבחור אלמנט אחד בכל פעם.

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

שימוש ב-querySelector() עם מחלקה

הוסף את הקוד הבא בסוף הסקריפט שלך:

value = document.querySelector('.articles')
console.log (ערך)

זה יחזיר רק את הראשון div רכיב עם מחלקה "מאמרים". שים לב שאתה מציין את הבורר באותו פורמט כמו בורר CSS. ב-CSS, תקופה מובילה מציינת שם מחלקה.

שימוש ב-querySelector() עם מזהה

value = document.querySelector('#article-3')
console.log (ערך)

קוד זה יחזיר את הרכיב היחיד עם מזהה "מאמר-3", השלישי div רכיב עם מחלקה "מאמרים". שוב, מחרוזת הבורר משתמשת בתחביר CSS סטנדרטי, עם a # סמל המציין מזהה.

שימוש בבוררי רכיבי DOM מרובים

שאר פונקציות הבורר מאחזרות קבוצות של אלמנטים. הם getElementsByTagName(), getElementsByClassName(), ו querySelectorAll().

שימוש ב-getElementsByTagName()

ה getElementsByTagName() selector מביא קבוצה של אלמנטים עם אותו שם תג. לדוגמה, אם אתה רוצה לבחור את כל h2 רכיבים בדף אינטרנט, אתה יכול להשתמש בקוד הבא:

value = document.getElementsByTagName('h2')
console.log (ערך)

זה מאחסן את כל רכיבי h2 באוסף HTML שנקרא value.

שימוש ב-getElementsByClassName()

ה getElementsByClassName() selector מחזיר אוסף של אלמנטים עם אותו שם מחלקה.

value = document.getElementsByClassName('articles')
console.log (ערך)

הכנסת הקוד למעלה לקובץ ה-JavaScript שלך תחזיר את ארבעת רכיבי ה-div עם שם המחלקה "מאמרים" במסוף הדפדפן.

שימוש ב-querySelectorAll()

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

value = document.querySelectorAll('#blog p')
console.log (ערך)

אתה יכול אפילו לכלול כמה בוררים במחרוזת, להפריד כל אחד בפסיק, בדיוק כמו ב-CSS:

value = document.querySelectorAll('h2, .articles')
console.log (ערך)

השתמש בבוררי DOM כדי ליצור דפי אינטרנט דינמיים

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

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

כיצד להפוך את האתר שלך לרספונסיבי ואינטראקטיבי עם CSS ו-JavaScript

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

קרא הבא

על הסופר