Javascript:: textContent/innerText of firstChild

Question

My code is pretty much explain itself of what I'm about to get :

<div id=player>
    <div class="button hand">&#9658;</div>
    <div class=time>00:00/02:25</div>   
    <div class="timeline hand"><span class="now hand"></span></div>
</div>

<script>

var myPlayer=document.getElementById('player').firstChild;
var playerStatus=(myPlayer.innerText||myPlayer.textContent);

console.log(playerStatus);

</script>

I'm expect to get the ascii value ► on console.

Small tweak needed here

Answer 1

Try this:

var myPlayer=document.getElementById('player').firstElementChild;

The problem is that the first child of #player is a text node itself. What you're looking for is the first element child of #player .

A minor note: firstElementChild isn't supported by IE8-.

Answer 2

You have both id and class available, so use querySelector() .

var myPlayer=document.querySelector('#player > .button.hand');

This also has the benefit of working in IE8.

---

Also, a shortcut for innerText/textContent is to check for it at the top of your script, and store the appropriate key in a string.

var text = ("textContent" in document) ? "textContent" : "innerText";

Then use square brackets with the text variable.

var myPlayer=document.querySelector('#player > .button.hand');
var playerStatus=(myPlayer[text]);

Then you can actually shorten it like this:

var playerStatus=document.querySelector('#player > .button.hand')[text];