Javascript HTML DOM select

Question

I have a question regarding HTML element selection using javascript.

Here is my code:

Javascript

<script>
    function changeText() { 
        document.getElementsByClassName("CentralContainer")[0].getElementsByClassName("PlayFlowSelect")[0].childNodes[1].innerHTML = "Custom Stream";
                }
</script>

HTML

<div class="CentralContainer">
        <div class = "PlayFlowSelect">
            <input type="image" src="./Home Page Resources/ArrowLeftIcon.png" onclick="changeText()">
            <h2> Top Stories </h2>
            <input type="image" src="./Home Page Resources/ArrowRightIcon.png" onclick="alert('Trigger Upload Page')">
        </div>

For some reason my selection path in my javascript isn't selecting the h2 innerHTML. I'm not sure why... Any help?

Probably you're selecting a text node (space between elements). Try to get the nodeType of the node retrieved — Fabrizio Calderan
– Fabrizio Calderan, Commented Jan 21, 2015 at 15:40
I don't think it is a good idea to select an element this way. If for some reason you put some other html element before the <h2> tag, your code will not work properly. Something like @atmd's answer looks better to me. — Al.G.
– Al.G., Commented Jan 21, 2015 at 15:47
@Al.G. I agree - this is likely to break in the long term. JLRishe's answer explains well why it isn't currently working though, and is the correct answer in this instance. Using querySelectorAll would be better still, as you could just use document.querySelectorAll('.CentralContainer .PlayFlowSelect h2') — James Thorpe
– James Thorpe, Commented Jan 21, 2015 at 15:54
@JamesThorpe OK, I agree. JLRishe explains the real reason how it works, but if I had to do it, I would do it atmd's way. — Al.G.
– Al.G., Commented Jan 21, 2015 at 16:00

JLRishe · Accepted Answer · 2015-01-21 16:13:53Z

2

As suggested in the comments, the childNodes property includes all child nodes, including text nodes, which would mean that the h2 you want would be childNodes[3].

You can use the .children property to get just element children:

function changeText() { 
    document.getElementsByClassName("CentralContainer")[0]
            .getElementsByClassName("PlayFlowSelect")[0]
            .children[1].textContent = "Custom Stream";
}

But as other answers and comments have suggested, this is not the cleanest or most reliable way to do this.

edited Jan 21, 2015 at 16:13

answered Jan 21, 2015 at 15:44

JLRishe

102k19 gold badges138 silver badges171 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Izzo Over a year ago

What is the difference between textContent and innerHTML?

JLRishe Over a year ago

The difference is that el.textContent = '<b>Hi!</b>'; would display <b>Hi</b> in the page, while el.innerHTML = '<b>Hi!</b>'; would display Hi! in the page. The best practice is to avoid innerHTML unless you specifically treat a value as HTML. innerHTML creates a risk for XSS vulnerabilities and other problems.

atmd · Accepted Answer · 2015-01-21 15:45:43Z

1

You could change it slightly to get the H2 element by the tag name

document.getElementsByClassName("CentralContainer")[0].
getElementsByClassName("PlayFlowSelect")[0].
getElementsByTagName('h2')[0].innerHTML;

Reads a bit cleaner (IMO) then more array node indexes and avoid additional id's

answered Jan 21, 2015 at 15:45

atmd

7,5003 gold badges35 silver badges64 bronze badges

Comments

Alberto · Accepted Answer · 2015-01-21 15:43:22Z

-1

Give the <h2> tag an ID and call getElementById()

function changeText() { 
        document.getElementById("header").innerHTML = "test";
}

<div class="CentralContainer">
        <div class = "PlayFlowSelect">
            <input type="image" src="./Home Page Resources/ArrowLeftIcon.png" onclick="changeText()">
            <h2 id="header"> Top Stories </h2>
            <input type="image" src="./Home Page Resources/ArrowRightIcon.png" onclick="alert('Trigger Upload Page')">
        </div>
</div>

Hope this helped. Best regards

answered Jan 21, 2015 at 15:43

Alberto

4,2625 gold badges24 silver badges36 bronze badges

Collectives™ on Stack Overflow

Javascript HTML DOM select

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related