Existe uma maneira de selecionar o nó do irmão?

Ao integrar várias funcionalidades em uma página da web, pode haver um requisito para relacioná -las para definir seu propósito. Por exemplo, relacionar os mesmos elementos dá ao usuário um entendimento claro. Em tais situações, a seleção de nós irmãos em JavaScript auxilia na simplificação da complexidade do código, utilizando assim os recursos atuais efetivamente.

Este blog discutirá as abordagens para selecionar nós irmãos em JavaScript.

Existe uma maneira de selecionar o nó do irmão em JavaScript?

Sim! Para selecionar um nó de irmão no JavaScript, aplique as seguintes abordagens:

• ““parentnode”Propriedade e“espalhar(… )Operador
• ““NextElementsibling" propriedade

Método 1: Selecionando os nós irmãos em JavaScript usando a propriedade parentenode e o operador de spread (…)

O "parentnode”Propriedade fornece o nó pai do elemento. Esta propriedade pode ser aplicada combinada com o “Operador espalhado (…)”Para acessar o nó pai do elemento buscado e retornar seus nós irmãos.

Exemplo
Vamos entender o conceito declarado praticamente:

Domingo

Html

Segunda-feira

CSS

JavaScript

Terça-feira

Quarta-feira

jQuery

const myday = documento.getElementById ("dias").parentnode.QuerySelectorAll ("H5");
console.log ('Os nós irmãos são:', [… Myday].mapa (e => e.inerText));

No bloco de código acima:

• Especifique o "”Elemento como um nó pai com“eu ia" e "estilo”Como seus atributos.
• Além disso, inclua o “

  " e "

  ”Elementos com os IDs declarados.

• No código JS, acesse o “

  ”Elemento através do“getElementById ()”Método.

• Além disso, aplique o “parentnode”Propriedade e“QuerySelectorAll ()”Método em combinação para acessar o nó pai do elemento buscado e devolver todos os seus (

  ) nós irmãos.

• Por fim, aplique o combinado “Operador espalhado (…)" e "mapa()”Métodos para armazenar o resultado da etapa anterior em outra matriz.

Saída

Na saída acima, pode -se ver que todos os nós irmãos de “

" Estão exibidas.

Método 2: Selecione o nó de irmãos com a propriedade NextElementsibling usando JavaScript

O "QuerySelector ()”O método gera o primeiro elemento que corresponde a um seletor CSS e o“NextElementsibling”Propriedade retorna o próximo elemento em um nível de árvore semelhante. Em combinação, essas abordagens podem ser implementadas para acessar um elemento específico e retornar seu nó de irmão imediato.

Sintaxe

nó.NextElementsibling

Na sintaxe acima, o próximo irmão do nó associado será retornado.

Vamos ver o exemplo abaixo do ponto abaixo:

Rádio

Assistir

Televisão

Eletricidade

Computador

móvel

const atual = documento.QuerySelector ('.atual');
const NextSibling = atual.NextElementsibling;
console.log ("O nó do irmão é:", próximo);

No trecho de código acima:

• Inclua o “”Elemento e justifique -o para“Centro”.
• Depois disso, especifique o “

  ”Elementos se comportando como nós irmãos.

• Além disso, especifique um determinado elemento com o alocado “aula”.
• Na parte JavaScript do Código, acesse o nó específico especificado pela classe usando o “QuerySelector ()”Método.
• Na próxima etapa, aplique o “NextElementsibling”Propriedade para devolver o irmão imediato em relação ao elemento buscado.
• Finalmente, exiba o nó de irmão correspondente.

Saída

A saída acima significa que o nó de irmão correspondente foi recuperado com sucesso.

Conclusão

Para selecionar o nó irmãos em JavaScript, aplique o combinado “parentnode”Propriedade e“espalhar(… )Operador ou o “NextElementsibling" propriedade. A abordagem anterior acessa o nó pai do elemento buscado e retorna seus nós irmãos. A última abordagem dá o próximo irmão contra o nó acessado. Este blog explicou as abordagens para selecionar os nós irmãos em JavaScript.