Questo post spiega la proprietà 'previousElementSibling' dell'elemento HTML DOM utilizzando JavaScript.
Che cos'è la proprietà 'previousElementSibling' dell'elemento HTML DOM?
L'elemento DOM (Document Object Model) ' precedenteElementSibling ” è una proprietà di sola lettura che aiuta a recuperare il fratello precedente di un elemento nello stesso albero. Questa proprietà restituisce il contenuto del fratello precedente.
Sintassi
elemento. precedenteElementSibling
Questa sintassi restituisce il ' corda ” contenente il contenuto HTML del fratello precedente e “ nullo ” se non esiste.
Usiamo praticamente la sintassi sopra definita per mostrare il funzionamento della proprietà “previousElementSibling”.
Esempio: applicazione della proprietà 'previousElementSibling' per restituire il contenuto del fratello precedente
Questo esempio applica la proprietà JavaScript 'previousElementSibling' per ottenere il contenuto HTML del fratello precedente.
Codice HTML
Innanzitutto, una panoramica del seguente codice HTML:
< Ul >< Quello id = 'Primo' > HTML < / Quello >
< Quello id = 'secondo' > CSS < / Quello >
< Quello id = 'terzo' > javascript < / Quello >
< / Ul >
< P id = 'per' >< / P >
Nelle righe di codice sopra:
- IL '
- All'interno dell'elenco non ordinato, più elementi vengono incorporati utilizzando il '
” tag con i loro ID assegnati. - Infine il “ Il tag ” incorpora un paragrafo vuoto con un ID univoco “para”.
codice javascript
Ora, continua con il codice JavaScript:
< copione >lascia oggetto = documento. getElementById ( 'terzo' ) . precedenteElementSibling . innerHTML ;
documento. getElementById ( 'per' ) . innerHTML = ' Il fratello precedente del terzo elemento è : ' + articolo ;
copione >
Secondo il frammento di codice sopra:
- La variabile 'item' utilizza prima il ' getElementById() ” per accedere all'elemento dell'elenco mirato utilizzando il suo id “terzo” e quindi applicare il “ precedenteElementSibling ” proprietà per ottenere il fratello precedente.
- Dopodiché il “ getElementById() Il metodo ” accede al paragrafo vuoto aggiunto usando il suo id “para” per aggiungerlo con il valore della variabile “item”, cioè il fratello precedente.
Produzione
Come visto, il risultato mostra il fratello precedente dell'elemento mirato, ad esempio (JavaScript).
Conclusione
JavaScript fornisce l'elemento DOM predefinito ' precedenteElementSibling ” per recuperare il fratello precedente di un elemento. Restituisce il fratello precedente di un elemento dallo stesso livello dell'albero in cui si trova l'elemento di destinazione. Questo post ha spiegato in dettaglio la proprietà 'previousElementSibling' dell'elemento HTML DOM in JavaScript.