HTML DOM and other issues

[shadowayex]

I'm working on a project that requires a bit of HTML DOM. I ran into some issues, though.I need to frequently use the style property, but I keep running into an error message on Firefox's Error Console that says that says it is undefined, but only if I use certain techniques.document.getElementById("foo").getElementsByTagName("li")[0].style; works, butdocument.getElementById("foo").childNodes[0].style; is undefined.Also:

var lis = document.getElementById("foo").getElementsByTagName("li");for(i = 0; i <= lis.length-1; i++) {	lis[i].style;}

Is apparently defined, but

var lis = document.getElementById("foo").getElementsByTagName("li");for(li in lis) {	li.style;}

is not.My goal is to start by getting an element, which I actually do by getElementsByName and use the first loop I presented, as the second one makes the element's style undefined. With the object, I get some child elements, and set some styles.From there other style changes will be applied based on events.There is obviously something I'm missing with the DOM stuff, otherwise I cannot understand why one method would work on the element while another won't. That being said, if someone can point out what concept I'm missing, that would be wonderful.

[ShadowMage]

I think I've run into this problem before. When you use the (for x in y) syntax it loops through all the indexes/properties for that array. The length property happens to be part of those indexes. If you use FireBug to step through your loop and check the value of li you should at some point see that it equals "length". That's when it throws the error.So I think if you add a conditional in your loop to check for that, it should work:

var lis = document.getElementById("foo").getElementsByTagName("li");for(li in lis) {	if (li != 'length') {		li.style;	}}

I'm not 100% sure about this though, so don't hold me to it.

[shadowayex]

I think I've run into this problem before. When you use the (for x in y) syntax it loops through all the indexes/properties for that array. The length property happens to be part of those indexes. If you use FireBug to step through your loop and check the value of li you should at some point see that it equals "length". That's when it throws the error.So I think if you add a conditional in your loop to check for that, it should work:

var lis = document.getElementById("foo").getElementsByTagName("li");for(li in lis) {	if (li != 'length') {		li.style;	}}

I'm not 100% sure about this though, so don't hold me to it.

Alright, well, I'm trying to work on learning how to run Firebug effectively. Once I do, I'll look for that. But that doesn't solve the childNodes thing though.For example, the following is undefined:

var mainMenus = menu.childNodes;				for(i = 0; i <= mainMenus.length-1; i++) {					mainMenus[i].style.cssFloat == "left";				}			}

[shadowayex]

I was able to use breakpoints to figure it out. I'm learning how to use FireBug effectively.I was able to view that there were other things (namely <TextNode>s or something) that were in the childNodes array. By using if(mainMenus.nodeName == "LI"), I was able to only get <li>s and set their style.Thank you for the FireBug suggestion. By playing with it, I was able to figure out what was going on.I'm pretty sure something of the same nature happens with the for(x in y) loop. Anyone who runs into this problem should use FireBug to figure out what things are in the arrays and use if statements to make the loop skip ones that you don't want to do things to.

[ShadowMage]

That is precisely the reason everyone around here pushes the bill on these debuggers. They are absolutely invaluable when it comes to figuring out your code and why it is or isn't working. I'm glad you were able to figure out your issues on your own. Keep practicing and experimenting with firebug, it'll help immensely. Another great add-on is the DOM Inspector. It let's you look at all the DOM elements and their properties, methods, etc.Oh and if you don't already have it, get the HTML Validator add-on too. It automatically validates your page every time you view it.

[jeffman]

It's also helpful to remember that childnodes includes text nodes, which usually means formatting characters like line breaks and tabs.(I just wanted to make sure the concept was stated clearly.)