בזמן הוספת פונקציות מרובות במודל אובייקט המסמך (DOM) באמצעות JavaScript, המפתח צריך לעתים קרובות לנתח את השיוך של האלמנט. ניתן להשיג זאת על ידי רישום רכיב האב של רכיבי היעד אשר מייעלים את זרימת הקוד ואת העיצוב של התכונות הנכללות באתר. סקירת תוכן
מהו המאפיין 'parentElement' ב-JavaScript?
ה ' parentElement ” מאפיין ב-JavaScript מאחזר את האלמנט שהוא האב של אלמנט היעד.
כיצד לגשת/להפעיל את רכיב האב באמצעות מאפיין HTML DOM parentElement?
ניתן לגשת לרכיב האב באמצעות HTML DOM ' parentElement ' נכס עם ' nodeName ' מאפיין או אחזור הצומת של אלמנט האב במקום זאת באמצעות ' parentNode ' תכונה.
VIDEO
תחביר
parentElement
ערך החזרה ריק ' אם הצומת אינו מורכב מהורה.
השתמש בשיטות ומאפיינים נפוצים
document.querySelector() : שיטה זו מקבלת את האלמנט הראשון התואם לבורר ה-CSS.
תחביר
מסמך. querySelector ( זֶה )
בתחביר זה, ' זֶה ' מתייחס לבורר CSS אחד או יותר.
document.getElementById() : הוא מחזיר את האלמנט בעל המזהה שצוין.
תחביר
מסמך. getElementById ( תְעוּדַת זֶהוּת )
כאן, ' תְעוּדַת זֶהוּת ' מציין את המזהה של רכיב היעד שיש לאחזר.
אינדקס נבחר : מאפיין זה מאחזר את האינדקס של האפשרות שנבחרה מהרשימה הנפתחת. ה '-1' אפשרות מבטלת את כל האפשרויות.
nodeName : מאפיין זה מאחזר את שם הצומת.
יְלָדִים : מאפיין זה מחזיר את רכיבי הצאצא של האלמנט כאוסף.
outerHTML : מאפיין זה מקצה או מאחזר את רכיב ה-HTML וכן את התכונות שלו ותגי ההתחלה והסיום.
parentNode : מאפיין מסוים זה מביא את צומת האב של אלמנט או צומת.
הערה : ההבדל בין ' parentElement ' ו' parentNode ' מאפיין הוא שהנכס הקודם, כלומר, 'אלמנט אב' נותן ' ריק ' אם צומת האב אינו משקף צומת אלמנט.
דוגמה 1: גישה לרכיב האב דרך המאפיין 'parentElement' ב-JavaScript
דוגמה זו מפעילה את רכיב האב של אלמנט ומציגה את שם הצומת (האב) שלו בלחיצה על הכפתור.
קוד HTML
< html < גוּף < h1 מאפיין parentElement ב-JavaScript < / h1 < h2 בחר את השפה: < / h2 < בחר מעמד = 'אֵלֵמֶנט' > < אוֹפְּצִיָה פִּיתוֹן < / אוֹפְּצִיָה < אוֹפְּצִיָה Java < / אוֹפְּצִיָה < אוֹפְּצִיָה JavaScript < / אוֹפְּצִיָה < / בחר < לַחְצָן בלחיצה = 'displayParent()' מעמד = 'לַחְצָן' > הצג את רכיב האב של אלמנט 'אופציה'. < / לַחְצָן < div מעמד = 'טמפ'' >< / div / גוּף < html
בקוד הזה:
ציין את הנתון '' ו '' אלמנטים המרכיבים את הכותרות ברמה אחת ורמה שתיים, בהתאמה.
לאחר מכן, צור א '<בחר>' אלמנט המיוצג על ידי המחלקה הנתונה המכילה את רכיבי הצאצא הנוספים, כלומר, '<אופציה>' .
כעת, צור כפתור המשויך ל' בלחיצה ' אירוע שמפנה אל 'displayParent()' פונקציה בלחיצת הכפתור.
לבסוף, ציין את '' רכיב שבו יש להציג את התוצאה, כלומר, רכיב האב שנגיש.
קוד CSS
<סגנון
> גוּף
{ יישור טקסט : מֶרְכָּז ; צֶבַע : #fff ; צבע רקע : אפור ; גוֹבַה : 100% ;
} .לַחְצָן
{ גוֹבַה : 2 רמ ; גבול-רדיוס : 2 פיקסלים ; רוֹחַב : 35% ; שולים : 2 רמ אוטומטי ; לְהַצִיג : לַחסוֹם ; צֶבַע : #ba0b0b ; סַמָן : מַצבִּיעַ ;
} .temp
{ גודל גופן : 1.5 רמ ; משקל גופן : נוֹעָז ;
} >
בקוד CSS לעיל:
סגננו את דף האינטרנט הכולל עם המאפיינים המיושמים 'יישור טקסט', 'צבע רקע' וכו'.
באופן דומה, החל את הסגנון על הכפתור שנוצר דרך המחלקה שלו על ידי התאמת הגובה, הרוחב, התצוגה, הצבע שלו וכו'.
לבסוף, סגנון את ' div ' על ידי הפניה לשם המחלקה שלה שבה יש להציג את רכיב האב הנגיש.
קוד JavaScript
VIDEO
< תַסרִיט
> פוּנקצִיָה displayPrent
( ) { היה לקבל = מסמך.
querySelector ( '.אֵלֵמֶנט' ) ; היה זֶה
= לקבל .
אפשרויות [ לקבל .
אינדקס נבחר ] ; היה לְצַרֵף
= מסמך.
querySelector ( '.temp' ) ; לְצַרֵף.
innerHTML = 'רכיב האב של רכיב האופציה הוא -> ' + זֶה.
parentElement .
nodeName ;
}
תַסרִיט >
לפי שורות קוד אלו:
הגדר את הפונקציה 'displayParent()' הניגש לרכיב '' על ידי הפניה למחלקה שלו דרך ה- 'document.querySelector()' שיטה.
ה ' אפשרויות ' אוסף מקבל את האוסף של כל הרכיבים '' ברשימה הנפתחת ואת ' אינדקס נבחר ' מאפיין מאחזר את האינדקס של האפשרות שנבחרה עבור הרשימה הנפתחת.
לבסוף, השתמש ב- 'document.querySelector()' שיטה שוב כדי לגשת לאלמנט '' ולצרף אותו עם רכיב האב של אלמנט '
' באמצעות ה- 'מיושם parentElement ' ו' nodeName ' (מציג את שם צומת האב) מאפיינים.
קוד שלם
< html < גוּף < h1 מאפיין parentElement ב-JavaScript < / h1 < h2 בחר את השפה: < / h2 < בחר מעמד = 'אֵלֵמֶנט' > < אוֹפְּצִיָה פִּיתוֹן < / אוֹפְּצִיָה < אוֹפְּצִיָה Java < / אוֹפְּצִיָה < אוֹפְּצִיָה JavaScript < / אוֹפְּצִיָה < / בחר < לַחְצָן בלחיצה = 'displayParent()' מעמד = 'לַחְצָן' > הצג את רכיב האב של אלמנט 'אופציה'. < / לַחְצָן < div מעמד = 'טמפ'' >< / div / גוּף < סִגְנוֹן < / סִגְנוֹן < תַסרִיט < / תַסרִיט
תְפוּקָה
כאן, ניתן לראות שרכיב האב של כל צמתי הילד, כלומר, האפשרות שנבחרה מהתפריט הנפתח ב- '<אופציה>' הרכיב מוחזר כלומר, ' בחר '.
דוגמה 2: גישה הן לרכיבי האב והן לרכיבי הילד באמצעות המאפיינים 'parentElement' ו-'children' ב-JavaScript
דוגמא הקוד הבאה ניגשת הן לרכיבי האב והן לרכיבי הצאצא של אלמנט מסוים.
קוד HTML
< html גוּף div תְעוּדַת זֶהוּת = 'הוֹרֶה' > div תְעוּדַת זֶהוּת = 'יֶלֶד' > h1 / h1 h1 / h1 / div / div / גוּף / html בבלוק קוד זה, צור שני אלמנטים '
', ושני האלמנטים '
' מתייחסים לרכיבי הצאצא של האלמנט '' האחרון.
קוד JavaScript
< תַסרִיט
> לתת
לקבל = מסמך.
getElementById ( 'יֶלֶד' ) ; לתת להורה
= לקבל .
parentElement ; לְנַחֵם.
עֵץ ( 'אלמנט הורה -> ' , הוֹרֶה.
outerHTML ) ; לְנַחֵם.
עֵץ ( 'שם צומת אלמנט אב -> ' , הוֹרֶה.
nodeName ) ; לתת לילדים
= לקבל .
יְלָדִים ; ל ( תן לי
= 0 ; אני
< יְלָדִים.
אורך ; אני
++ ) { לְנַחֵם.
עֵץ ( `אלמנט ילד $
{ אני
} : `
, יְלָדִים
[ אני
] .
outerHTML ) ;
}
ל ( תן לי
= 0 ; אני
< יְלָדִים.
אורך ; אני
++ ) { לְנַחֵם.
עֵץ ( `שם צומת של רכיב צאצא $
{ אני
} : `
, יְלָדִים
[ אני
] .
nodeName ) ;
}
תַסרִיט >
ההסבר של הקוד לעיל הוא כדלקמן:
VIDEO
גש לאלמנט '' האחרון על ידי 'מזהה' שלו באמצעות ה-
'document.getElementById()' השיטה ואחזר את רכיב האב שלה באמצעות '
parentElement ' תכונה.
כעת, הצג את רכיב האב עם תכונות, ותגי התחלה וסיום באמצעות ' outerHTML ' תכונה.
כמו כן, החזר את השם של רכיב האב, כלומר, שם הצומת באמצעות ' nodeName ' תכונה.
לאחר מכן, גש לילדים של האלמנט באמצעות מאפיין 'ילדים'.
החל את ' ל ' לולאה כדי לחזור על כל רכיבי הצאצא ולהחזיר אותם עם התגים באמצעות המאפיין 'outerHTML' הנדון.
באופן דומה, השתמש שוב בלולאת 'for' כדי להחזיר גם את שמות הצמתים של רכיבי הצאצא.
קוד שלם
< html < גוּף < div תְעוּדַת זֶהוּת = 'הוֹרֶה' > < div תְעוּדַת זֶהוּת = 'יֶלֶד' > < h1 אלמנט ילד ראשון
< / h1 < h1 אלמנט ילד שני
< / h1 < / div < / div
< / גוּף
< / html
< תַסרִיט let get = document.getElementById('child');
let parent = get.parentElement;
console.log('Prent Element -> ', parent.outerHTML);
console.log('שם צומת אלמנט אב -> ', parent.nodeName);
תן לילדים = לקבל.ילדים;
for(תן i =0; i
< children.length; i++ ) { console.log ( `אלמנט ילד $ { אני } : `, ילדים [ אני ] .outerHTML ) ; } ל ( תן לי = 0 ; i < children.length; i++ ) { console.log ( `צומת אלמנט ילד שֵׁם $ { אני } : `, ילדים [ אני ] .nodeName ) ; } < / תַסרִיט
תְפוּקָה
תוצאה זו מרמזת שרכיבי האב והילד של רכיב היעד מוצגים בפירוט (יחד עם שמות הצמתים) בהתאם.
דוגמה 3: גישה לאלמנט האב באמצעות המאפיין 'parentNode'.
בהדגמה זו, ניתן להפעיל את האלמנט האב של אלמנט מסוים ואז גם אלמנט האב של האלמנט הספציפי הזה יובא ובכך יביא להתנהגות מקוננת. ניתן להשיג זאת באמצעות ' parentNode ' מאפיין במקום שמביא את צומת האב של האלמנט.
קוד HTML
< html גוּף div תְעוּדַת זֶהוּת = 'הוֹרֶה' > ol תְעוּדַת זֶהוּת = 'טמפ'' > זֶה תְעוּדַת זֶהוּת = 'ילד זמני' >Python< / זֶה זֶה / זֶה זֶה / זֶה / ol / div / גוּף / html כאן, צור אלמנט '
' שכולל עוד את הרכיבים '
(רשימה מסודרת)' ו-'(פריטים ברשימה)' בעלי המזהים הנתונים.
קוד JavaScript
< תַסרִיט > לקבל = מסמך. getElementById ( 'ילד זמני' ) ; = לקבל . parentNode ; עֵץ ( 'צומת אלמנט אב של 'li'->' , הוֹרֶה ) ; = מסמך. getElementById ( 'טמפ' ) ; = לקבל 2. parentNode ; עֵץ ( 'צומת אלמנט אב של 'ol'-> ' , הורה2 ) ; תַסרִיט >
בהתבסס על קטע קוד זה, בצע את השלבים הבאים:
הפעל את הרכיב ' ' באמצעות ה-' getElementById() ', לגשת לצומת של אלמנט האב שלו באמצעות ' parentNode ' מאפיין, והצג את צומת האב.
באופן דומה, כעת הפעל את ההורה של צומת האב המוצג, כלומר, '' על ידי חזרה על אותה מתודולוגיה.
קוד שלם
< html < גוּף < div תְעוּדַת זֶהוּת = 'הוֹרֶה' > < ol תְעוּדַת זֶהוּת = 'טמפ'' > < זֶה תְעוּדַת זֶהוּת = 'ילד זמני' > פִּיתוֹן < / זֶה < זֶה Java < / זֶה < זֶה JavaScript < / זֶה < / ol < / div < תַסרִיט < / תַסרִיט < / גוּף < / html
תְפוּקָה
תוצאה זו מסמלת שצמתי האב בשני המקרים מוצגים בהתאם.
סיכום
ניתן לגשת לרכיב האב באמצעות ה-HTML DOM ' parentElement ' נכס בשילוב עם ' nodeName ' מאפיין או אחזור צומת האב באמצעות המאפיין 'parentNode'. עם זאת, כדי לגשת לרכיב הבן במקום זאת, השתמש ב-' יֶלֶד ' תכונה.