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