JavaScript es uno de los lenguajes de programaci n m s populares y comunes en el desarrollo web. Gracias a sus capacidades, los desarrolladores pueden mejorar significativamente la interactividad y la funcionalidad de sus sitios web.
Una tarea importante que un desarrollador web puede enfrentar es obtener un elemento adyacente en una p gina usando JavaScript. Esto puede ser necesario, por ejemplo, para cambiar el estilo o el contenido de un elemento utilizando JavaScript.
C mo es posible obtener un elemento adyacente usando JavaScript? Hay varias maneras de hacerlo. La primera forma es usar propiedades de elementos como previousSibling y nextSibling. Le permiten recuperar los elementos adyacentes antes y despu s del elemento actual, incluidos los nodos de texto y los comentarios. Pero tenga en cuenta que, de forma predeterminada, estas propiedades tambi n pueden devolver otros tipos de nodos, por lo que debe verificar si el elemento recibido es un nodo de elemento.
La segunda forma es usar los m todos previousElementSibling y nextElementSibling. Son similares a las propiedades, pero solo devuelven elementos, no nodos de texto o comentarios. Esto simplifica el trabajo con los elementos resultantes, ya que puede aplicar de inmediato m todos y propiedades que solo est n disponibles para los elementos.
- M todos para obtener elementos adyacentes
- M todo previousElementSibling
- M todo nextElementSibling
- M todos para obtener todos los elementos adyacentes
- M todos para obtener un tipo espec fico de elementos vecinos
- Uso de elementos vecinos en JavaScript
- Pregunta-respuesta
- C mo obtengo un elemento adyacente usando JavaScript?
- C mo obtengo el siguiente elemento usando JavaScript?
- C mo obtengo el elemento anterior usando JavaScript?
- C mo obtengo el primer hijo usando JavaScript?
- C mo obtengo el ltimo hijo usando JavaScript?
M todos para obtener elementos adyacentes
En JavaScript, hay diferentes m todos que permiten obtener elementos adyacentes. Considere algunos de ellos:
- previousSibling-devuelve el nodo anterior del elemento. Este m todo puede devolver tanto un nodo de texto como un elemento HTML. Si el nodo anterior no est presente, se devuelve null.
- nextSibling-devuelve el siguiente nodo de elemento. Del mismo modo, puede devolver tanto un nodo de texto como un elemento HTML. Si el siguiente nodo no est presente, se devuelve null.
- previousElementSibling-devuelve el elemento anterior omitiendo los nodos de texto. Si el elemento anterior no est presente, se devuelve null.
- nextElementSibling-devuelve el siguiente elemento omitiendo los nodos de texto. Si el siguiente elemento no est presente, se devuelve null.
Ejemplo de uso de estos m todos:
var element = document.getElementById("myElement");
var previousSibling = element.previousSibling;
var nextSibling = element.nextSibling;
var previousElementSibling = element.previousElementSibling;
var nextElementSibling = element.nextElementSibling;
En el ejemplo anterior, la variable element representa el elemento al que queremos acceder los elementos adyacentes. Luego usamos los m todos apropiados para obtener los valores del nodo anterior, el siguiente nodo, el elemento anterior y el siguiente elemento.
Tenga en cuenta que los m todos previousElementSibling y nextElementSibling solo devuelven elementos HTML omitiendo nodos de texto. Si solo necesita obtener elementos HTML como vecinos, entonces estos m todos ser n m s apropiados.
Puede utilizar estos m todos para implementar diferentes funciones, por ejemplo, para cambiar el estilo de los elementos adyacentes, a adir/eliminar clases, etc.
M todo previousElementSibling
El m todo previousElementSibling permite obtener el elemento anterior (el elemento adyacente antes del actual) en la estructura DOM del documento HTML con JavaScript.
Este m todo devuelve el elemento anterior m s cercano, que es un elemento de rango (es decir, pertenece al mismo elemento principal) y tiene la misma estructura principal com n.
Por ejemplo, tenemos la siguiente estructura:
Elemento 4
id current-element , :
const currentElement = document.getElementById('current-element');
const previousElement = currentElement.previousElementSibling;
Si no hay ning n elemento anterior, el m todo devolver null.
El m todo previousElementSibling es til para manipular elementos adyacentes en el DOM y se puede usar para crear funciones interactivas en una p gina web.
M todo nextElementSibling
El m todo nextElementSibling devuelve el elemento que sigue al elemento actual, que es un elemento secundario del mismo padre.
Este m todo es til cuando necesita acceder al siguiente elemento para cambiar su contenido, estilos u otros atributos. Por ejemplo, puede usar nextElementSibling para crear un bot n "Mostrar m s" que muestra contenido oculto cuando se hace clic.
Para usar el m todo nextElementSibling, primero debe obtener una referencia al elemento con respecto al cual desea obtener el siguiente elemento. A continuaci n, llame al m todo nextElementSibling para acceder al siguiente elemento.
Elemento 4
Elemento 5
Cambiar estilo
En este ejemplo, despu s de hacer clic en Cambiar estilo, se cambiar el estilo del siguiente elemento despu s del bot n. Como resultado, el texto del siguiente elemento se volver rojo.
El m todo nextElementSibling devuelve null si no hay el siguiente elemento secundario.
M todos para obtener todos los elementos adyacentes
var nextElement = element.nextSibling;
var previousElement = element.previousSibling;
`
2. nextElementSibling y previousElementSibling
M todos
nextElementSibling
similar
nextSibling
e
previousSibling
en consecuencia, pero solo devuelven elementos DOM omitiendo nodos de texto y comentarios.
var previousElement = element.previousElementSibling;
`
3. querySelectorAll
M todo
querySelectorAll
permite seleccionar elementos basados en selectores CSS. Con l, es posible obtener todos los elementos adyacentes que satisfacen un selector espec fico.
`javascript
var siblingElements = element.parentNode.querySelectorAll( .sibling );
`
4. children
Propiedad
children
devuelve una colecci n de todos los elementos secundarios de un nodo. .`javascript
var siblingElements = element.parentNode.children;
var index = Array.prototype.indexOf.call(siblingElements, element);var previousElement = siblingElements[index 1];
var nextElement = siblingElements[index + 1];
`En conclusi n, hay muchos m todos para obtener elementos adyacentes usando JavaScript. Cada uno de ellos tiene sus propias caracter sticas y prop sito. La elecci n del m todo adecuado depende del caso espec fico y los requisitos del proyecto.
M todos para obtener un tipo espec fico de elementos vecinos
JavaScript ofrece varios m todos para obtener elementos adyacentes de un tipo espec fico.
1. M todo previousElementSibling:Este m todo le permite obtener un elemento vecino anterior de un tipo espec fico.
let previousElement = element.previousElementSibling;
2. M todo nextElementSibling:
Este m todo le permite obtener el siguiente elemento adyacente de un tipo espec fico.let nextElement = element.nextElementSibling;
3. M todos previousSibling y nextSibling:
Estos m todos tambi n le permiten obtener el elemento vecino anterior o siguiente, incluidos los nodos de texto. Sin embargo, devuelven cualquier tipo de elemento.
let previousSibling = element.previousSibling;
let nextSibling = element.nextSibling;
4. M todos parentNode y children:
El m todo parentNode le permite obtener el elemento principal, y el m todo children le permite obtener todos los elementos secundarios de un tipo espec fico.
5. M todos previousElementSibling y nextElementSibling con filtro:
Con m todos combinados, puede obtener el primer o el ltimo elemento adyacente de un tipo espec fico.
sea FirstElement = elemento.Siguienteelementsibling;
mientras (FirstElement & & FirstElement. tagName != = 'NOMBRE_ETIQUETA') {
FirstElement = FirstElement.Siguienteelementsibling;
}
deje lastElement = elemento.Anteriorelementosibling;
mientras (lastElement & & lastElement. tagName != = 'NOMBRE_ETIQUETA') {
lastElement = lastElement.Anteriorelementosibling;
}
NOMBRE_ETIQUETA
.
Usando los m todos especificados, puede obtener f cilmente elementos adyacentes de un tipo espec fico y trabajar con ellos en JavaScript.
Uso de elementos vecinos en JavaScript
En JavaScript, hay varias formas de acceder a elementos HTML adyacentes. Esto puede ser til cuando desea cambiar el contenido o el estilo de un elemento adyacente, despu s de realizar una acci n espec fica.
Una de las formas m s f ciles de obtener un elemento adyacente es usar la propiedad nextSibling. Esta propiedad devuelve el siguiente nodo, que es un elemento vecino del nodo actual.
Primer elemento
El segundo elemento
Otra forma es usar el m todo nextElementSibling. La diferencia de este m todo es que devuelve el siguiente elemento, no el nodo.
Primer elemento