如何在document.querySelectorAll中正确使用多个CSS选择器隐藏多元素？

问题根源 #

你用document.querySelectorAll('.hide_login_title, .hide_login_msg')确实能选中所有匹配这两个类的元素，但代码里只给集合的[0]（也就是第一个匹配到的元素）设置了display: none，其他元素完全没被处理，所以只有第一个类对应的元素会被隐藏。

正确写法 #

需要遍历querySelectorAll返回的元素集合，给每个元素都设置隐藏样式：

方法1：用forEach遍历（简洁写法） #

window.onload = function() {
  if (window.location.href.includes('?lost_pass=1')) {
    // 获取所有目标元素并逐个隐藏
    document.querySelectorAll('.hide_login_title, .hide_login_msg').forEach(el => {
      el.style.display = 'none';
    });
  }
};

方法2：用for循环遍历（兼容旧浏览器） #

如果需要兼容不支持forEach的老旧浏览器，可以用传统循环：

window.onload = function() {
  if (window.location.href.includes('?lost_pass=1')) {
    const elements = document.querySelectorAll('.hide_login_title, .hide_login_msg');
    for (let i = 0; i < elements.length; i++) {
      elements[i].style.display = 'none';
    }
  }
};

补充说明 #

• querySelectorAll返回的是NodeList节点集合，不是单个元素，必须遍历才能操作集合里的每一个成员。
• 你之前的可行代码是分别选中两个类的元素，各自取第一个来隐藏，本质是操作了两个独立元素；而尝试的代码是一次性选中所有目标元素，但只操作了第一个，所以效果不同。

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