how to get all tags under a div tag using javascript in mozilla

Question

function handle_node(entity)
{
    var i = 0;

    var varName = window.event.srcElement.name.substring(0,7);
    var fieldValue = window.event.srcElement.value;
    var fieldName;
    // traverse thru all the products in the family
    for(i=0; i < entity.childNodes.length; i++)
    {
        if(entity.childNodes(i).tagName == "DIV")
        {
            handle_child_node(entity.childNodes(i))
        }
    }
}

function handle_child_node(entity)
{
    var it = 0;
    var oObject = entity.all;

    if (oObject != null)
    {
        if (oObject.length != null)
        {
            for (it = 0; it < oObject.length; it++)
            {
                if (oObject(it).tagName == 'INPUT' && oObject(it).attributes["type"].nodeValue == 'checkbox')
                {
                    resetTextFieldValue(window.event.srcElement, oObject(it));
                }
            }
        }
    }
}

The above code is working fine in IE. But its not working for Mozilla. Then I change the code given bellow.But Its not getting tags under div tag. what change can make the code work on Mozilla?

  function handle_node(entity)
        {
            var i = 0;
        if (entity.hasChildNodes())
        {
         children= entity.childNodes;
        for(i=0; i < children.length; i++) {

          var sibling= children[i];

                if(sibling.tagName == "DIV") {

           var elms = document.getElementsByTagName(sibling);
              handle_child_node(sibling)
                }
            }
        }
        }

        function handle_child_node(entity)
        {
         alert("entity"+entity);
            var it = 0;
            var oObject = entity.all;
           if (oObject != null)
            {
               if (oObject.length != null)
                {
                    for (it = 0; it < oObject.length; it++)
                    {
                       if (oObject(it).tagName == 'INPUT' && oObject(it).attributes["type"].nodeValue == 'checkbox')
                       {
                            resetTextFieldValue(window.event.srcElement, oObject(it));
                       }
                  }
              }
            }
    }

In line handle_child_node(sibling) correct ? And i think var oObject = entity.all; not working.

Answer 1

Your handle_node function looks like an event handler in MicroSoft's sub-/superset of ECMAScript (JScript). As luck would have it, the event model is the main source of X-browser code-issues. Your code looks to me as typical JScript. Have a look at the articles on events on quirksmode to get a better insight/understanding of the differences.
For now, though, here's what you should know:

JScript doesn't pass an instance of the event object to the handler, but the global object - window - has a property called event , whereas all other browsers do pass the event object to the handler. Generally, you'll see handlers looking like this:

document.getElementById('foo').onclick = bar;//bar is handler
function bar(e)
{
    e = e || window.event;//use passed event instance, or get event property for IE
    var element = e.target || e.srcElement;//the reference to the DOM element is assigned to another property in JScript
    //a lot of stuff
    if (e.preventDefault)
    {//w3c's events are "controlled" with these methods
        e.preventDefault();
        e.stopPropagation();
    }
    e.returnValue = false;//IE's jScript, but W3C engines have these properties, too
    e.cancelBubble = true;
}

What these methods and properties mean (in case you don't know) is something you can read about on quirksmode.
In short: your code works on IE, because you're using the properties that reference DOM nodes in JScript, and you're assuming the event object being a global reference, but that's not the case in FF, Chrome/Chromium, Safari, Opera... So you'll need to address that issue first.

After that, to get all child nodes inside a div, you don't need the children property at all. What's more: you shouldn't rely on that property: Mozilla's engine will list whitespace as children. Here's a list of references to children, and the X-browser differences .

Basically, all you really need to do is this:

var children = divReference.getElementsByTagName('*');

And you'll get a NodesList object with all references you'll ever need...

Answer 2

What About this Idea

    function FindTags() 
        {
            var childDiv = document.getElementById("yourdiv").childNodes;
            for (i = 0; i < childDiv.length; i++) 
            {
                if (childDiv[i].tagName == "A") 
                {
                    childDiv[i].style.display = "block";
                }
                if (childDiv[i].tagName == "SPAN") 
                {
                    childDiv[i].style.fontWeight = "normal";
                }
//and so on for all tags you can do any thing
            }
        }

Hope this helps.enjoy