在 JavaScript 中选择元素的最后一个子元素

Question

我有一个

<ol>

（保存到

Var1

）并且希望能够将其最后一个

<li>

元素分配给变量。

我尝试执行以下操作：

Lastli = var1.lastChild

不过，好像没啥作用。

我想用 vanilla JS 来做这件事，而不是 jQuery。

Answer 1

您可以选择父元素并使用

lastChild

属性。

var container = document.getElementsByTagName("ul")[0];
var lastchild = container.lastChild;

或者您将所有项目选择到一个数组中并获取最后一个项目。这是一个简单的例子：

var items = document.querySelectorAll("li");
var lastchild = items[items.length-1];

Answer 2

您可以选择所有“li”并取最后一个。比如：

var myLi = document.getElementsByTagName('li');
var lastLi = myLi[myLi.length-1];

Answer 3

让我们考虑一个例子

<ul >
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
</ul>

要获取列表的最后一个子项，您可以简单地使用查询选择器

document.querySelector('li:last-child'); //this will return Milk which is the last child of the list
document.querySelector('li:first-child') OR document.querySelector('li'); //both will give you the first child of the list

假设您想要第 n 个子级，您可以使用以下语法：

document.querySelector('li:nth-child(2)');  //it will return the second child (here Tea)

如果您想要给定列表中的所有列表项：

document.getElementsByTagName('li') //(Will return the whole list)here i am using tagname. It can be also applied on classname or element id

Answer 4

试试这个：

.childNodes[childNodes.length - 1]

Answer 5

ulReference.children[ulReference.children.length -1]

或

ulReference.childNodes[ulReference.childNodes.length -1]

。两者的区别可以看这里

Answer 6

最简单的方法就是使用

document.querySelector

并使用

:last-child

来获取。

示例：

const list = document.querySelector("li:last-child");