Obtenha atributo de um nó pai usando JavaScript

Ao lidar com códigos complexos, muitas vezes há um requisito para acessar os atributos de um nó pai específico contra vários nós filhos para aplicar suas funcionalidades. Nesse caso, a utilização dos atributos do conjunto se torna conveniente, em vez de atribuí -los repetidamente. Além disso, obter o atributo de um nó pai usando JavaScript ajuda a viabilizar o acesso e a utilização dos atributos atribuídos.

Este tutorial discutirá as abordagens para obter o atributo de um nó pai usando JavaScript.

Como obter o atributo de um nó pai usando JavaScript?

O atributo do nó pai pode ser buscado em JavaScript usando as seguintes abordagens:

• ““ParentElement”Propriedade com a“getAttribute ()”Método.
• ““mais próximo ()" e "getAttribute ()" métodos.
• ““jQuery" métodos.

Abordagem 1: Obtenha o atributo de um nó pai em JavaScript usando a propriedade ParentElement com o método getAttribute ()

O "ParentElement”Propriedade fornece o elemento pai do elemento associado. Considerando que a "getAttribute ()”O método retorna o valor do atributo de um elemento. Esses métodos podem ser aplicados em combinação para acessar o nó filho e obter o atributo específico do nó pai, referindo -se ao nó filho.

Sintaxe

elemento.getAttribute (nome)

Na sintaxe acima mencionada:

““nome”Aponta para o nome do atributo.

Exemplo
Vamos ver o exemplo a seguir:

Este é o site Linuxhint

No trecho de código acima:

• Em primeiro lugar, inclua o “”Elemento com o indicado“eu ia”Que será considerado como o“pai" nó.
• Na próxima etapa, especifique o “

  ”Elemento com o especificado“eu ia”, Que será tratado como o“criança" nó.

• No código JS, acesse o nó infantil por seu “eu ia"Através do"getElementById ()”Método.
• Depois disso, associe o “ParentElement”Propriedade e a“getAttribute ()”Métodos para o nó infantil buscado.
• Isso resultará na busca do atributo especificado do nó pai, referindo -se ao nó da criança.

Saída

Na saída acima, pode -se observar que, ao se referir ao "ID" do nó pai, o atributo de conjunto correspondente é exibido.

Abordagem 2: Obtenha o atributo de um nó pai em JavaScript usando os métodos mais próximos () e getAttribute ()

O "mais próximo ()”Método pesquisa os elementos em uma árvore dominante que corresponde a um seletor CSS específico. Este método pode ser implementado em combinação com o “getAttribute ()”Método para procurar o elemento mais próximo do elemento filho específico e buscar seu atributo (nó pai).

Sintaxe

elemento.mais próximo (seletores)

Na sintaxe acima:

““Seletores”Corresponde a um ou mais de um seletores CSS.

Exemplo
Vamos passar pelo exemplo a seguir:

Esta é uma imagem

Aplique as seguintes etapas, conforme fornecido nas linhas de código acima:

• Da mesma forma, inclua o nó dos pais e dois nós filhos que tenham o indicado “ids”, Respectivamente.
• No código JavaScript, acesse os nós filhos, conforme discutido, usando o “getElementById ()”Método.
• Na próxima etapa, aplique o “mais próximo ()”Método referente ao“eu ia”Do elemento pai. Isso resultará no acesso ao elemento mais próximo com o ID declarado.
• Além disso, aplique o “getAttribute ()”Método para buscar o especificado“atributo”Do elemento pai acessado na etapa anterior.
• Por fim, exiba o atributo do nó pai correspondente.

Saída

Da saída acima, pode -se ver que o atributo do nó pai “estilo”É buscado.

Abordagem 3: Obtenha o atributo de um nó pai em JavaScript usando métodos jQuery

Essa abordagem pode ser aplicada diretamente para acessar o nó filho e acessar o atributo do nó pai, referindo -se a ele por meio de métodos separados.

Exemplo
O exemplo a seguir ilustra o conceito declarado:

No código acima:

• Inclua o “jQueryBiblioteca para aplicar seus métodos.
• Depois disso, especifique o nó dos pais e do filho da mesma forma. A entrada "texto”O campo aqui atuará como o“criança" nó.
• No código JS, acesse o elemento filho, eu.e., campo de texto de entrada. O "pai ()" e a "attr ()”Os métodos localizarão o atributo especificado no elemento pai e o exibirão por meio de um alerta.

Saída

A saída acima significa que o requisito desejado é alcançado.

Conclusão

A propriedade ParentElement com o método getAttribute () pode redirecionar para o nó pai e buscar seu atributo particular. Os métodos mais próximos () e getAttribute () podem buscar o elemento mais próximo em relação ao elemento filho associado e buscar seu atributo. Enquanto os métodos jQuery podem acessar o nó filho diretamente e usar métodos separados para cada função para executar o requisito desejado. Este blog explica como obter o atributo de um nó pai em JavaScript.