Ottieni elementi figlio con il nome del tag usando JavaScript

Durante la programmazione in JavaScript, possono esserci più elementi contro lo stesso nome del tag che devono essere recuperati per eseguire funzionalità specifiche. Questi elementi possono essere utilizzati per associare gli elementi genitore e figlio. In tali scenari di caso, ottenere elementi figlio con il nome del tag usando JavaScript è di grande aiuto nel semplificare la complessità del codice e fornire un'utilità all'utente finale.

Questo tutorial spiegherà gli approcci per ottenere elementi figlio con il nome di tag in JavaScript.

Come ottenere elementi figlio usando il nome del tag in javascript?

Per ottenere elementi di figlio in base al nome del tag in JavaScript, applica i seguenti metodi:

• "QuerySelectorAll () "
• "getElementById ()" E "getElementsByTagName ()"Metodi.

Metodo 1: Ottieni elementi figlio con il nome del tag in JavaScript usando il metodo QuerySelectorall ()

IL "QuerySelectorAll ()"Il metodo prende tutti gli elementi che corrispondono a un selettore CSS e restituisce un elenco di nodi. Questo metodo può essere applicato per ottenere gli elementi figlio corrispondenti facendo riferimento al "id"Dell'elemento genitore e il nome del tag degli elementi figlio in una sola go.

Sintassi

documento.QuerySelectorAll (selettori)

Nella sintassi data:

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

Esempio

Dai un'occhiata al seguente esempio:

Questa è un'immagine

Nel frammento di codice sopra:

• Includere il "div"Elemento con il dichiarato"id".
• Inoltre, aggiungi un'intestazione e un'immagine come "bambino"Elementi, rispettivamente.
• Nel codice JavaScript, accedi al "div"Elemento (genitore) dal suo"id"E l'intestazione (bambino) e l'immagine (bambino) dal loro"etichetta" nome.
• Ciò restituirà gli elementi figlio recuperati dai nomi dei tag nell'ultimo passaggio.

Produzione

L'output di cui sopra indica che gli elementi figlio vengono recuperati con successo. Passiamo al prossimo approccio per raggiungere la stessa funzionalità.

Metodo 2: Ottieni elementi figlio per nome tag in javascript usando getElementById () e getElementsByTagName () Metodi

IL "getElementById ()"Il metodo fornisce un elemento con l'ID corrispondente e il"getElementsByTagName ()"Il metodo restituisce una raccolta di tutti gli elementi con il nome del tag. Questi metodi possono essere implementati allo stesso modo per recuperare l'elemento genitore dal suo ID e gli elementi figlio con il loro nome tag. Ma qui sono necessari metodi separati per eseguire la funzionalità specificata separatamente.

Sintassi

documento.getElementById (ID)

Nella sintassi sopra:

• "ID"Punta all'elemento associato"id"

documento.getElementsByTagName (tag)

Nella sintassi fornita:

• "etichetta"Rappresenta il nome del tag dell'elemento.

Esempio

Passiamo attraverso il seguente esempio:

Nome	Età	Città
Harry	25	Los Angeles

Applicare i seguenti passaggi come indicato nel codice sopra:

• Specificare la "tavolo"Elemento (genitore) con il specificato"id".
• Dopodiché, aggiungi il "Dati della tabella" elemento con i dati specificati all'interno del "riga della tabella" elemento.
• Nel codice JavaScript, in primo luogo, prendi l'elemento genitore dal suo ID usando "getElementById ()" metodo.
• Inoltre, accedi all'elemento figlio con il nome del tag usando "getElementsByTagName ()"Metodo contemporaneamente.
• Ciò comporterà il recupero di tutti gli elementi figlio corrispondenti al nome del tag dichiarato.

Produzione

Nell'output sopra, si può osservare che tutti i "td"Gli elementi figlio all'interno della tabella (genitore) vengono recuperati con successo.

Conclusione

IL "QuerySelectorAll ()Metodo ", il"getElementById ()", o il "getElementsByTagName ()"I metodi possono essere utilizzati per ottenere elementi figlio con il nome del tag usando JavaScript. Il precedente metodo può essere applicato per accedere all'elemento genitore dal suo ID e gli elementi figlio con i loro nomi di tag separatamente. Questi ultimi metodi possono essere implementati per ottenere l'ID dell'elemento genitore e i nomi dei tag degli elementi figlio usando metodi separati per ciascuna funzionalità. Questo blog ha dimostrato di recuperare gli elementi figlio con il nome di tag in javascript.