如何在mozilla中使用javascript获取div标签下的所有标签

时间:2013-01-22 11:17:34

标签: javascript mozilla

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));
                }
            }
        }
    }
}

以上代码在IE中运行良好。但它不适用于Mozilla。然后我改变了下面给出的代码。但它没有得到div标签下的标签。什么改变可以使代码在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));
                       }
                  }
              }
            }
    }

在行handle_child_node(兄弟)中是否正确?我认为var oObject = entity.all;不工作

2 个答案:

答案 0 :(得分:0)

您的handle_node函数看起来像是MicroSoft ECMAScript(JScript)的子/超集中的事件处理程序。幸运的是,事件模型是X浏览器代码问题的主要来源。您的代码在我看来是典型的JScript。查看quirksmode上有关事件的文章,以便更好地了解/理解差异 但就目前而言,这是你应该知道的:

JScript不会将事件对象的实例传递给处理程序,但是全局对象 - window - 具有一个名为event的属性,而所有其他浏览器都执行将事件对象传递给处理程序。通常,您会看到处理程序看起来像这样:

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

这些方法和属性的含义(如果您不知道)是您可以在quirksmode上阅读的内容。
简而言之:您的代码适用于IE,因为您使用的是在JScript中引用DOM节点的属性,并且您假设事件对象是全局引用,但在FF,Chrome / Chromium,Safari中并非如此。 Opera ......所以你需要先解决这个问题。

之后,要获取div中的所有子节点,您根本不需要children属性。更重要的是:你不应该依赖那个属性:Mozilla的引擎会将空白列为儿童。 Here's a list of references to children, and the X-browser differences

基本上,你真正需要做的就是:

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

你会得到一个NodesList对象,其中包含你需要的所有参考文献......

答案 1 :(得分:0)

这个想法怎么样

    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
            }
        }

希望这有帮助。享受