Internet Explorer and childNodes

Posted on 2006-05-02
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

    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 28

    Assisted Solution

    by:Pravin Asar
    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">

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    In Part 1 ( we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
    JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
    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…

    779 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

    Need Help in Real-Time?

    Connect with top rated Experts

    20 Experts available now in Live!

    Get 1:1 Help Now