Iven Posted June 21, 2018 Share Posted June 21, 2018 (edited) Hello I have a problem when it comes to traversing through DOM nodes and accessing their data(values). Please have a look at the following code HTML <!DOCTYPE html> <html> <head> <title>Page Title</title> <script src="js.js"></script> </head> <body> <div id="div1" class="div1"> <img src="1.png" style="width:100px;height:100px;"/> <h1>This is a Heading1</h1> <p>This is a paragraph1.</p> <button onclick="a(0);">Press me</button> </div> <div id="div1" class="div1"> <img src="2.jpeg" style="width:100px;height:100px;"/> <h1>This is a Heading2</h1> <p>This is a paragraph2.</p> <button onclick="a(1);">Press me</button> </div> <div id="div1" class="div1"> <img src="3.jpeg" style="width:100px;height:100px;"/> <h1>This is a Heading3</h1> <p>This is a paragraph3.</p> <button onclick="a(2);">Press me</button> </div> </body> </html> JAVASCRIPT var elements = document.getElementsByClassName("div1"); function a(index) { var d = elements[index].childNodes[3].nodeValue; alert(d); } Okay so according to my understanding if I want to access and alert the first div's h1 text value which is "This is Heading1" then my JavaScript code should be var d = elements[index].childNodes[1].nodeValue; However I do not get the text value? Also nodeValue gives me NULL if I use innerHTML I get the text value but at childNodes[3] and not childNodes[1] where you'd expect it to be? Also this example contradicts everything you find at https://www.w3schools.com/js/js_htmldom_navigation.asp Can someone please elaborate on this as it is very important to understand and I am tearing my hair out trying to figure this out. Edited June 21, 2018 by Iven Link to comment Share on other sites More sharing options...
dsonesuk Posted June 21, 2018 Share Posted June 21, 2018 (edited) The reason it does not give the result you expect, is because any line breaking or stacking of html is treated as a space, and these or any spaces present is treated as a text node Edited June 21, 2018 by dsonesuk Link to comment Share on other sites More sharing options...
dsonesuk Posted June 21, 2018 Share Posted June 21, 2018 (edited) You can see this, using function a(index) { var d = elements[index].childNodes for (i = 0; i < d.length; i++) { alert(d[i].nodeName); } } Edited June 21, 2018 by dsonesuk Link to comment Share on other sites More sharing options...
Iven Posted June 21, 2018 Author Share Posted June 21, 2018 Thank you so much dsonesuk for bringing clarity and using such an simple example. That makes so much more sense. So I am correct in assuming that node doesn't always just mean elements? It can be spaces too? Link to comment Share on other sites More sharing options...
dsonesuk Posted June 21, 2018 Share Posted June 21, 2018 (edited) Yes! spaces are Text nodes, if you want to be element specific only, use '.children' instead function a(index) { var d = elements[index]; alert("Children length: " + d.children.length); alert(d.children[1].nodeName); alert("childNodes length " + d.childNodes.length); alert(d.childNodes[1].nodeName); } Edited June 21, 2018 by dsonesuk Link to comment Share on other sites More sharing options...
Iven Posted June 21, 2018 Author Share Posted June 21, 2018 Thats awesome thank you Also what is the difference between nodeValue and innerHTML?? And which one should I use to receive the text between element tags? Link to comment Share on other sites More sharing options...
dsonesuk Posted June 21, 2018 Share Posted June 21, 2018 Both work exactly the same if used correctly, with nodeValue you have to access the parent element text node first using childNode[0] then nodeValue (childNode[0].nodeValue), with .innerHTML its simple needs a reference to parent element in question to add or retrieve text within it. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now