DOM函数与.classList.remove()在click事件监听器中失效问题

问题场景 #

点击Mark all as read链接时，期望完成两个操作：

1. 移除.not-bar元素的unread类名
2. 将.not-icon元素的文本内容设为0
   但实际只有console.log能正常输出，上述两个操作均未生效。

原始代码 #

HTML代码 #

<div>
    <p class="my-auto mark-read"><a href="#" id="mark-read">Mark all as read</a></p>
</div>
<div class="container d-flex mt-4 py-2 rounded not-bar unread">
    <div>
        <img src="./assets/images/avatar-mark-webber.webp" alt="">
    </div>
    <div class="my-auto ms-4">
        <p class="my-auto"><span class="name"><a href=""> Mark Werber </a></span> reacted to your recent post <span class="post"><a href=""> My first tournamemt today! </a></span><span class="fw-bold ms-2 new">o</span><br><span class="time">1m ago</span></p>
    </div>
</div>

JavaScript代码 #

document.addEventListener('DOMContentLoaded', () => {
  const notBar = document.getElementsByClassName('not-bar')
  const notIcon = document.getElementsByClassName('not-icon')
  const markRead = document.getElementById('mark-read')

  markRead.addEventListener('click', () => {
    // notBar.classList.remove('unread');
    notIcon.textContent = 0
    console.log("Notifications cleared")
  })
})

问题原因 #

document.getElementsByClassName()返回的是HTMLCollection（类数组对象），不是单个DOM元素。直接对这个集合调用classList.remove()或设置textContent是无效的，因为这些方法属于单个DOM元素的API。

另外，你的HTML代码里没有出现.not-icon类的元素，这也是notIcon.textContent = 0不生效的额外原因，需要确保页面中存在这个元素。

修正后的代码 #

针对单个元素的情况 #

如果页面中只有一个.not-bar和一个.not-icon，可以直接取集合的第一个元素：

document.addEventListener('DOMContentLoaded', () => {
  // 取集合中的第一个元素
  const notBar = document.getElementsByClassName('not-bar')[0]
  const notIcon = document.getElementsByClassName('not-icon')[0]
  const markRead = document.getElementById('mark-read')

  markRead.addEventListener('click', (e) => {
    // 阻止链接默认跳转行为，避免页面滚动到顶部
    e.preventDefault()
    
    if (notBar) {
      notBar.classList.remove('unread')
    }
    if (notIcon) {
      notIcon.textContent = 0
    }
    console.log("Notifications cleared")
  })
})

针对多个元素的情况 #

如果页面中有多个.not-bar元素，需要遍历集合处理每个元素：

document.addEventListener('DOMContentLoaded', () => {
  const notBars = document.getElementsByClassName('not-bar')
  const notIcon = document.getElementsByClassName('not-icon')[0]
  const markRead = document.getElementById('mark-read')

  markRead.addEventListener('click', (e) => {
    e.preventDefault()
    
    // 遍历所有.not-bar元素，移除unread类
    Array.from(notBars).forEach(bar => {
      bar.classList.remove('unread')
    })
    
    if (notIcon) {
      notIcon.textContent = 0
    }
    console.log("Notifications cleared")
  })
})

额外注意点 #

• 记得给链接点击事件添加e.preventDefault()，避免点击#导致页面滚动到顶部的默认行为。
• 确保页面中存在.not-icon类的元素，否则设置textContent不会有任何效果。

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