我正在尝试在HTML的ul内将eventListener附加到每个li。这是用于家庭作业，因此我根本无法更改HTML。这是我的HTML，我要更改的li是ul类“分页”中的两个按钮：
<body>
<!-- Gallery HTML -->
<section id="gallery">
<h2>Image <strong>Gallery</strong></h2>
<!-- Gallery Image & Details -->
<article>
<p><img
src="images/winter.jpg"
alt="Winter Landscape: Snow covered mountains">
</p>
<h3>Image Caption</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>
<!-- Thumbnail Pagination -->
<ul class="pagination">
<li><button>previous</button></li>
<li><button>next</button></li>
</ul>
</section>
<!-- Javascript -->
<script src="js/gallery.js"></script>
</body>
我在JavaScript中尝试过此方法：
let nextButton = pageSection.getElementsByTagName('li:first-of-type');
let prevButton = pageSection.getElementsByTagName('li:last-of-type');
但是，如果我使用console.log（nextButton）或console.log（prevButton），它们都将在浏览器控制台中以HTMLcollection []的形式返回。我不确定它是否定位正确。
这里是eventListener的示例：
nextButton.addEventListener("click", function changeImageNext(){
for (i = 0; i < templateArray.length; i++){
// console.log(articles[i]+ " " + i);
activeArticle = articles.length[i + 1];
// inserts the updated html into the html file
galleryHeading.insertAdjacentHTML('afterend',templateArray[i]);
}
});
但是它会在浏览器中作为以下错误返回：未捕获的TypeError：nextButton.addEventListener不是函数
我本周刚开始学习JavaScript和HTML，所以我还不很精通。另外，我不能使用JQuery或任何框架！
感谢您的帮助！
由于您知道在li中有两个.pagination内部，因此可以使用document.querySelectorAll，它返回元素数组。只需定位数组中元素的索引即可。示例：
let navButtons = document.querySelectorAll('.pagination li');
let prevButton = navButtons[0];
let nextButton = navButtons[1];
prevButton.addEventListener('click', (event) => {
});
nextButton.addEventListener('click', (event) => {
});
document.getElementsByTagName（“ LI”）
这将返回所有li标签的列表。遍历该列表，按索引选择，对它进行任何操作。
由于您体内没有其他李，因此您实际上不必担心任何特殊的选择器
“ li：last-of-type”是不正确的，但getElementsByTagName仅希望接受要查找的标签名称。没有任何特殊的sudo类
尝试：
let nextButton = document.getElementsByClassName("pagination")[0].children[0]
let prevButton = document.getElementsByClassName("pagination")[0].children[1]