Jump to content

script finds childnode with no tagname


Jack McKalling

Recommended Posts

What is happening if I use this script:

alert(document.getElementById("thelp").childNodes[2].tagName);

...and it returns undefined, when this script:

alert(document.getElementById("thelp").childNodes.length);

...returns 9????In the source code there are only 7 elements to be found, so I conclude the DOM structure finds two more elements, resulting in no tagName, thus not being in existance.. wtf???[*Edit:]I hope I dont have to post the source code because it will take a long time analysing. Take it there are just 7 elements in it, and it still finds 9 but the extra with no tagName

Link to comment
Share on other sites

it is really hard to say Dan without seeing the code. If it says there are 9 elements then there are 9 elements, there must be something happening that you are not accounting for,

Link to comment
Share on other sites

have you tested in more than one browser? It could be a browser quirk.Try doing this and see what the results are.

var nodes = document.getElementById("thelp").childNodes;for(i=0;i<nodes.length;i++){  alert(i + ": " + nodes[i].tagName);}

Link to comment
Share on other sites

I don't know either.However, I found a way to circumvent this problem, by placing the childnodes that I want it to count, in a container div.And then I stumbled upon another problem, it wasn't cross-browser! FireFox then overtook saying there were too much childnodes than I knew there were.Now I *think* I know what it was all about.Lovely FireFox comes with this DOM inspector, and I found out it reads some textnodes besides the original element nodes. That must have been the reason in IE too! I hope so...Before:

<div id="container">  <div>head</div>  <div>body1</div>  <div>body2</div>  <div>body3</div>  <div>foot</div></div>

bodyslength = document.getElementById("container").childNodes.length-2;

Sollution:

<div id="container">  <div>head</div>  <div id="containerbody">	<div>body1</div>	<div>body2</div>	<div>body3</div>  </div>  <div>foot</div></div>

bodyslength = document.getElementById("containerbody").getElementsByTagName("div").length;

In other words, narrow the target, and explicitely name the target names instead of letting it count them.This last code works in both IE and FF. I have been testing my programming in FF too for some time now, very smart that is.

Link to comment
Share on other sites

Different browsers treat the DOM differently. Try out both of these very similar scripts in both IE and Firefox:

<html><body><div id="test">  <div></div>  <div></div>  <div></div></div><div id="Label"></div><script>var div = document.getElementById("test");var children = div.childNodes;var label = document.getElementById("Label");for(x in children){    label.innerHTML += x + ": " + children[x] + "<br />";}</script></body></html>

<html><body><div id="test"><div></div><div></div><div></div></div><div id="Label"></div><script>var div = document.getElementById("test");var children = div.childNodes;var label = document.getElementById("Label");for(x in children){    label.innerHTML += x + ": " + children[x] + "<br />";}</script></body></html>

If you set up your HTML like so:

<div>  <div></div>  <div></div>  <div></div></div>

IE will see three child elements of the first div whereas Firefox will see 7 (3 elements and four [empty] text nodes - one for each line break).

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...