如何用原生JavaScript为最后一个display类元素添加last类？

现有HTML结构 #

<input id="myinput" type="text">

<ul id="mylist">
    <li class="hide"><a href="#">Link 1</a></li>
    <li class="display"><a href="#">Link 2</a></li>
    <li class="hide"><a href="#">Link 3</a></li>
    <li class="display"><a href="#">Link 4</a></li>
    <li class="hide"><a href="#">Link 5</a></li>
</ul>

控制显示/隐藏的CSS样式 #

.display {
    display: block;
}
.hide {
    display: none;
}
.last {
    background-color: yellow;
}

实现需求：为最后一个display类元素添加last类 #

可以通过两种原生JS方式实现：

方法一：先获取所有符合条件的元素，再选取最后一个 #

// 获取列表中所有带display类的元素
const displayItems = document.querySelectorAll('#mylist .display');
// 确保存在符合条件的元素，再为最后一个添加last类
if (displayItems.length > 0) {
    const lastItem = displayItems[displayItems.length - 1];
    lastItem.classList.add('last');
}

方法二：直接用CSS选择器定位最后一个符合条件的元素 #

// 直接选中列表里最后一个带display类的li元素
const lastDisplayItem = document.querySelector('#mylist .display:last-of-type');
// 元素存在则添加类
if (lastDisplayItem) {
    lastDisplayItem.classList.add('last');
}

两种方法都能实现需求，方法二代码更简洁，利用CSS选择器直接定位目标元素；方法一兼容性更广（现代浏览器对:last-of-type的支持已很完善）。

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