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

但它会返回此div中的所有<li>，而不仅仅是第一级<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;
}

Answer 2

试试：

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

这应该返回页面上所有 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];
}

应该可以。 :)

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

2 个答案: