Come accedere all'elemento genitore utilizzando la proprietà parentElement del DOM HTML

Come Accedere All Elemento Genitore Utilizzando La Proprieta Parentelement Del Dom Html



Durante l'aggiunta di più funzionalità nel Document Object Model (DOM) utilizzando JavaScript, lo sviluppatore spesso deve analizzare l'associazione dell'elemento. Ciò può essere ottenuto registrando l'elemento genitore degli elementi di destinazione che semplifica il flusso del codice e la formattazione delle funzionalità incluse nel sito.

Panoramica dei contenuti

Qual è la proprietà 'parentElement' in JavaScript?

IL ' parentElement ' in JavaScript recupera l'elemento che è il genitore dell'elemento di destinazione.

Come accedere/richiamare l'elemento genitore tramite la proprietà parentElement del DOM HTML?

È possibile accedere all’elemento genitore utilizzando il DOM HTML “ parentElement 'proprietà con il' nomeNodo ' o recuperando invece il nodo dell'elemento genitore tramite la proprietà ' parentNode ' proprietà.





Sintassi



nodo. parentElement

Valore di ritorno
Questa proprietà recupera un oggetto elemento che rappresenta il nodo dell'elemento genitore di un nodo e fornisce ' nullo ' se il nodo non comprende un genitore.



Metodi e proprietà comuni utilizzati

document.querySelector() : questo metodo ottiene il primo elemento corrispondente al selettore CSS.



Sintassi

documento. querySelector ( Questo )

In questa sintassi, “ Questo ' si riferisce a uno o più selettori CSS.



document.getElementById() : Restituisce l'elemento con l'id specificato.

Sintassi

documento. getElementById ( id )

Qui, ' id ' indica l'ID dell'elemento di destinazione da recuperare.

indice selezionato : questa proprietà recupera l'indice dell'opzione selezionata dall'elenco a discesa. IL '-1' L'opzione deseleziona tutte le opzioni.

nomeNodo : questa proprietà recupera il nome del nodo.

bambini : questa proprietà restituisce gli elementi figlio dell'elemento come raccolta.

externalHTML : questa proprietà assegna o recupera l'elemento HTML nonché i suoi attributi e i tag di inizio e fine.

parentNode : Questa particolare proprietà recupera il nodo genitore di un elemento o di un nodo.

Nota : La differenza tra “ parentElement ' E ' parentNode ' proprietà è che la proprietà precedente, ovvero 'parentElement' fornisce ' nullo ' se il nodo genitore non riflette un nodo elemento.

Esempio 1: accesso all'elemento genitore tramite la proprietà 'parentElement' in JavaScript

Questo esempio richiama l'elemento genitore di un elemento e ne visualizza il nome del nodo (genitore) facendo clic sul pulsante.

Codice HTML


< html >
< corpo >
< h1 > Proprietà parentElement in JavaScript < / h1 >
< h2 > Seleziona la lingua: < / h2 >
< Selezionare classe = 'elemento' >
< opzione > Pitone < / opzione >
< opzione > Giava < / opzione >
< opzione > JavaScript < / opzione >
< / Selezionare >
< pulsante al clic = 'displayParent()' classe = 'pulsante' > Visualizza l'elemento genitore dell'elemento 'opzione'. < / pulsante >
< div classe = 'temp' >< / div >< / corpo >
< html >

In questo codice:

  • Specificare il dato “

    ” E “

    ” elementi che compongono rispettivamente i titoli di primo e di secondo livello.

  • Successivamente, crea un file “” elemento rappresentato dalla classe data che contiene gli ulteriori elementi figli, ovvero “” .
  • Ora crea un pulsante associato a un ' al clic 'evento che reindirizza al file “displayParent()” funzione facendo clic sul pulsante.
  • Infine, specifica il “
    ” elemento in cui deve essere visualizzato il risultato, ovvero l'elemento genitore a cui si accede.

Codice CSS

>
corpo {
allineamento del testo : centro ;
colore : #F F F ;
colore di sfondo : grigio ;
altezza : 100% ;
}
.pulsante {
altezza : 2rem ;
raggio di confine : 2px ;
larghezza : 35% ;
margine : 2rem auto ;
Schermo : bloccare ;
colore : #ba0b0b ;
cursore : puntatore ;
}
.temp {
dimensione del font : 1,5 rim ;
peso del carattere : grassetto ;
}
>

Nel codice CSS sopra:

  • Definisci lo stile della pagina Web complessiva con le proprietà applicate 'text-align', ' background-color ', ecc.
  • Allo stesso modo, applica lo stile al pulsante creato tramite la sua classe regolandone l'altezza, la larghezza, la visualizzazione, il colore, ecc.
  • Infine, modella il ' div ' facendo riferimento al nome della classe in cui deve essere visualizzato l'elemento genitore a cui si accede.

Codice JavaScript



< sceneggiatura >
funzione displayParent ( ) {
era Ottenere = documento. querySelector ( '.elemento' ) ;
era Questo = Ottenere . opzioni [ Ottenere . indice selezionato ] ;
era aggiungere = documento. querySelector ( '.temp' ) ;
aggiungere. innerHTML = 'L'elemento principale dell'opzione Elemento è -> ' + Questo. parentElement . nomeNodo ;
}
sceneggiatura >

Secondo queste righe di codice:

  • Definire la funzione “displayParent()” che accede all'elemento “