' που αναφέρονται στα θυγατρικά στοιχεία του τελευταίου στοιχείου '

'.

Κώδικας JavaScript

< γραφή >
αφήνω παίρνω = έγγραφο. getElementById ( 'παιδί' ) ;
ας γονέα = παίρνω . γονικό στοιχείο ;
κονσόλα. κούτσουρο ( 'Γονικό στοιχείο ->' , μητρική εταιρεία. outerHTML ) ;
κονσόλα. κούτσουρο ( 'Όνομα κόμβου γονικού στοιχείου -> ' , μητρική εταιρεία. nodeName ) ;
αφήστε τα παιδιά = παίρνω . παιδιά ;
Για ( ας μου = 0 ; Εγώ < παιδιά. μήκος ; Εγώ ++ ) {
κονσόλα. κούτσουρο ( `Παιδικό στοιχείο $ { Εγώ } : ` , παιδιά [ Εγώ ] . outerHTML ) ;
}
Για ( ας μου = 0 ; Εγώ < παιδιά. μήκος ; Εγώ ++ ) {
κονσόλα. κούτσουρο ( `Όνομα κόμβου θυγατρικού στοιχείου $ { Εγώ } : ` , παιδιά [ Εγώ ] . nodeName ) ;
}
γραφή >

Η επεξήγηση του παραπάνω κώδικα έχει ως εξής:

• Πρόσβαση στο τελευταίο στοιχείο '
  ' με το 'id' του χρησιμοποιώντας το 'document.getElementById()' μέθοδος και ανάκτηση του γονικού του στοιχείου μέσω του ' γονικό στοιχείο ” ιδιοκτησία.
• Τώρα, εμφανίστε το γονικό στοιχείο με χαρακτηριστικά και ετικέτες έναρξης και λήξης μέσω της εφαρμογής ' outerHTML ” ιδιοκτησία.
• Επίσης, επιστρέψτε το όνομα του γονικού στοιχείου, δηλαδή το όνομα του κόμβου χρησιμοποιώντας το ' nodeName ” ιδιοκτησία.
• Μετά από αυτό, αποκτήστε πρόσβαση στα παιδιά του στοιχείου χρησιμοποιώντας την ιδιότητα 'παιδιά'.
• Εφαρμόστε το ' Για ' βρόχος για επανάληψη όλων των θυγατρικών στοιχείων και επιστροφή τους με τις ετικέτες μέσω της συζητούμενης ιδιότητας 'outerHTML'.
• Ομοίως, χρησιμοποιήστε ξανά τον βρόχο «για» για να επιστρέψετε και τα ονόματα των κόμβων των θυγατρικών στοιχείων.

Ολόκληρος ο Κώδικας

< html >
< σώμα >
< div ταυτότητα = 'μητρική εταιρεία' >
< div ταυτότητα = 'παιδί' >
< h1 > Πρώτο Παιδικό Στοιχείο < / h1 >
< h1 > Δεύτερο Παιδικό Στοιχείο < / h1 >
< / div >
< / div >
< / σώμα >
< / html >
< γραφή >
let get = document.getElementById('child');
let parent = get.parentElement;
console.log('Parent Element -> ', parent.outerHTML);
console.log('Όνομα κόμβου γονικού στοιχείου -> ', parent.nodeName);
ας τα παιδιά = παίρνω.παιδιά;
for(έστω i =0; i < παιδιά.μήκος; i++ ) {
console.log ( `Παιδικό στοιχείο $ { Εγώ } : «Παιδιά [ Εγώ ] .outerHTML ) ;
}
Για ( ας μου = 0 ; i < παιδιά.μήκος; i++ ) {
console.log ( `Κόμβος Παιδικού Στοιχείου Ονομα $ { Εγώ } : «Παιδιά [ Εγώ ] .nodeName ) ;
}
< / γραφή >

Παραγωγή

Αυτό το αποτέλεσμα συνεπάγεται ότι τα γονικά και θυγατρικά στοιχεία του στοιχείου προορισμού εμφανίζονται με λεπτομέρεια (μαζί με τα ονόματα των κόμβων) ανάλογα.

Παράδειγμα 3: Πρόσβαση στο γονικό στοιχείο με χρήση της ιδιότητας 'parentNode'.

Σε αυτήν την επίδειξη, μπορεί να γίνει επίκληση του γονικού στοιχείου ενός συγκεκριμένου στοιχείου και στη συνέχεια θα ληφθεί επίσης το γονικό στοιχείο αυτού του συγκεκριμένου στοιχείου, με αποτέλεσμα μια ένθετη συμπεριφορά. Αυτό μπορεί να επιτευχθεί μέσω του « γονικός κόμβος Αντίθετα, η ιδιότητα που ανακτά τον γονικό κόμβο του στοιχείου.

Κώδικας HTML

< html >
< σώμα >
< div ταυτότητα = 'μητρική εταιρεία' >
< ol ταυτότητα = 'θερμοκρασία' >
< ότι ταυτότητα = 'παιδί' >Python< / ότι >
< ότι >Ιάβα< / ότι >
< ότι >JavaScript< / ότι >
< / ol >
< / div > < / σώμα >
< / html >

Εδώ, δημιουργήστε ένα στοιχείο '

' που περιλαμβάνει περαιτέρω τα στοιχεία '

(παραγγελθείσα λίστα)' και '
1. (στοιχεία λίστας)' που έχουν τα δεδομένα αναγνωριστικά.

   Κώδικας JavaScript

   < γραφή >
   αφήνω παίρνω = έγγραφο. getElementById ( «παιδί» ) ;
   ας γονέα = παίρνω . γονικός κόμβος ;
   κονσόλα. κούτσουρο ( 'Κόμβος γονικού στοιχείου του 'li'->' , μητρική εταιρεία ) ;
   ας πάρει2 = έγγραφο. getElementById ( 'θερμοκρασία' ) ;
   ας γονέας2 = παίρνω2. γονικός κόμβος ;
   κονσόλα. κούτσουρο ( 'Κόμβος γονικού στοιχείου 'ol'->' , γονέας 2 ) ;
   γραφή >

   Με βάση αυτό το απόσπασμα κώδικα, εκτελέστε τα παρακάτω βήματα:

   • Επίκληση του στοιχείου '
   • ' μέσω του ' getElementById() ', αποκτήστε πρόσβαση στον κόμβο του γονικού στοιχείου χρησιμοποιώντας το ' γονικός κόμβος ιδιότητα και εμφανίστε τον γονικό κόμβο.
   • Ομοίως, τώρα επικαλέστε τον γονικό κόμβο που εμφανίζεται, δηλ. «
     » επαναλαμβάνοντας την ίδια μεθοδολογία.

   Ολόκληρος ο Κώδικας

   < html >
   < σώμα >
   < div ταυτότητα = 'μητρική εταιρεία' >
   < ol ταυτότητα = 'θερμοκρασία' >
   < ότι ταυτότητα = 'παιδί' > Πύθων < / ότι >
   < ότι > Ιάβα < / ότι >
   < ότι > JavaScript < / ότι >
   < / ol >
   < / div >
   < γραφή >
   let get = document.getElementById('tempchild');
   let parent = get.parentNode;
   console.log('Parent Element Node of 'li'-> ', parent);
   ας get2 = document.getElementById('temp');
   ας parent2 = get2.parentNode;
   console.log('Parent Element Node of 'ol'-> ', parent2);
   < / γραφή >
   < / σώμα >
   < / html >

   Παραγωγή
   

   Αυτό το αποτέλεσμα σημαίνει ότι οι γονικοί κόμβοι και στις δύο περιπτώσεις εμφανίζονται ανάλογα.

   συμπέρασμα

   Η πρόσβαση στο γονικό στοιχείο είναι δυνατή χρησιμοποιώντας το HTML DOM ' γονικό στοιχείο ' ακίνητο σε συνδυασμό με το ' nodeName ιδιότητα ή ανάκτηση του γονικού κόμβου μέσω της ιδιότητας 'parentNode'. Ωστόσο, για να αποκτήσετε πρόσβαση στο θυγατρικό στοιχείο, χρησιμοποιήστε το ' παιδί ” ιδιοκτησία.