TechCodeview

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

כאן, נסתכל על מגוון גישות מבוססות JavaScript כדי להשיג זאת.

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

 const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode; 

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

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

 const childElement = document.getElementById('child-element'); const parentElement = childElement.parentElement; 

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

שימוש בשיטת () הקרובה ביותר: שיטת closest() היא עוד כלי יעיל המוצע על ידי דפדפנים עכשוויים.

עם השימוש בטכניקה זו, תוכל לקבוע איזה אלמנט בעץ של בורר CSS הוא האב הקדמון הישיר של אלמנט. שימוש בטכניקת() הקרובה מודגם בדוגמה הבאה:

 const childElement = document.getElementById('child-element'); const parentElement = childElement.closest('.parent-class'); 

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

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

שימוש בשיטות מעבר: אתה יכול להקיף את עץ ה-DOM באמצעות אחת משיטות המעבר הרבות ש-JavaScript מציעה. שיטות parentNode, previousSibling, nextSibling, firstChild ו-lastChild הן ביניהן. אתה יכול ללכת לאלמנט האב של אלמנט מסוים על ידי שילוב של טכניקות אלה. כהמחשה, שקול את הדברים הבאים

 const childElement = document.getElementById('child-element'); const parentElement = childElement.parentNode; 

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

מחרוזת ותת מחרוזת

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

הנה המחשה:

 const buttons = document.querySelectorAll('.button'); buttons.forEach((button) => { button.addEventListener('click', function(event) { const parentElement = event.target.parentElement; // Perform actions on the parent element }); }); 

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

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

שימוש במאפיין האב עם אלמנטים דינמיים:

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

לאחר הוספת האלמנט ל-DOM, תוכל להשתמש במאפיין האב Element בנסיבות מסוימות.

כהמחשה, שקול את הדברים הבאים:

 const parentElement = document.getElementById('parent-element'); function createNewElement() { const newElement = document.createElement('div'); // Manipulate the new element parentElement.appendChild(newElement); const newElementParent = newElement.parentElement; // Access the parent element of the newly created element } 

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

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

שימוש במאפיין offsetParent:

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

הנה המחשה:

 const childElement = document.getElementById('child-element'); const positionedAncestor = childElement.offsetParent; 

בקטע הקוד האמור לעיל, אנו משתמשים תחילה בשיטת getElementById כדי לבחור את אלמנט הילד, ולאחר מכן משתמשים בתכונת offsetParent כדי לייעד את האלמנט הקדמון הממוקם הקרוב ביותר למשתנה בשם positionedAncestor.

שימוש במאפיין parentNode עם סוגי צמתים שונים:

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

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

 const textNode = document.createTextNode('Hello, World!'); const parentElement = textNode.parentNode; 

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

שימוש במאפיין parentElement עם ה-Shadow DOM:

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

במקרה זה, המאפיין parentElement ישים גם הוא.

כהמחשה, שקול את הדברים הבאים:

 const shadowRoot = document.getElementById('shadow-root').shadowRoot; const childElement = shadowRoot.getElementById('child-element'); const parentElement = childElement.parentElement; 

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

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

אלמנטים ממוקמים עם מאפיין offsetParent :

אתה יכול להשתמש במאפיין offsetParent בשילוב עם המאפיינים offsetLeft ו-offsetTop כדי לאתר את אלמנט האב הקדמון הממוקם הקרוב ביותר של אלמנט נתון אם אתה צריך לעשות זאת במפורש.

הנה המחשה:

 const element = document.getElementById('target-element'); let positionedAncestor = element.offsetParent; while (positionedAncestor && getComputedStyle(positionedAncestor).position === 'static') { positionedAncestor = positionedAncestor.offsetParent; } 

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

השלב הבא הוא לקבוע אם ל-Ancestor הממוקם הנוכחי יש מיקום מחושב של 'סטטי' באמצעות לולאת while.

positionedAncestor מתעדכן ל-offsetParent של ה-positionedAncestor הנוכחי אם כן.

פונקציית חץ כתב כתיבה

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

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

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

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

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

כעת יש לך שיטות נוספות זמינות עבורך ב-JavaScript כדי להגיע לאלמנט האב.

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

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