Neste artigo você vai aprender a como verificar se elemento pai tem um elemento filho específico com JS, vem conferir!
Fala programador(a), beleza? Bora aprender mais sobre JavaScript!
Em muitas situações de programação JavaScript, pode ser necessário verificar se um elemento pai contém um elemento filho específico.
Isso pode ser útil em casos como validação de formulários, manipulação do DOM e interação com elementos HTML específicos.
Existem várias maneiras de verificar se um elemento pai tem um elemento filho específico em JavaScript.
Neste artigo, exploraremos algumas dessas maneiras e discutiremos as vantagens e desvantagens de cada uma.
Usando o método querySelector()
Uma maneira de verificar se um elemento pai tem um elemento filho específico é usando o método querySelector().
O método querySelector() retorna o primeiro elemento que corresponde a um seletor CSS específico em um elemento HTML.
Para verificar se um elemento pai contém um elemento filho específico, você pode usar o método querySelector() com um seletor CSS que corresponda ao elemento filho específico.
Aqui está um exemplo de como fazer isso:
const elementoPai = document.querySelector('.elemento-pai');
const elementoFilho = elementoPai.querySelector('.elemento-filho');
if (elementoFilho) {
console.log('O elemento pai contém o elemento filho.');
} else {
console.log('O elemento pai não contém o elemento filho.');
}
Neste exemplo, o método querySelector() é usado para encontrar o elemento pai com a classe “elemento-pai” e, em seguida, o método é usado novamente para encontrar o elemento filho com a classe “elemento-filho”.
Se o elemento filho existir dentro do elemento pai, a mensagem “O elemento pai contém o elemento filho” será exibida no console.
Caso contrário, a mensagem “O elemento pai não contém o elemento filho” será exibida.
Usando o método contains()
Outra maneira de checar se um elemento pai tem um elemento específico é usando o método contains().
O método contains() verifica se um elemento é um descendente de outro elemento HTML.
Para usar o método contains() para verificar se um elemento pai contém um elemento específico, você pode passar o elemento filho como um argumento para o método contains().
Aqui está um exemplo de como fazer isso:
const elementoPai = document.querySelector('.elemento-pai');
const elementoFilho = document.querySelector('.elemento-filho');
if (elementoPai.contains(elementoFilho)) {
console.log('O elemento pai contém o elemento filho.');
} else {
console.log('O elemento pai não contém o elemento filho.');
}
Neste exemplo, o método contains() é usado para checar se o elemento pai contém o elemento filho.
Se o elemento filho existir dentro do elemento pai, a mensagem “O elemento pai contém o elemento filho” será exibida no console.
Caso contrário, a mensagem “O elemento pai não contém o elemento filho” será exibida.
Usando o método parentElement
Uma terceira maneira de verificar se um elemento pai tem um elemento filho específico é usando a propriedade parentElement.
A propriedade parentElement retorna o elemento pai de um elemento HTML.
Para usar a propriedade parentElement para verificar se um elemento pai contém um elemento filho específico, você pode verificar se o pai do elemento filho é igual ao elemento pai.
Aqui está um exemplo de como fazer isso:
const elementoPai = document.querySelector('.elemento-pai');
const elementoFilho = document.querySelector('.elemento-filho');
if (elementoFilho.parentElement === elementoPai) {
console.log('O elemento pai contém o elemento filho.');
} else {
console.log('O elemento pai não contém o elemento filho.');
}
Neste exemplo, a propriedade parentElement é usada para checar se o pai do elemento filho é igual ao elemento pai.
Se o elemento filho existir dentro do elemento pai, a mensagem “O elemento pai contém o elemento filho” será exibida no console.
Caso contrário, a mensagem “O elemento pai não contém o elemento filho” será exibida.
Quer aprender mais sobre React? Confira o vídeo abaixo:
Conclusão
Checar se um elemento pai tem um elemento filho específico é uma tarefa comum na programação JavaScript, especialmente em situações em que você precisa interagir com elementos HTML específicos e validar dados de formulários.
Neste artigo, discutimos três maneiras diferentes de verificar se um elemento pai contém um elemento específico em JavaScript: usando o método querySelector(), o método contains() e a propriedade parentElement.
Cada abordagem tem suas próprias vantagens e desvantagens, e a escolha da melhor abordagem dependerá do contexto do seu projeto.
O método querySelector() é útil para encontrar um elemento específico em um documento HTML, o método contains() é simples e direto para verificar se um elemento é um descendente de outro elemento HTML, e a propriedade parentElement é uma opção simples e direta para obter o pai de um elemento HTML.
Independentemente da abordagem escolhida, a verificação se um elemento pai tem um elemento filho específico é uma tarefa importante para interagir com elementos HTML e garantir a validação de dados de formulários.
Com a prática, você pode desenvolver seu próprio estilo e preferência na escolha da melhor abordagem para cada situação.
Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.
Nosso principal objetivo é tornar você um dev no menor tempo possível, através de uma metodologia planejada nos mínimos detalhes, após formar muitos outros desenvolvedores.
Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!