• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 3090
  • Last Modified:

Internet Explorer and childNodes

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;
2 Solutions
ZvonkoSystems architectCommented:
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;

Pravin AsarPrincipal Systems EngineerCommented:
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">
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.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now