1

我需要在没有框架的纯 JavaScript 中编写一个函数来获取所有特定标签，但只能从父级下的第一级获取。

例如：我需要首先调用一些函数<ul>并从它的第一级获取所有<li>内容（<li>使用文本 1.2 和<li>文本 2.1）

<div id="sideNavigation">
    <ul>
       <li class=" act open  "> 
          1.2
          <ul>
             <li class="  ">
                1.2
                <ul>
                   <li class="  ">
                      1.3
                      <ul>
                         <li class="  ">1.4</li>
                      </ul>
                   </li>
                </ul>
             </li>
          </ul>
       </li>
       <li class="  ">
          2.1
          <ul>
             <li class="  ">2.2.1</li>
             <li class="  ">2.2.2</li>
             <li class="  ">2.2.3</li>
          </ul>
       </li>
    </ul>
</div>

我一直在尝试这样做：

var allLi = document.getElementById("sideNavigation").getElementsByTagName("li");

但它不仅返回<li>第一级，还返回此 div 中的所有内容<li>。你有什么快速的方法来解决我的问题还是我必须实现一个新功能来检测节点的深度

4

2 回答 2

2

您可以使用属性 .children 来获取那些“li”

var firstDepthLi = document.getElementById("sideNavigation").children[0].children;

如果你想要一个通用函数，你可以创建类似的东西：

var getElementsByDepth = function(el, tagname, depth) {
       var children = el.children;
       var res = new Array();
       for(var i=0; i<children.length; i++) {
          if (children[i].tagName == tagname) {
             res.push(children[i]);
             if (depth > 0)
                 res.concat(getElementsByDepth(children[i], tagname, depth-1));
          }
       }
       return res;
}
于 2013-09-25T12:25:10.750 回答
0

尝试：

var allLi = document.getElementById("sideNavigation").getElementsByTagName("li")[0];

这应该返回页面上所有 's 中的第一个li元素。li将末尾的零更改为不同的数字以获得不同的元素。您甚至可以为该值设置一个变量：

var liNum = 0;
var allLi = document.getElementById("sideNavigation").getElementsByTagName("li")[liNum];

在一个函数中： 

function getLi(depth) {
    var specificLi = document.getElementById("sideNavigation").getElementsByTagName("li")[depth];
    return specificLi;
}
    
var firstLi = getLi(0);
console.log(firstLi);
<div id="sideNavigation">
    <ul>
        <li>First list tag</li>
        <li>Second list tag</li>
        <li>Third list tag</li>
    </ul>
</div>

为了使函数更短，你可以这样做：

function getLi(depth) {
    return document.getElementById("sideNavigation").getElementsByTagName("li")[depth];
}

那应该行得通。:)

于 2021-01-29T15:37:54.330 回答