firstChild e lastChild problema com espaços em brancos entre Tag's

[Manoel Barros 1]

Galera tudo beleza!

E o seguinte to tentando resolver um problema com a propriedade firstChild e lastChild.

vou tentar explicar em detalhe para vocês entenderem o problema que estou tento, vamos lá

to tentando pegar o primeiro elemento(span) com a propriedade firstChild, o resultado deve alerta "span"

<p id="para-01">
  <span>Primeiro span</span>
</p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
</script>

No exemplo acima, o alerta mostrará "#text" e não "span" como eu esperava. Descobri que isso acontece por que qualquer espaço em branco entre as tags, fará com que o nó "#text" seja inserido. Bom para resolver isso eu removi todos os espaços em brancos entre as tags, e ficou assim

<p id="para-01"><span>Primeiro span</span></p>

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  alert(p01.firstChild.nodeName)
</script>

Agora sim o alerta mostrará "span".

Bom como fazer que pegue somente o elemento "span" mesmo tendo espaços e mais espaço entre as tags, alguém sabe resolver isso?

Obs: existem outras maneiras de se pegar o elemento sem ser com firstChild, só que eu presiso que seja com a propriedade firstChild ou lastChild

[William Bruno 1501]

Cara, não é possível. Veja:

 

<script type="text/javascript">
  var p01 = document.getElementById('para-01');
  console.log(p01.childNodes);
</script>

com a quebra de linha, é filha também do elemento p.

 

Vc realmente não sabe o nome da tag ?

com getElementsByTagName() não teria esse tipo de problema.