Question

I need to select some text using javascript (no jquery), and Im not sure how to do it. I need to select the text (‘Hello World’) in myClass element before the first child element. Here are two examples, sometimes it will be an <img> tag as the first element and sometimes it will be a <br> tag. I also need to select the text between the <br> tags.

<p class="myClass" style="padding: 5px;">  
    Hello World

    <img src="http://xyz.com/image.gif">                                            
    <br>
    30-12-2011 19:45
    <br>
    Testing
    <br>
</p>





<p class="myClass" style="padding: 5px;">  
    Hello World                                                                         
    <br>
    30-12-2011 19:45
    <br>
    Testing
    <br>
</p>

Edit note: I also need to select the other text nodes in myClass. And note that sometimes there will be an <img> as one of the child elements and sometimes there won’t.

So I would like to end up with

var a = 'Hello World'
var b = '30-12-2011 19:45'
var c = 'Testing'

Anyone able to do this?

Answer 1

var elem = document.getElementsByClassname("myClass")[0],
    txtNode = elem.childNodes[0],
    txtNodeValue = txtNode.nodeValue;
console.log(txtNodeValue);

Example.

We select the element by its class ([0] just tells it to select the first element in the matched set) and then look for its first child node. In your case this would be the text node, so all we have to do from there is get the nodeValue.