Trying to understand differences between Firefox DOM and IE DOM structure/ syntax


I am still new to manipulating the DOM and am doing a few exercises to build up my knowledge. I was trying out some tutorials I found online but I seem to be running into disprepancies from what the tutorial said I should be seeing when viewing in Firefox. Instead of seeing an alert message posting "DIV", I get an alert message displaying "#text". When I view it in IE, it displays the DIV pop up just fine. Is this because the DOM syntax in firefox is different than the one in IE? What areas should I watch out for when I'm working with it between the two? Thanks
<body bgcolor="white"> 
<div id="a" style="font-family: Arial; color: black;  
background: white">Wassup?</div> 
<script language="JavaScript"> 
var obj = document.childNodes[0].childNodes[1].childNodes[0]; 
alert(obj.nodeName); = "red"; 

Open in new window

Who is Participating?
obareeyConnect With a Mentor Commented:
try obj.tagName. actually there are a lot of differences you must watch out between IE and Firefox. It is hard to say especially what you should watch out. try and see.
David S.Connect With a Mentor Commented:
IE doesn't include white-space-only text nodes in the childNodes[] nodeList (it's a lot like an array) or any other way to refer to a child or sibling of an element.

You can use this function instead of accessing childNodes[] directly:

function getChildNode(elm,num,type) { // 2nd and 3rd args are optional
  num=num||0;type=type||1; // by Kravvitz of
  var i=-1,n=elm.childNodes,l=n.length,k=-1;
  while(++i<l) if(n[i].nodeType==type && ++k==num) return n[i];
  return null;

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.