如何使用查询选择器方法从父元素获得最后一个子元素?

Question

例如:

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

如何获得最后一个子元素?我想指出的是，子元素是动态创建的，并根据用户的突发奇想不断增加或减少。我希望每次发生这种情况时，我都能选择最后一个孩子。这就是我问的原因。请告诉我语法。谢谢你。

Answer 1

.list-container > p:last-childwill do

请避免臃肿的软件，如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>

Answer 2

如果你已经有了对父节点的引用，你也可以通过Node.lastChild获得DOM api的最后一个子节点。

或者使用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>