Question

我正在尝试在此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结构的更深的元素节点。

如何获取这些元素？

Answer 1

有很多方法可以做到这一点。您可以想到诸如父母最多的元素之类的东西。

通过这种方式，您可以以一种很黑的方式来做到这一点，就像这样：

import numpy as np

def f(x):
    """ Dummy function so that the code runs """
    return np.mean(x)

# Set up initial state
time, trials, neurons = (100, 256, 16)
a, b = (8, 12)

x = np.random.rand(time, trials, neurons)
L = np.random.randint(a, b, size=neurons)

# Iterate through time
for t in range(time):

    ### This is what I want to optimize ###
    #######################################

    # Index into the state in time, with
    # a different latency for each neuron
    x_ = []
    for n in range(neurons):
        x_.append(x[t-L[n],:,n])
    x_ = np.stack(x_, axis=1)

    #######################################

    # Use the latency-indexed array
    y = f(x_)

# Assert shape of indexed array
assert x_.shape == (trials, neurons)

这将尝试获取具有父级（var nodes, lastNodes; var parents = []; do { lastNodes = nodes; nodes = document.querySelectorAll(parents.join("* > ") + '*'); parents.push(""); } while(nodes.length > 0); console.log(lastNodes);）的节点，然后尝试获取具有父级（* > *）的父级的节点，然后再获取具有父级的节点。拥有父母的父母（* > * > *），依此类推...

当没有接收到任何节点时将停止，并记录接收到的最新节点，这将是父节点最少的节点。

Answer 2

尝试

* > * > * > *

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

let t = document.querySelector('[href="#a"]').innerText;
console.log(t);

Answer 3

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

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>

Answer 4

尝试使用此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);

深入了解DOM NODE

4 个答案: