View Full Version : Wrong childeNode.nodeName in IE?

04-04-2006, 01:35 PM
Okay I was coding some DOM earlier today. I noticed that IE and FF have a different DOM structure. For example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
div {
border:1px solid #000;

<div onclick="alert(this.childNodes[1].nodeName)">
<input type="radio" />
Clicking on the div in FF will alert INPUT but in IE it will alert #text. Am I doing something wrong or is this just the way IE interprets the document? Anyway to get the same results in IE and FF?

04-04-2006, 01:49 PM
Yeah Mozilla and IE have inconsistent DOMs with respect to whitespace text nodes. There's a number of ways you can deal with this:

- don't rely on child relationships, use iterators like getElementsByTagName,

- do node conversion by checking for node names and converting references to next or previous sibling as appropriate

- normalize the section of DOM you're interested in by removing all useless whitespace

The third method is a process overhead to do it in the first place, but it you gives you a nice predictable stucture afterwards. Check out this script by Alex - http://www.codingforums.com/showthread.php?t=7028

Note however that you can't do this in Mac/IE5 or it will undermine the visual rendering - in mac/ie5 nested structures collapse when stripped of whitespace. But if you're lucky you don't have to think about that ;)

Bill Posters
04-04-2006, 01:53 PM

04-04-2006, 02:22 PM
You may also rely on the nodeType attribute while using a while loop through the childNodes

04-04-2006, 02:54 PM
Thanks guys. Alex's script seemed to work well.