JAVASCRIPT MAIS PRÓXIMO()

O método mais próximo() em JavaScript é usado para recuperar o ancestral mais próximo, ou pai do elemento que corresponde aos seletores. Se nenhum ancestral for encontrado, o método retornará nulo .

Este método percorre o elemento e seus pais na árvore do documento, e o percurso continua até que seja encontrado o primeiro nó que corresponda à string do seletor fornecida.

Sintaxe

 targetElement.closest(selectors);

Na sintaxe acima, seletores é uma string contendo um seletor (como p: pairar , etc.) usado para encontrar um nó.

Vamos entender esse método usando algumas ilustrações.

Exemplo 1

Neste exemplo, existem três elementos div e um cabeçalho no qual estamos aplicando o mais próximo() método. Aqui, os seletores que estamos usando são os eu ia seletor, descendente seletor, criança seletor e :não seletor.

 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);

Teste agora

Saída

Após a execução do código acima, a saída será -

Exemplo2

Este é outro exemplo de uso JavaScript de mais próximo() 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);