IE 7 and 8 problem in using Javascript DOM children property

When using Javascript DOM children property in IE 7 and 8, it will retrieve comments also as nodes.

To avoid this problem, you need to loop the child nodes and find out required nodes from child list.
Here is simple code explaining the problem.

  <div id="slideshow">
    <div id="slides">
     <!-- START slide 1 -->
      <div class="slide"> <img src="home_photos/home-01.jpg" width="975" height="450" />
      </div><!-- END slide 1 -->
      <!-- START slide 2-->
      <div class="slide"> <img src="home_photos/home-02.jpg" width="975" height="450" />
      </div><!-- END slide 2 -->
      <!-- START slide 3 -->
      <div class="slide"> <img src="home_photos/home-03.jpg" width="975" height="450" />
      </div><!-- END slide 3 -->
     <!-- START slide 4 -->
      <div class="slide"> <img src="home_photos/home-04.jpg" width="975" height="450" />
      </div><!-- END slide 4 -->
     </div><!-- END slides -->
   </div> <!-- END SLIDESHOW -->

To find out the slide images without comments section, we need to use tagName to eliminate comment nodes from list.

    var tempCollection = document.getElementById("slides").children;
    var slidesCollection = [];
    for(var i = 0; i < tempCollection.length; i++)
    {
    	if (tempCollection[i].tagName != "DIV") continue;
    	slidesCollection.push(tempCollection[i]);
    }
    totalSlides = slidesCollection.length;

Leave a Reply

Your email address will not be published. Required fields are marked *

*