Como detectar se um elemento HTML está vazio com JavaScript

Neste artigo você vai aprender a como detectar se um elemento HTML está vazio com JavaScript, de uma maneira objetiva e simples

Fala programador(a), beleza? Bora aprender a como verificar se um elemento HTML está vazio

Para resolver este problema basicamente precisamos verificar se os nós filhos do nosso elemento alvo estão vazios

Lembrando que um nó no DOM pode ser tanto texto como outros elementos HTML, por isso este método é infalível

Precisamos primeiramente selecionar o elemento, e depois utilizar a propriedade length em childNodes

Veja um exemplo prático:

<div class="elemento"></div>

Este será o nosso HTML, agora vamos ao JavaScript:

var el = document.querySelector(".elemento");

console.log(el.childNodes.length); // 0

Aqui estamos aplicando o que foi passado antes de forma teórica, perceba que se o resultado é 0 é por que não temos elementos dentro

Ou seja, o elemento HTML está vazio

Caso o resultado seja maior ou igual a 1, devemos considerar que o elemento contém algum conteúdo

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Verificando com jQuery

Caso você utilize jQuery em seu projeto, também é muito simples de fazer esta validação

Veja o exemplo prático:

var el = $(".elemento");


console.log(el.is(':empty')); // true

Aqui vamos receber true como resposta, já que há uma validação de comparação

Caso a resposta seja false, o elemento alvo contém algum tipo conteúdo

Conclusão

Neste artigo vimos como detectar se um elemento HTML está vazio com JavaScript

Utilizamos a propriedade childNodes, para verificar se há algum nó no elemento alvo

Caso a resposta seja maior ou igual a 1, o elemento não está vazio e se for 0 ele está

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Cuidado com o espaço em branco:

Aqui mora a pegadinha que derruba muita gente 😀

Nó de texto também conta, e espaço, tabulação e quebra de linha são texto

Ou seja: se teu HTML estiver indentado assim, o elemento parece vazio mas não é

<div class="elemento">
</div>

const el = document.querySelector(".elemento")

console.log(el.childNodes.length) // maior que zero, por causa da quebra de linha

Comentário no HTML também vira nó, então ele entra na conta do mesmo jeito

Se o que tu quer saber é "tem conteúdo de verdade aí dentro?", o caminho é limpar as bordas antes de comparar

const vazio = el.innerHTML.trim() === ""

console.log(vazio)

O trim tira espaço e quebra de linha das pontas, aí a comparação passa a responder o que tu realmente perguntou

childNodes, children ou textContent: qual usar?

Explico o porquê antes do como, beleza?

Os três respondem perguntas DIFERENTES, e é justamente por isso que dá confusão

childNodes: conta qualquer nó, texto e comentário incluídos. Use quando "vazio" significa "não tem absolutamente nada dentro"

children: conta só elementos HTML. Use quando tu quer saber se tem outra tag dentro e o texto solto não importa

textContent: devolve o texto de dentro. Use com trim quando "vazio" significa "não tem texto visível"

const el = document.querySelector(".elemento")

console.log(el.childNodes.length) // qualquer nó
console.log(el.children.length) // só tags
console.log(el.textContent.trim() === "") // só texto

É tipo perguntar se a gaveta está vazia ou se ela não tem pasta dentro: a resposta muda conforme a pergunta 🙂

E sem jQuery, dá pra usar o :empty do mesmo jeito?

Dá sim, e o seletor é exatamente o mesmo

Em JavaScript puro ele entra pelo matches

const el = document.querySelector(".elemento")

console.log(el.matches(":empty")) // true quando não há nenhum nó dentro

A mesma regra de antes vale aqui: espaço e quebra de linha contam como conteúdo, então elemento indentado não passa como vazio

Outra atualização simples nos exemplos: aquele var pode virar const, já que a referência do elemento não muda depois de selecionada

Quem já tem jQuery no projeto segue de boa com o is(‘:empty’), quem está começando um projeto do zero normalmente nem instala jQuery pra isso

Caso este erro apareça: Cannot read properties of null

Antes de xingar o childNodes, se liga: esse erro não é sobre o elemento estar vazio

Ele aparece quando o querySelector não achou NADA, devolveu null, e tu tentou ler uma propriedade do nada

Duas causas clássicas: seletor escrito errado (esqueceu o ponto da classe) ou script rodando antes do HTML existir na página

const el = document.querySelector(".elemento")

if (!el) {
console.log("elemento não existe na página")
} else {
console.log(el.childNodes.length === 0)
}

Elemento inexistente e elemento vazio são coisas diferentes, e tratar os dois no mesmo if evita bug chato lá na frente

Tome cuidado com isso principalmente em script colocado no head, com o HTML ainda nem carregado

E se for um input ou textarea?

Aqui a regra muda, e é bom saber antes de perder tempo

Input e textarea não guardam o que foi digitado como nó filho, eles guardam no value

Então o childNodes vai te dizer que está vazio mesmo com o usuário tendo digitado o nome inteiro

const campo = document.querySelector("#nome")

console.log(campo.value.trim() === "") // true quando o campo está em branco

O trim aqui salva daquele usuário que aperta só a barra de espaço e acha que preencheu 😛