Esta publicación explica la propiedad 'previousElementSibling' del elemento HTML DOM usando JavaScript.
¿Qué es la propiedad 'previousElementSibling' del elemento HTML DOM?
El elemento DOM (Document Object Model) “ anteriorElementoSibling ” es una propiedad de solo lectura que ayuda a recuperar el hermano anterior de un elemento en el mismo árbol. Esta propiedad devuelve el contenido del hermano anterior.
Sintaxis
elemento. anteriorElementoSibling
Esta sintaxis devuelve el ' cadena ” que contiene el contenido HTML del hermano anterior, y “ nulo ” si no existe.
Usemos la sintaxis definida anteriormente de manera práctica para mostrar el funcionamiento de la propiedad 'previousElementSibling'.
Ejemplo: aplicar la propiedad 'previousElementSibling' para devolver el contenido del hermano anterior
Este ejemplo aplica la propiedad 'previousElementSibling' de JavaScript para obtener el contenido HTML del hermano anterior.
código HTML
Primero, una descripción general del siguiente código HTML:
< ul >< eso identificación = 'primero' > HTML < / eso >
< eso identificación = 'segundo' > CSS < / eso >
< eso identificación = 'tercero' > JavaScript < / eso >
< / ul >
< pag identificación = 'para' >< / pag >
En las líneas de código anteriores:
- El '
- Dentro de la lista desordenada, varios elementos se incrustan utilizando el '
” etiqueta con sus identificaciones asignadas. - Por último, el “ La etiqueta ” incrusta un párrafo vacío con una identificación única “para”.
Código JavaScript
Ahora, continúa con el código JavaScript:
< guion >dejar artículo = documento. getElementById ( 'tercero' ) . anteriorElementoSibling . HTML interno ;
documento. getElementById ( 'para' ) . HTML interno = ' El hermano anterior del tercer elemento es : ' + artículo ;
guion >
De acuerdo con el fragmento de código anterior:
- La variable 'elemento' primero usa el ' getElementById() ” para acceder al elemento de la lista de destino utilizando su id “tercero” y luego aplicar el “ anteriorElementoSibling ” propiedad para obtener su hermano anterior.
- Después de eso, el “ getElementById() El método accede al párrafo vacío agregado usando su id 'para' para agregarlo con el valor de la variable 'elemento', es decir, el hermano anterior.
Producción
Como se ve, el resultado muestra el hermano anterior del elemento de destino, es decir, (JavaScript).
Conclusión
JavaScript proporciona el elemento DOM predefinido ' anteriorElementoSibling ” propiedad para recuperar el hermano anterior de un elemento. Devuelve el hermano anterior de un elemento del mismo nivel de árbol donde se encuentra el elemento de destino. Esta publicación explica en profundidad la propiedad 'previousElementSibling' del elemento HTML DOM en JavaScript.