Ottieni l'attributo di un nodo genitore usando JavaScript

Mentre si tratta di codici complessi, è spesso necessario accedere agli attributi di un particolare nodo genitore contro più nodi figlio per applicare le sue funzionalità. In tal caso, l'utilizzo degli attributi set diventa conveniente piuttosto che assegnarli ripetutamente. Inoltre, ottenere l'attributo di un nodo genitore utilizzando JavaScript aiuta a rendere fattibile l'accesso e utilizzare efficacemente gli attributi assegnati.

Questo tutorial discuterà gli approcci per ottenere l'attributo di un nodo genitore usando JavaScript.

Come ottenere l'attributo di un nodo genitore usando JavaScript?

L'attributo del nodo genitore può essere recuperato in JavaScript usando i seguenti approcci:

• "parentelement"Proprietà con il"getAttribute ()" metodo.
• "più vicina()" E "getAttribute ()"Metodi.
• "jQuery"Metodi.

Approccio 1: Ottieni l'attributo di un nodo genitore in JavaScript usando la proprietà parentelement con il metodo getAttribute ()

IL "parentelement"La proprietà fornisce l'elemento genitore dell'elemento associato. Mentre il "getAttribute ()"Il metodo restituisce il valore dell'attributo di un elemento. Questi metodi possono essere applicati in combinazione per accedere al nodo figlio e ottenere l'attributo particolare del nodo genitore facendo riferimento al nodo figlio.

Sintassi

elemento.getAttribute (nome)

Nella sintassi sopra data:

"nome"Punta il nome dell'attributo.

Esempio
Panoramiamo il seguente esempio:

Questo è il sito web Linuxhint

Nel frammento di codice sopra:

• In primo luogo, includi il ""Elemento con il dichiarato"id"Che sarà considerato come il"genitore"Nodo.
• Nel passaggio successivo, specificare il "

  "Elemento con il specificato"id", Che sarà trattato come il"bambino"Nodo.

• Nel codice JS, accedi al nodo figlio con "id"Tramite il"getElementById ()" metodo.
• Dopodiché, associa il "parentelement"Proprietà e"getAttribute ()"Metodi al nodo figlio recuperato.
• Ciò comporterà il recupero dell'attributo specificato del nodo genitore facendo riferimento al nodo figlio.

Produzione

Nell'output di cui sopra, si può osservare che facendo riferimento al "ID" del nodo genitore, viene visualizzato l'attributo set corrispondente.

Approccio 2: Ottieni attributo di un nodo genitore in JavaScript usando i metodi Closest () e getAttribute ()

IL "più vicina()"Il metodo cerca gli elementi in un albero DOM corrispondente a un selettore CSS specifico. Questo metodo può essere implementato in combinazione con "getAttribute ()"Metodo per cercare l'elemento più vicino al particolare elemento figlio e prendere il suo attributo (nodo genitore).

Sintassi

elemento.più vicino (selettori)

Nella sintassi sopra:

"selettori"Corrisponde a uno o più di un selettore CSS.

Esempio
Passiamo attraverso il seguente esempio:

Questa è un'immagine

Applicare i seguenti passaggi come indicato nelle righe di codice sopra:

• Allo stesso modo, includi il nodo genitore e due nodi figlio che hanno il dichiarato "IDS"Rispettivamente.
• Nel codice JavaScript, accedi ai nodi figlio, come discusso, usando il "getElementById ()" metodo.
• Nel passaggio successivo, applica il "più vicina()"Metodo che si riferisce al"id"Dell'elemento genitore. Ciò comporterà l'accesso all'elemento più vicino con l'ID dichiarato.
• Inoltre, applica il "getAttribute ()"Metodo per recuperare il specificato"attributo"Dell'elemento genitore accessibile nel passaggio precedente.
• Infine, visualizzare l'attributo del nodo genitore corrispondente.

Produzione

Dall'output sopra, si può vedere che l'attributo del nodo genitore "stile"È recuperato.

Approccio 3: ottieni l'attributo di un nodo genitore in JavaScript usando i metodi jQuery

Questo approccio può essere applicato per accedere direttamente al nodo figlio e accedere all'attributo del nodo genitore facendolo riferimento tramite metodi separati.

Esempio
Il seguente esempio illustra il concetto dichiarato:

Nel codice sopra:

• Includere il "jQuery"Biblioteca per applicare i suoi metodi.
• Successivamente, specifica anche il nodo genitore e figlio. L'input "testo"Il campo qui fungerà da"bambino"Nodo.
• Nel codice JS, accedi all'elemento figlio, io.e., Campo di testo di input. IL "genitore()" e il "attr ()"I metodi individueranno l'attributo specificato nell'elemento genitore e lo visualizzeranno tramite un avviso.

Produzione

L'output di cui sopra significa che viene raggiunto il requisito desiderato.

Conclusione

La proprietà parentelement con il metodo getAttribute () può reindirizzare al nodo genitore e recuperare il suo attributo particolare. I metodi più vicini () e getAttribute () possono recuperare l'elemento più vicino rispetto all'elemento figlio associato e prendere il suo attributo. Mentre i metodi jQuery possono accedere direttamente al nodo figlio e utilizzare metodi separati per ciascuna funzione per eseguire il requisito desiderato. Questo blog spiega come ottenere l'attributo di un nodo genitore in javascript.