怎样获得嵌套元素的第一级元素


    <ul id="navigation">
        <li>
            <a href="#">栏目1</a>
            <ul>
                <li><a href="#">栏目1->菜单1</a></li>
                <li><a href="#">栏目1->菜单2</a></li>
                <li><a href="#">栏目1->菜单3</a></li>
                <li><a href="#">栏目1->菜单4</a></li>
            </ul>
        </li>
</ul>
怎样获得navigation的一个li元素，而不是用getElementsByTagName()将li都获得了

解决方案 »

  1.   

    document.getElementById("navigation").childlren[0]//children属性返回元素的 子元素集合，不包含文件节点
      

  2.   

    打错了，上面多了个l应该是children
      

  3.   

    document.getElementById("navigation").childNodes
      

  4.   


    <ul id="list">
    <li><a href="#">three days grace</a>
    <ul>
    <li><a href="#">three days grace</a></li>
    <li><a href="#">three days grace</a></li>
    </ul>
    </li>
    <li><a href="#">three days grace</a>
    <ul>
    <li><a href="#">three days grace</a></li>
    <li><a href="#">three days grace</a></li>
    </ul>
    </li>
    <li><a href="#">three days grace</a></li>
    </ul>
    <script type="text/javascript">
    var list = document.getElementById('list');
    var tops = list.childNodes;
    alert(tops.length);
    </script>
    我这里alert出来的是7  我只要第一级元素  应该是3
      

  5.   

    这种写法不兼容 FF，俺给个 IE 和 FF 下都好用滴L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title>Test Page</title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <style type="text/css">  </style>
     </head>
     <body><ul id="navigation">
    <li>
    <a href="#">栏目1</a>
    <ul>
    <li><a href="#">栏目1->菜单1</a></li>
    <li><a href="#">栏目1->菜单2</a></li>
    <li><a href="#">栏目1->菜单3</a></li>
    <li><a href="#">栏目1->菜单4</a></li>
    </ul>
    </li>
    </ul> </body>
     <script type="text/javascript">
     <!--function GetFirstElement(parentElement) {
    var firstEle = parentElement.firstChild;
    while (firstEle && firstEle.nodeType !== 1) {
    firstEle = firstEle.nextSibling;
    }
    return firstEle;
    }
    document.write(GetFirstElement(document.getElementById("navigation")).innerHTML); //-->
     </script>
    </html>
      

  6.   

    alert(document.getElementById("navigation").childNodes.length);
      

  7.   

    过滤一下就行了，IE7 & FF3 passed!L@_@K
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title>Test Page</title>
      <meta name="generator" content="editplus" />
      <meta name="author" content="" />
      <meta name="keywords" content="" />
      <meta name="description" content="" />
      <style type="text/css">  </style>
     </head>
     <body><ul id="list">
    <li><a href="#">three days grace</a>
    <ul>
    <li><a href="#">three days grace</a></li>
    <li><a href="#">three days grace</a></li>
    </ul>
    </li>
    <li><a href="#">three days grace</a>
    <ul>
    <li><a href="#">three days grace</a></li>
    <li><a href="#">three days grace</a></li>
    </ul>
    </li>
    <li><a href="#">three days grace</a></li>
    </ul>
     </body>
     <script type="text/javascript">
     <!--
    /*
    function GetFirstElement(parentElement) {
    var firstEle = parentElement.firstChild;
    while (firstEle && firstEle.nodeType !== 1) {
    firstEle = firstEle.nextSibling;
    }
    return firstEle;
    }
    */
    function GetChildElements(parentElement) {
    var elements = new Array();
    var nodes = parentElement.childNodes;
    for (var i=nodes.length-1; i>=0; i--) {
    if (nodes[i].nodeType === 1) {
    elements.push(nodes[i]);
    }
    }
    return elements;
    }
    var parentNode = document.getElementById('list');
    document.write(GetChildElements(parentNode).length); //-->
     </script>
    </html>
      

  8.   

    <script type="text/javascript">
    function GetFirstElements(parentElement) {
        var firstEle = parentElement.firstChild;
        while (firstEle && firstEle.nodeType !== 1) {
            firstEle = firstEle.nextSibling;
        }
        return firstEle;
    } var list = document.getElementById('list');
    var tops = GetFirstElements(list);
    alert(tops.length);
    </script>
    输出undefind
      

  9.   


            window.onload = function() {
                alert(document.getElementById("navigation").children.length);
            }
    经过本人在本地的测试，FF和IE弹出的都是一样的如果是childNodes在FF下会把子节点之间的空白字符当做一个子节点
      

  10.   

    我冒着被封IP的生命危险下了个chrome，发现children属性在chrome里面也是返回其所有一级子元素的集合，其中不包括空白字符节点
      

  11.   

    在 FF 3.0.15 下确实不兼容，俺刚刚升级到 FF 3.5.7 就没问题了！不过，children 最早是 IE 扩展滴，现在 FF 也实现了，不知道是否已添加至 DOM 中！
      

  12.   

    你确定3.0不能用？这个不是ie的，IE是一个children()方法
      

  13.   

    FF 3.0.15 下错误控制台输入“... children undefined ...”另，IE 中 children 是集合对象，即 Collection，
    而 children(children(vIndex [, iSubIndex])) 方法
    用于获取集合中指定索引位置上的元素或是指定 Id 或 Name 的元素！
      

  14.   

    children(children(vIndex [, iSubIndex]))改为
    children(vIndex [, iSubIndex])
      

  15.   

    没见过FF3.0，不知道长什么样子
    ps：你两个都装了？