如何使用getElementsByClassName实现同class文本的显示/隐藏

问题根源 #

1. HTML里ID必须唯一，你重复用newpost当多个元素的ID不符合规范，这也是getElementById只能操作第一个元素的核心原因。
2. 要批量操作同class的元素，得先拿到所有对应class的元素集合，再逐个处理。

修改后的完整代码 #

HTML（移除重复ID，统一用class）

<button onclick="showhide()">Click Me</button>
<span class="newpost hidden"><p>text 1</p></span>
<span class="newpost hidden">text 2</span>
<span class="newpost hidden"><p>text 3</p></span>

CSS（保持原有样式即可）

.hidden{
    display : none;
}

JavaScript（批量处理同class元素）

function showhide() {
  // 获取所有class为newpost的元素集合
  var elements = document.getElementsByClassName('newpost');
  // 遍历集合，给每个元素切换hidden类
  for (var i = 0; i < elements.length; i++) {
    elements[i].classList.toggle('hidden');
  }
}

额外优化（适配ES6+环境） #

如果你的项目支持ES6及以上语法，也可以用更简洁的写法：

function showhide() {
  document.querySelectorAll('.newpost').forEach(el => {
    el.classList.toggle('hidden');
  });
}

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