• 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;
</script>
0
chsalvia
Asked:
chsalvia
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:


<script>
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;

</script>
0
 
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');
getImages(document.getElementById('div1'));
      for (ix=0; ix < imgs.length; ix++) {
            alert ('Img ['+(ix+1)+'] ' + imgs[ix].src);
      }
}
</script>
<style type="text/css">
div {
      margin: 10px;
      padding: 20px;
      border: solid;
      border-color:black;
}
</style>
<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>
      <div>
            <img name="2" src="../images/2.gif" width="100" height="100">
            <div>
                  <img name="3" src="../images/3.gif" width="100" height="100">
                  <div>
                        <div>
                              <img name="5" src="../images/5.gif" width="100" height="100">
                        </div>
                  </div>
            </div>
      </div>
</div>
0
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