ב-JavaScript, עץ ה-DOM עוקב אחר המבנה ההיררכי המכיל רשימה גדולה של צמתים. המבנה מתחיל מצומת השורש (מסמך) ולאחר מכן מצטרף לצמתי האב והצאן. על מנת לגשת לצמתי צאצא אלה, JavaScript מציע את ' צמתים ילדים ' תכונה. מאפיין זה מסייע למשתמשים לגשת לכל צומת הצאצא או לצומת מסוים של רכיב האב המשויך.
פוסט זה מרחיב את המטרה והעבודה של מאפיין ה-HTML DOM 'childNodes' ב-JavaScript.
מהו מאפיין HTML DOM 'childNodes' ב-JavaScript?
ה ' צמתים ילדים ” הוא מאפיין לקריאה בלבד המחזיר את רשימת כל הצמתים הצאצאים של אלמנט בצורה של אובייקט NodeList. ניתן להשתמש במאפיין המיוחד הזה גם כדי לגשת לצומת הילד הספציפי של רכיב האב. צומת הילד מתחיל מאינדקס '0 (אפס)'. יתר על כן, הרווחים הלבנים, ההערות וצמתי הטקסט נחשבים גם לצמתי צאצא.
תחביר
element.childNodes
התחביר שהוכלל לעיל מחזיר את אובייקט ה-NodeList המכיל צמתים צאצאים של האלמנט הממוקד.
בואו נשתמש בתחביר שהוגדר לעיל באופן מעשי.
קוד HTML
ראשית, עיין בקוד ה-HTML המוצהר:
< div תְעוּדַת זֶהוּת = 'דיב' סִגְנוֹן = 'גבול: 2 פיקסלים שחור מלא; גובה: 200 פיקסלים; רוחב: 250 פיקסלים; ריפוד: 10 פיקסלים' >< h2 > כותרת ראשונה h2 >
< h3 > כותרת שניה h3 >
< ע > פסקה ראשונה ע >
< ע > פסקה שניה ע >
div >
< ע תְעוּדַת זֶהוּת = 'ל' > ע >
בשורות הקוד לעיל:
- הוסף ' ' אלמנט עם מזהה 'Div', מעוצב בעזרת המאפיינים המוצהרים (גבול, גובה ורוחב).
- בתוך האלמנט '
', הגדר שתי כותרות ושתי פסקאות, בהתאמה.- לבסוף, ה' ' תג מטמיע פסקה ריקה עם מזהה 'para'.
הערה: קוד ה-HTML האמור נחשב לאורך הפוסט הזה.
דוגמה 1: החלת המאפיין 'childNodes' כדי לקבל את המספר הכולל של צמתים צאצאים של אלמנט מסוים
דוגמה זו משתמשת במאפיינים 'childNodes' ו-'length' כדי לקבל את המספר הכולל של צמתים צאצאים הקיימים באלמנט האב הספציפי.
קוד JavaScript
בוא נעקוב אחר הקוד הנתון:
< תַסרִיט >
const elem = document.getElementById ( 'דיב' ) ;
לתת num = elem.childNodes.length;
document.getElementById ( 'ל' ) .innerHTML = 'ערך: ' + מספר;
תַסרִיט >בשורות הקוד לעיל:
- המשתנה 'elem' משתמש ב-' getElementById() ' שיטה לגישה לרכיב האב שהמזהה שלו הוא 'Div'.
- המשתנה 'num' משתמש ב-' צמתים ילדים ' ו' אורך ' מאפיינים כדי לקבל את מספר הצמתים הצאצאים הקיימים באלמנט '' שניגשים אליו.
- לבסוף, השיטה 'getElementById()' מביאה את הפסקה הריקה המוטבעת דרך המזהה שלה 'para' כדי לצרף אותה עם ערך המשתנה 'num'.
תְפוּקָה
הפלט מרמז שיש סך ' 9 ' צמתי צאצא באלמנט הנתון '
' כולל הרווחים הלבנים בין האלמנטים.דוגמה 2: החלת המאפיין 'childNodes' כדי לקבל את השם של צומת צאצא ספציפי
ניתן להשתמש במאפיין 'childNodes' גם עם המאפיין 'nodeName' כדי לקבל את שם הצומת הבן. בוא נראה את זה באופן מעשי.
קוד JavaScript
עברו על הקוד הבא:
< תַסרִיט >
const elem = document.getElementById ( 'דיב' ) ;
לתת num = elem.childNodes [ 1 ] .nodeName;
document.getElementById ( 'ל' ) .innerHTML = 'אלמנט:' +num;
תַסרִיט >הנה ה ' צמתים ילדים ' הנכס מקושר עם ' nodeName ' מאפיין כדי לקבל את שם הצומת הצאצא שצוין בהתבסס על האינדקס שהגישה אליו, כלומר '1'.
תְפוּקָה
הפלט מציג את שם הצומת הבן, כלומר אלמנט 'H2' מול האינדקס שצוין.
דוגמה 3: החלת המאפיין 'childNodes' כדי לשנות את צבע הטקסט של צומת צאצא ספציפי
דוגמה זו משתמשת במאפיין הנדון כדי לשנות את הצבע של הילד שנוסף לאינדקס.
קוד JavaScript
שקול את הקוד הבא:
< תַסרִיט >
document.getElementById ( 'דיב' ) .childNodes [ 3 ] .style.color = 'ירוק' ;
תַסרִיט >הנה ה ' getElementById() השיטה מביאה את רכיב האב '
' דרך המזהה שלו 'Div' והצומת הצאצא שלו ממוקם באינדקס שצוין באמצעות ' צמתים ילדים 'רכוש, בהתאמה. לאחר מכן, השתמש ב' סגנון.צבע ' מאפיין כדי לשנות את צבע הטקסט של צומת הצאצא.תְפוּקָה
הפלט מאשר שצבע הטקסט של צומת הצאצא שצוין השתנה כראוי.
סיכום
ב-JavaScript, ה' צמתים ילדים ' המאפיין מאחזר את אובייקט ה-nodeList המכיל את הצמתים הצאצאים של רכיב HTML היעד. ניתן לגשת לצמתי הילד בבת אחת או לצמתים הרצויים על ידי ציון מספר האינדקס עם המאפיין 'childNodes'. מאפיין זה מאפשר ביצוע של פונקציית JavaScript לביצוע משימות מיוחדות בצמתי הצאצא שהגישה אליהם. מאמר זה הרחיב על החלת המאפיין 'childNodes' ב-JavaScript.
- בתוך האלמנט '