Internet Explorer and childNodes

Posted on 2006-05-02
Medium Priority
Last Modified: 2007-11-27
Does Internet Explorer support the childNodes[] function?  It doesn't seem to, or maybe it does but it interprets it differently.  Regardless, I'm have this javascript code which tries to find an <img> nested in a <div>, by using the childNodes function.  It works fine on FireFox, but IE gives me an error.

<script type = "text/javascript">
var maindiv = document.getElementById("g0");
var cNode = maindiv.childNodes[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0];
document.getElementById("msgbox").value = cNode;
Question by:chsalvia
LVL 63

Accepted Solution

Zvonko earned 500 total points
ID: 16588252
childNodes array is structured differently in Mozilla and IE because Mozilla adds #text nodes for new line breaks in the html source.
If you realy want the img objects inside another object, then try this:

var maindiv = document.getElementById("g0");
var cNode = maindiv.getElementsByTagName("img")[0]; // first image in g0 div
document.getElementById("msgbox").value = cNode; // but assigning an Image to a textbox does not make sense; perhaps: cNode.src;

LVL 29

Assisted Solution

by:Pravin Asar
Pravin Asar earned 500 total points
ID: 16588352
Here is a code which works all the times. Can find nested images upto any level.

<script language="javascript">
var imgs = new Array();
var iCnt =0;
function getImages (obj) {
     if (!obj) { return; }
     for (var ix=0; ix < obj.childNodes.length; ix++) {
          var cObj = obj.childNodes[ix];
              if (cObj.childNodes) { getImages(cObj); }
          if (!cObj.tagName) { continue; }
          if (cObj.tagName.toLowerCase().match('img')) {
               imgs[iCnt++] = cObj;
function GetImages () {
var dObj = document.getElementById('div1');
      for (ix=0; ix < imgs.length; ix++) {
            alert ('Img ['+(ix+1)+'] ' + imgs[ix].src);
<style type="text/css">
div {
      margin: 10px;
      padding: 20px;
      border: solid;
<input type="button" value="Change Style" onClick="GetImages()">
<div id="div1" >
      <h3>The Click on the button to switch class</h3>
      <img name="1" src="../images/1.gif" width="100" height="100">
      <p>This is a text</p>
            <img name="2" src="../images/2.gif" width="100" height="100">
                  <img name="3" src="../images/3.gif" width="100" height="100">
                              <img name="5" src="../images/5.gif" width="100" height="100">

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question