logo标签列表

获取DOM节点的深层元素

javascriptdom
3
我正在尝试获取此HTML结构中更深层的元素：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
<div id="container">  
<div class="menu">  
    <ul>
        <li><a href="#h" >Home</a></li>
        <li><a href="#f" id="current">Fruit</a>
            <ul>
                <li><a href="#a">Apples</a></li>
                <li><a href="#o">Oranges</a></li>
                <li><a href="#b">Bananas</a></li>
                <li><a href="#p">Pears</a></li>
            </ul>
        </li>
        <li><a href="/about.html">About</a>
            <ul>
                <li><a href="#c">Company Info</a></li>
                <li><a href="#l">Locations</a></li>
                <li><a href="#f">FAQ</a></li>
            </ul>
        </li>
        <li><a href="/contact/contact.php">Contact Us</a></li>
    </ul>
</div><!--closing div class for "menu"-->  
</div><!--closing div for "container"-->  
</body>

</html>

看着上面的结构，更深层次的元素是<a href="#a">Apples</a>，为了获取这个元素，我使用以下代码：

var nodes = document.querySelectorAll('*');
var first = nodes[0];
var last = nodes[nodes.length- 1];
return last.innerHTML;

问题在于上述代码返回的是'Contact Us'值，而不是更深层次的元素'Apples'或'Pears'（更深层次的DOM节点结构），如何获取这些元素？
1
var nodes = document.querySelectorAll('.menu ul ul:first-of-type a'); - user5734311
1
你是想找到整个页面中最深的元素，还是特别是在这个菜单中最深的<a>元素？ - Cory Danielson
@CoryDanielson 整个页面 - Sudo Sur
4个回答
3

有很多方法可以做到这一点。您可以考虑拥有父元素数量最多的元素。

这种方式可以以相当糟糕的方式完成，如下所示：

var nodes, lastNodes;
var parents = [];
do {
    lastNodes = nodes;
    nodes = document.querySelectorAll(parents.join("* > ") +  '*');
    parents.push("");
} while(nodes.length > 0);
console.log(lastNodes);

这将尝试获取具有父级的节点 (* > *)，然后尝试获取具有父级的父级的节点(* > * > *), 接着获取具有父级的父级的父级的节点 (* > * > * > *) 以此类推......

当不再收到任何节点时，将停止操作并记录最近接收到的节点，这些节点的父级最低。

0
尝试使用这个JS函数：
var DeepChildNode = (element,nodeNomber,array)=>{
    if(element.hasChildNodes()){
        nodeNomber++;
        element.childNodes.forEach((elem)=>{
            DeepChildNode(elem,nodeNomber,array);
        });
    }else{
        array.push({'element':element,'numberNodes':nodeNomber});
    }
}

var nodeNomber = 1;
var element = document.getElementById('idElement');
var array = [];
DeepChildNode(element,nodeNomber,array);

array.sort((a,b)=>{b.numberNodes-a.numberNodes});
console.table(array);
0

使用查询选择字符串如下：

var apples = document.querySelector(".menu ul ul:first-of-type a");
console.log(apples);
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Title of the document</title>
</head>

<body>
  <div id="container">
    <div class="menu">
      <ul>
        <li><a href="#h">Home</a></li>
        <li><a href="#f" id="current">Fruit</a>
          <ul>
            <li><a href="#a">Apples</a></li>
            <li><a href="#o">Oranges</a></li>
            <li><a href="#b">Bananas</a></li>
            <li><a href="#p">Pears</a></li>
          </ul>
        </li>
        <li><a href="/about.html">About</a>
          <ul>
            <li><a href="#c">Company Info</a></li>
            <li><a href="#l">Locations</a></li>
            <li><a href="#f">FAQ</a></li>
          </ul>
        </li>
        <li><a href="/contact/contact.php">Contact Us</a></li>
      </ul>
    </div>
    <!--closing div class for "menu"-->
  </div>
  <!--closing div for "container"-->
</body>

</html>

-1

尝试

document.querySelector('[href="#a"]').innerText


let t = document.querySelector('[href="#a"]').innerText;
console.log(t);
<div id="container">  
<div class="menu">  
    <ul>
        <li><a href="#h" >Home</a></li>
        <li><a href="#f" id="current">Fruit</a>
            <ul>
                <li><a href="#a">Apples</a></li>
                <li><a href="#o">Oranges</a></li>
                <li><a href="#b">Bananas</a></li>
                <li><a href="#p">Pears</a></li>
            </ul>
        </li>
        <li><a href="/about.html">About</a>
            <ul>
                <li><a href="#c">Company Info</a></li>
                <li><a href="#l">Locations</a></li>
                <li><a href="#f">FAQ</a></li>
            </ul>
        </li>
        <li><a href="/contact/contact.php">Contact Us</a></li>
    </ul>
</div><!--closing div class for "menu"-->  
</div><!--closing div for "container"-->

1
这将不会获取HTML结构的深层元素，而只是问题中的HTML。 - Jorge Fuentes González
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接