Javascript从嵌套的div中获取最后一个元素

Question

我有以下html结构：

<div>
  <div>
    <div>  // 1
        <div></div>
    </div>
    <div> // 2
        <div></div>
    </div>
    ...
    <div> // n
        <div></div>
    </div> // <---- return this one
  </div>

  <div></div>
</div>

如何使用 JS DOM 查询返回在上述结构中标记的最后一个div元素？

Answer 1

有趣的！ 试试这种方式（使用xpath）：

 result = document.evaluate( '(//div//div[./div])[last()]', document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null ); alert(result.snapshotItem(0).outerHTML);

 <div> <div> <div> // 1 <div></div> </div> <div> // 2 <div></div> </div> ... <div> // return me <div>child of return me </div> </div> // ---- return this one </div> <div></div> </div>

Answer 2

您可以使用querySelector和lastElementChild来尝试这样的事情。 我添加了id以便您可以看到它获得了正确的元素，但您实际上并不需要id来完成工作。

 let parent = document.querySelector('div > div'); console.log(parent.lastElementChild); console.log(parent.lastElementChild.innerText);

 <div> <div> <div id="first"> <div>First Text</div> </div> <div id="second"> <div>Second Text</div> </div> <div id="last"> <div>Last Text</div> </div> </div> <div></div> </div>