Javascript 如何在不使用IDs的情况下针对ul中的li？

我正在尝试将eventListeners附加到HTML的ul中的每个li。这是家庭作业，所以我根本不能修改HTML。这是我的HTML，我试图改变的是ul类“分页”中的两个按钮：

图像图库


图片说明
Lorem ipsum dolor sit amet，是一位杰出的献身者


先前的
下一个

我在JavaScript中尝试了这一点：

让nextButton=pageSection.getElementsByTagName（'li:类型的第一个'）；
让prevButton=pageSection.getElementsByTagName（'li:类型的最后一个'）；

但是，如果I console.log（nextButton）或console.log（prevButton），它们都会在浏览器控制台中作为HTMLcollection[]返回。我不确定它的目标是否正确

下面是eventListener的一个示例：

nextButton.addEventListener（“单击”，函数changeImageNext（）{
对于（i=0；i

但它在浏览器中返回此错误： 未捕获类型错误：nextButton.addEventListener不是函数

本周我刚开始学习JavaScript和HTML，所以我还不太精通。而且，我不能使用JQuery或任何类型的框架

---

谢谢你的帮助

document.getElementsByTagName（“LI”）

这将返回所有li标记的列表。在列表上循环，按索引选择，用它做任何你想做的事情

因为你身体里没有其他的li，所以你真的不需要担心任何特殊的选择器

---

“li:last of type”不正确，但getElementsByTagName只希望接受要查找的标记名。没有任何特殊的sudo类

因为您知道在

.pagination

的内部有两个

li

，所以可以使用

document.querySelectorAll

，它返回一个元素数组。只需将数组中元素的索引作为目标。例如：

let navButtons = document.querySelectorAll('.pagination li');
let prevButton = navButtons[0];
let nextButton = navButtons[1];

prevButton.addEventListener('click', (event) => {

});

nextButton.addEventListener('click', (event) => {

});

试试看：

let nextButton = document.getElementsByClassName("pagination")[0].children[0]
let prevButton = document.getElementsByClassName("pagination")[0].children[1]