2

Existe alguma forma de eu verificar se uma estrutura existe dentro de outra com Javascript?

Por exemplo: verificar se a div "filho" esta dentro da "pai" para executar uma função:

<div id="pai">
    <div id="filho"></div>
</div>

4 Respostas 4

4

Existe, basta você tentar selecionar o elemento no DOM e verificar sua existência. Tratando-se de elementos com o atributo id definido, basta fazer:

const pai = document.getElementById("pai");
const filho = pai.querySelector("#filho");

if (filho !== null) {
  console.log("O elemento #filho existe em #pai");
} else {
  console.log("O elemento #filho não existe em #pai");
}
<div id="pai">
    <div id="filho"></div>
</div>

Perceba o elemento filho foi buscado com referência ao objeto pai. Isso significa que a busca será feita apenas na árvore de DOM definida pelo elemento pai, e não todo o documento.

Veja funcionando em uma situação que o elemento filho não existe:

const pai = document.getElementById("pai");
const filho = pai.querySelector("#filho");

if (filho !== null) {
  console.log("O elemento #filho existe em #pai");
} else {
  console.log("O elemento #filho não existe em #pai");
}
<div id="pai">
    
</div>

1
  • Ótimo, isso mesmo, bem explicado.
    – Josimara
    Commented 25/10/2017 às 16:33
2

Em querySelector é possível usar os selectores CSS, então é possível usar child combinator - pai > filho.

const elem = document.querySelector("#pai > #filho");

if (elem) {
  console.log("Elemento encontrado");
} else {
  console.log("Elemento nao encontrado");
}
.as-console-wrapper { max-height: 100% !important; top: 0; }
s
<div id="pai">
    <div id="filho"></div>
</div>

2
  • 1
    Opá, melhor ainda!
    – Josimara
    Commented 25/10/2017 às 16:55
  • 1
    Bem lembrado. +1
    – Woss
    Commented 25/10/2017 às 16:57
0

Você pode usar a busca no dom através da div pai, por exemplo:

js pai = document.querySelector('.pai'): possui_div_filho = pai.querySelector('.filho') != null;

-3

Acho que da pra fazer assim também

Se existir a tag(filho) ele retorná True, se não ele retorna False;

let filho = document.getElementById('filho');
let existencia = document.body.contains(filho);

if(existencia == True){
     function desejada();
}

Da uma olhada nesse site aqui

https://horadecodar.com.br/2022/01/04/como-verificar-se-elemento-existe-no-dom-com-javascript/

2
  • 2
    Não precisa de contains, se o elemento não existir o getElementById já vai retornar null, usar o contains dessa forma é redundante. O que o AP quer é verificar dentro de outro elemento especifico.
    – Syzoth
    Commented 29/12/2022 às 20:40
  • Pensei que ele queria saber se um determinado item expecifico esta no codigo, mas reli e entendi que ele quer saber se um determinado item esta dentro de outro. Sorry Commented 30/12/2022 às 1:29

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .