为什么点击文字/图片收藏当前页面功能的JS代码设计需要特别指明操作对象？

// 示例代码：点击文字或图片收藏当前页面
// 获取所有需要点击的收藏按钮
const collectButtons = document.querySelectorAll('.collectbutton');
// 为每个按钮添加点击事件监听器
collectButtons.forEach(button => {
  button.addEventListener('click', function() {
    // 模拟收藏操作
    console.log('Page has been collected.');
    // 这里可以添加实际的收藏逻辑，比如发送请求到服务器等
    // fetch('/collectpage', { method: 'POST' });
    // 收藏后，可能需要更新按钮的状态或样式
    button.classList.add('collected');
  });
});

<!示例HTML结构 >
<div class="collectbutton">收藏页面</div>
<img src="image.jpg" alt="Page Image" class="collectimage">

/* 示例CSS样式 */
.collectbutton {
  cursor: pointer;
  color: #007bff;
}
.collectbutton.collected {
  textdecoration: linethrough;
}
.collectimage {
  cursor: pointer;
}

在上述代码中，我们首先通过querySelectorAll 获取所有带有.collectbutton 类的元素，这可以是一个按钮或者图片，我们为每个元素添加一个点击事件监听器，当用户点击任何一个收藏按钮或图片时，控制台会输出 "Page has been collected."，并且如果需要的话，可以在这里添加实际的收藏逻辑，比如发送一个请求到服务器。

我们还提供了一个简单的HTML结构和CSS样式，以便于理解如何将这段JavaScript代码集成到页面中，在CSS中，我们为收藏按钮添加了鼠标悬停的样式，并且当按钮被点击后，通过添加.collected 类来改变样式，例如添加删除线。