3

Por exemplo, na estrutura abaixo eu tenho uma div que possui um texto e outra div que também possui um texto. Como eu posso capturar ou verificar se um texto é filho direto de uma tag, e não filho de uma outra tag filha:

console.log(document.querySelector('.div1').textContent)
.div1{
  background: #ccc;  
  padding: 10px
}
.div2{
  background: #999;  
  padding: 10px
}
<div class="div1">
  Texto filho direto da div1
  <div class="div2">
    Texto filho direto da div2 e filho indireto da div1
  </div>
</div>

1 Resposta 1

2

Apesar de visualmente não ser visível esse texto e o elemento filho são nós (nodes) diferentes. E podes verificar isso com .nodeType.

Neste caso os tipos 1 e 3 é o que procuras distinguir:

Node.ELEMENT_NODE 1 Um elemento como <p> ou <div>.
Node.TEXT_NODE 3 O texto de um elemento ou atributo.

Assim, para capturar somente o texto e não o conteúdo da descendencia:

var pai = document.querySelector('.div1');
var text = '';
for (var i = 0; i < pai.childNodes.length; ++i) {
  var el = pai.childNodes[i];
  if (el.nodeType === 3) text += el.textContent;
}

console.log(text);
<div class="div1">
  Texto filho direto da div1
  <div class="div2">
    Texto filho direto da div2 e filho indireto da div1
  </div>
</div>

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 .