C'è un modo per selezionare il nodo tra fratelli?

Durante l'integrazione di varie funzionalità in una pagina Web, può esserci un requisito per metterle in relazione per definire il loro scopo. Ad esempio, mettere in relazione gli stessi elementi offre all'utente una chiara comprensione. In tali situazioni, la selezione dei nodi tra fratelli in JavaScript aiuta a semplificare la complessità del codice, utilizzando così efficacemente le risorse attuali.

Questo blog discuterà degli approcci per selezionare i nodi di fratelli in JavaScript.

C'è un modo per selezionare il nodo tra fratelli in JavaScript?

SÌ! Per selezionare un nodo tra fratelli in JavaScript, applica i seguenti approcci:

• "parentele"Proprietà e"diffusione(… )"Operatore
• "NextElementsibling" proprietà

Metodo 1: selezione dei nodi tra fratelli in JavaScript utilizzando la proprietà parentNode e lo spread (...) operatore

IL "parentele"La proprietà fornisce il nodo principale dell'elemento. Questa proprietà può essere applicata combinata con "Operatore di diffusione (...)"Per accedere al nodo genitore dell'elemento recuperato e restituire i suoi nodi tra fratelli.

Esempio
Comprendiamo praticamente il concetto dichiarato:

Domenica

Html

Lunedi

CSS

JavaScript

Martedì

Mercoledì

jQuery

const myday = document.getElementById ("giorni").parentele.QuerySelectorAll ("H5");
console.log ('I nodi tra fratelli sono:', [… myday].mappa (e => e.InnerText));

Nel blocco del codice sopra:

• Specificare la ""Elemento come nodo genitore con"id" E "stile"Come i suoi attributi.
• Inoltre, includi il “

  " E "

  "Elementi con ID dichiarati.

• Nel codice JS, accedi al "

  "Elemento tramite il"getElementById ()" metodo.

• Inoltre, applica il "parentele"Proprietà e"QuerySelectorAll ()"Metodo in combinazione per accedere al nodo genitore dell'elemento recuperato e restituire tutto il suo (

  ) nodi tra fratelli.

• Infine, applica il combinato "Operatore di diffusione (...)" E "carta geografica()"Metodi per archiviare il risultato del passaggio precedente in un altro array.

Produzione

Nell'output sopra, si può vedere che tutti i nodi tra fratelli di "

"Sono visualizzati.

Metodo 2: selezionare il nodo tra fratelli con la proprietà NextElementsibling usando JavaScript

IL "QuerySelector ()"Il metodo emette il primo elemento che corrisponde a un selettore CSS e"NextElementsibling"La proprietà restituisce l'elemento successivo a un livello di albero simile. In combinazione, questi approcci possono essere implementati per accedere a un elemento specifico e restituire il suo nodo di fratelli immediati.

Sintassi

nodo.NextElementsibling

Nella sintassi sopra, verrà restituito il fratello successivo del nodo associato.

Panoramiamo l'esempio di seguito:

Radio

Orologio

Televisione

Elettricità

Computer

mobile

const corrente = documento.QuerySelector ('.attuale');
const nextsibling = corrente.NextElementsibling;
console.log ("Il nodo tra fratelli è:", Nextsibling);

Nel frammento di codice sopra:

• Includere il ""Elemento e giustificarlo a"centro".
• Successivamente, specificare il "

  "Elementi che si comportano come nodi tra fratelli.

• Inoltre, specificare un elemento particolare che ha assegnato "classe".
• Nella parte JavaScript del codice, accedi al particolare nodo specificato dalla classe usando "QuerySelector ()" metodo.
• Nel passaggio successivo, applica il "NextElementsibling"Proprietà per restituire il fratello immediato rispetto all'elemento recuperato.
• Infine, visualizza il nodo tra fratelli corrispondente.

Produzione

L'output sopra indica che il nodo fratelli corrispondente è stato recuperato correttamente.

Conclusione

Per selezionare il nodo tra fratelli in JavaScript, applica il combinato "parentele"Proprietà e"diffusione(… )"Operatore o il"NextElementsibling" proprietà. Il primo approccio accede al nodo genitore dell'elemento recuperato e restituisce i suoi nodi tra fratelli. Quest'ultimo approccio dà il fratello successivo contro il nodo accessibile. Questo blog ha spiegato gli approcci per selezionare i nodi tra fratelli in JavaScript.