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

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