¿Hay alguna forma de seleccionar el nodo hermano??

Al integra varias funcionalidades en una página web, puede haber un requisito para relacionarlas para definir su propósito. Por ejemplo, relacionarse con los mismos elementos le da al usuario una comprensión clara. En tales situaciones, la selección de nodos hermanos en JavaScript ayuda a simplificar la complejidad del código, utilizando así los recursos actuales de manera efectiva.

Este blog discutirá los enfoques para seleccionar nodos hermanos en JavaScript.

¿Hay alguna forma de seleccionar el nodo hermano en JavaScript??

Sí! Para seleccionar un nodo hermano en JavaScript, aplique los siguientes enfoques:

• "parentnode"Propiedad y"desparramar(… )"Operador
• "nextelementible" propiedad

Método 1: Selección de los nodos hermanos en JavaScript usando la propiedad ParentNode y el operador de spread (...)

El "parentnode"La propiedad proporciona el nodo principal del elemento. Esta propiedad se puede aplicar combinada con el "Operador de propagación (...)"Para acceder al nodo principal del elemento recuperado y devolver sus nodos hermanos.

Ejemplo
Entendamos el concepto declarado prácticamente:

Domingo

Html

Lunes

CSS

Javascript

Martes

Miércoles

jQuery

const myday = documento.getElementById ("días").parentnode.QuerySelectorAll ("H5");
consola.log ('Los nodos hermanos son:', [... myday].mapa (e => e.intext));

En el bloque de código anterior:

• Especifica el ""Elemento como nodo principal con"identificación" y "estilo"Como sus atributos.
• Además, incluya el "

  " y "

  "Elementos que tienen las identificaciones establecidas.

• En el código JS, acceda al "

  "Elemento a través del"getElementById ()" método.

• Además, aplique el "parentnode"Propiedad y"QuerySelectorAll ()"Método en combinación para acceder al nodo principal del elemento recuperado y devolver todo su (

  ) nodos hermanos.

• Por último, aplique el combinado "Operador de propagación (...)" y "mapa()"Métodos para almacenar el resultado del paso anterior en otra matriz.

Producción

En la salida anterior, se puede ver que todos los nodos hermanos de "

" son mostrados.

Método 2: Seleccione el nodo hermano con la propiedad NextElementsibling utilizando JavaScript

El "QuerySelector ()El método "genera el primer elemento que coincide con un selector CSS y el"nextelementibleLa propiedad devuelve el siguiente elemento en un nivel de árbol similar. En combinación, estos enfoques se pueden implementar para acceder a un elemento específico y devolver su nodo entre hermanos inmediatos.

Sintaxis

nodo.nextelementible

En la sintaxis anterior, se devolverá el próximo hermano del nodo asociado.

Vamos a ver el ejemplo declarado a continuación:

Radio

Mirar

Televisión

Electricidad

Computadora

móvil

const cicent = documento.QuerySelector ('.actual');
const nextSibling = actual.nextElementBling;
consola.log ("El nodo hermano es:", nextSibling);

En el fragmento de código anterior:

• Incluir la ""Elemento y justifíquelo a"centro".
• Después de eso, especifique el "

  "Elementos se comportan como nodos hermanos.

• Además, especifique un elemento particular que tenga el asignado "clase".
• En la parte JavaScript del código, acceda al nodo particular especificado por clase utilizando el "QuerySelector ()" método.
• En el siguiente paso, aplique el "nextelementiblePropiedad para devolver al hermano inmediato con respecto al elemento recuperado.
• Finalmente, muestre el nodo hermano correspondiente.

Producción

La salida anterior significa que el nodo hermano correspondiente se ha recuperado con éxito.

Conclusión

Para seleccionar el nodo hermano en JavaScript, aplique el combinado "parentnode"Propiedad y"desparramar(… )"Operador o el"nextelementible" propiedad. El enfoque anterior accede al nodo principal del elemento recuperado y devuelve sus nodos hermanos. El último enfoque da al siguiente hermano contra el nodo accedido. Este blog explicó los enfoques para seleccionar los nodos hermanos en JavaScript.