logo

JavaScript más cercano()

El método más cercano() en JavaScript se utiliza para recuperar el ancestro más cercano o el padre del elemento que coincide con los selectores. Si no se encuentra ningún antepasado, el método devuelve nulo .

Este método atraviesa el elemento y sus padres en el árbol del documento, y el recorrido continúa hasta que se encuentra el primer nodo que coincida con la cadena de selección proporcionada.

Sintaxis

 targetElement.closest(selectors); 

En la sintaxis anterior, selectores es una cadena que contiene un selector (como p: flotar , etc.) utilizado para encontrar un nodo.

Entendamos este método usando algunas ilustraciones.

Ejemplo 1

En este ejemplo, hay tres elementos div y un título en el que aplicamos el más cercano() método. Aquí, los selectores que estamos usando son los identificación selector, descendiente selector, niño selector, y :no selector.

 This is the first div element. <h3 id="h"> This is a heading inside the div. </h3> This is the div inside the div element. This is the div element inside the second div element. var val1 = document.getElementById(&apos;div3&apos;); var o1 = val1.closest(&apos;#div1&apos;); var o2 = val1.closest(&apos;div div&apos;); var o3 = val1.closest(&apos;div &gt; div&apos;); var o4 = val1.closest(&apos;:not(#div3)&apos;); console.log(o1); console.log(o2); console.log(o3); console.log(o4); 
Pruébalo ahora

Producción

Después de la ejecución del código anterior, el resultado será:

JavaScript más cercano()

Ejemplo2

Este es otro ejemplo de uso javascript 's más cercano() método.

 This is the div element. <p id="p1"> This is the paragraph element inside the div element. </p><h3 id="h"> This is the child of the paragraph element. <p id="p2"> This is the child of heading element of the paragraph element. </p> </h3> <p></p> var val1 = document.getElementById(&apos;p2&apos;); var o1 = val1.closest(&apos;p&apos;); var o2 = val1.closest(&apos;h3&apos;); var o3 = val1.closest(&apos;div&apos;); console.log(o1); console.log(o2); console.log(o3); 
Pruébalo ahora

Producción

Después de la ejecución del código anterior, el resultado será:

JavaScript más cercano()