如何使用查询选择器方法获取父元素的最后一个子元素？

Question

例如：

<div class="list-container">
  <p>hello<p>
  <p>hello<p>
  <p>hello<p>
  <p>hello<p>
</div>

如何获取最后一个子元素？我想指出的是，子元素是动态创建的，根据用户的心情不断增加或减少。我希望在这种情况下每次都能选择最后一个子元素。这就是为什么我要问的原因。请分享给我语法。谢谢。

- gamer beast

---

这个回答解决了你的问题吗？使用DOM选择列表中项目的最后一个元素 - pilchard

Answer 1

.list-container > p:last-child 就可以实现。

同时，请避免使用像jquery这样的臃肿软件...

console.log(document.querySelector(".list-container > p:last-child"));

<div class="list-container">
  <p>hello1</p>
  <p>hello2</p>
  <p>hello3</p>
  <p>hello4</p>
</div>

- vanowm

Answer 2

如果您已经有对父元素的引用，您也可以使用 DOM API 的 Node.lastChild 获取最后一个子节点。

或者使用 Element.lastElementChild 来排除非元素节点，如文本节点和注释节点。

var list = document.getElementById("list-container");
var last = list.lastElementChild
var text = last.textContent
console.log(text); // hello4

<div id="list-container">
  <p>hello1</p>
  <p>hello2</p>
  <p>hello3</p>
  <p>hello4</p>
</div>

- KyleMit