我如何使用javascript选择所有div [重复]答案

【问题标题】：how do i select all divs with javascript [duplicate]我如何使用javascript选择所有div [重复]
【发布时间】：2018-03-08 21:26:12
【问题描述】：

我正在尝试创建一个带有复选框的过滤器，当有人单击该复选框时，它将隐藏所有 div1

//so far i have used 

function div1hide() {
    document.getElementById("dive1").style.display ='none';
}

var hider = document.getElementById("div1");
document.addEventListener("click", dive1hide, false);

< id="div1">test</div>
< id="div1">test</div>
< id="div1">test</div>
< id="div1">test</div>

它只隐藏第一个我不知道为什么它不隐藏所有其他的......

【问题讨论】：

id 必须是唯一的，试着把它改成 class 就可以了
元素 ID 必须是 unique。让他们都class="div1"
除了@AlexYokisama 评论，您还需要将document.getElementById() 更改为document.getElementsByClassName() 或document.querySelectorAll()。旁注，假设这是复制和粘贴，您还需要在 id 属性之前添加 div 部分。
使用class属性和getElementsByClassName()代替id
您的 ID 选择器正在寻找 dive1 而不是 div1 可能也无济于事。注意错别字！

标签： javascript html

【解决方案1】：

可能是这样的吗？

    <div class="div1">test</div>
    <div class="div1">test</div>
    <div class="div1">test</div>
    <div class="div1">test</div>
    <input type="checkbox" id="hider" />

    <script>
      var div1 = document.getElementsByClassName("div1"); // divs to control
      var hider = document.getElementById("hider"); // checkbox
      div1.toggleStatus = "on"; // let's go!
      hider.onclick = function(){  // what happen when hitting the checkbox
        switch(div1.toggleStatus){ // two options
        case "on": // 1: hide it!
        div1.toggleStatus="off"; // hit the checkbox again and jump to 2nd option
        for (i = 0; i < div1.length; i++) { // choose all elements
          div1[i].style.display = "none"; // hide them
        }
      break;
      case "off": // 1. show it!
        div1.toggleStatus="on"; // hit the checkbox again and jump to 1st option
        for (i = 0; i < div1.length; i++) { // choose all elements
          div1[i].style.display = "block"; // show them
        }
  	  break;
      }
     }
    </script>

【讨论】：

【解决方案2】：

将其更改为看起来更像这样。 getElementsByClassName 返回一个对象，然后可以对其进行迭代以更改该选择中所有元素的显示。

function div1hide() {
    var els = document.getElementsByClassName("div1");
    for(const el in els){
      els[el].style.display = "none";
    }
}

var hider = document.getElementsByClassName("div1");
document.addEventListener("click", div1hide, false);

<div class="div1">test</div>
<div class="div1">test</div>
<div class="div1">test</div>
<div class="div1">test</div>

【讨论】：

【解决方案3】：

function div1hide() {
  var els = document.getElementsByClassName('div1');
  for(var i = 0; i < els.length; i++){
    els[i].style.display = 'none';
  }
}

document.getElementById('hide').addEventListener('click', div1hide, false);

<div class="div1">test</div>
<div class="div1">test</div>
<div class="div1">test</div>
<div class="div1">test</div>

<div id="hide">Click to hide.</div>

【讨论】：