为何使用getElementsByTagName无法获取ul标签的最后子元素？

哦，我明白你的问题了！问题出在getElementsByTagName的返回值上——它给你的不是单个DOM元素，而是一个HTMLCollection（类数组的元素集合），这类集合本身并没有lastChild属性，所以你才拿到了undefined。

对比你能正常工作的代码：document.head.firstChild能运行，是因为document.head本身就是单个DOM节点（页面的<head>元素），单个节点才有firstChild/lastChild这类属性，而集合是多个元素的容器，没有这些属性。

下面给你几种可行的解决方案：

方案1：通过集合索引获取最后一个ul #

HTMLCollection支持通过索引访问元素，我们可以先拿到集合的长度，再取长度-1的索引（因为索引从0开始）：

// 先获取所有ul元素的集合
var ulCollection = document.body.getElementsByTagName("ul");
// 取集合里的最后一个元素
var lastUl = ulCollection[ulCollection.length - 1];
alert(lastUl);

方案2：使用现代的querySelectorAll #

querySelectorAll返回的是NodeList，同样可以通过索引访问，写法和上面类似：

var uls = document.querySelectorAll("ul");
var lastUl = uls[uls.length - 1];
alert(lastUl);

方案3：用CSS选择器直接定位最后一个ul #

如果你的需求就是获取页面中最后一个<ul>元素，可以直接用querySelector配合CSS的:last-of-type选择器，一步到位：

var lastUl = document.body.querySelector("ul:last-of-type");
alert(lastUl);

这样修改后，就能正确拿到你想要的最后一个<ul>元素啦！

内容的提问来源于stack exchange，提问作者Sviat Kuzhelev