javascript - 在 JavaScript 中寻找具有特定深度的元素

Question

我需要在没有框架的情况下用纯 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> 。你有什么快速的方法来解决我的问题还是我必须实现一个新的函数来检测节点的深度

Answer 1

你可以使用属性.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;
}