Obtenha elementos infantis por nome de tag usando javascript

Ao programar em JavaScript, pode haver vários elementos em relação ao mesmo nome de tag que precisa ser buscado para realizar funcionalidade específica. Esses elementos podem ser utilizados para associar os elementos pais e filhos. Nesses cenários, obtendo elementos filhos por nome de tag usando JavaScript é de grande ajuda para simplificar a complexidade do código e fornecer um utilitário ao usuário final.

Este tutorial explicará as abordagens para obter elementos filhos por nome de tag em javascript.

Como obter elementos filhos usando o nome da tag em javascript?

Para obter elementos filhos por nome de tag no JavaScript, aplique os seguintes métodos:

• ““QuerySelectorAll () ”
• ““getElementById ()" e "getElementsByTagName ()" métodos.

Método 1: Obtenha elementos filhos por nome de tag em JavaScript usando o método querySelectorAll ()

O "QuerySelectorAll ()”O método busca todos os elementos que correspondem a um (s) seletor (s) CSS e retorna uma lista de nós. Este método pode ser aplicado para obter os elementos infantis correspondentes, referindo -se ao “eu ia”Do elemento pai e o nome da tag dos elementos filhos de uma só vez.

Sintaxe

documento.QuerySelectorAll (seletores)

Na sintaxe dada:

• ““Seletores”Corresponde a um ou mais de um seletor CSS.

Exemplo

Vamos verificar o seguinte exemplo:

Esta é uma imagem

No trecho de código acima:

• Inclua o “div”Elemento com o indicado“eu ia”.
• Além disso, adicione um título e uma imagem como “criança”Elementos, respectivamente.
• No código JavaScript, acesse o “div”Element (pai) por seu“eu ia”E o cabeçalho (criança) e a imagem (criança) por seus“marcação" nome.
• Isso retornará os elementos filhos buscados pelos nomes de tags na última etapa.

Saída

A saída acima significa que os elementos filhos são buscados com sucesso. Vamos para a próxima abordagem para alcançar a mesma funcionalidade.

Método 2: Obtenha elementos filhos por nome de tag em javascript usando getElementById () e getElementsByTagName () métodos

O "getElementById ()”O método fornece um elemento com o ID correspondente e o“getElementsByTagName ()”Método retorna uma coleção de todos os elementos com o nome da tag. Esses métodos podem ser implementados da mesma forma para buscar o elemento pai por seu ID e os elementos filhos pelo nome da tag. Mas aqui, são necessários métodos separados para executar a funcionalidade especificada separadamente.

Sintaxe

documento.getElementById (id)

Na sintaxe acima:

• ““EU IA”Aponta para o elemento associado“eu ia”

documento.getElementsByTagName (tag)

Na sintaxe fornecida:

• ““marcação”Representa o nome da tag do elemento.

Exemplo

Vamos passar pelo exemplo a seguir:

Nome	Idade	Cidade
atormentar	25	Los Angeles

Aplique as seguintes etapas conforme fornecido no código acima:

• Especifique o "mesa”Elemento (pai) com o especificado“eu ia”.
• Depois disso, adicione o “dados da tabela” elemento com os dados especificados no “linha da tabela” elemento.
• No código JavaScript, em primeiro lugar, busque o elemento pai por seu id usando o “getElementById ()”Método.
• Além disso, acesse o elemento filho por seu nome de tag usando o “getElementsByTagName ()Método simultaneamente.
• Isso resultará na busca de todos os elementos infantis correspondentes ao nome da tag declarada.

Saída

Na saída acima, pode -se observar que todos os “TD”Os elementos da criança dentro da tabela (pai) são buscados com sucesso.

Conclusão

O "QuerySelectorAll ()”Método, o“getElementById ()", ou o "getElementsByTagName ()”Os métodos podem ser utilizados para obter elementos filhos por nome de tag usando JavaScript. O método anterior pode ser aplicado para acessar o elemento pai por seu ID e os elementos filhos por seus nomes de tags separadamente. Os últimos métodos podem ser implementados para obter o ID do elemento pai e os nomes das tags dos elementos filhos usando métodos separados para cada funcionalidade. Este blog demonstrou buscar os elementos filhos por nome de tag em javascript.