document.getElementsByClassName与querySelectorAll失效问题求助

你的代码问题出在：document.getElementsByClassName('div') 返回的是包含所有匹配元素的HTMLCollection（类数组对象），这个集合本身没有style属性，不能直接通过它设置样式，必须遍历集合里的每个元素单独操作。document.querySelectorAll('.div') 返回的是NodeList，同样需要遍历处理每个元素。

修正后的代码示例 #

方法1：使用getElementsByClassName + 循环遍历 #

<body>
  <div class="div">
      <h2>heading</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, esse.</p>
      <button>submit</button>
  </div>
  <div class="div">
      <h2>heading</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, esse.</p>
      <button>submit</button>
  </div>

  <script>
      let divs = document.getElementsByClassName('div');
      // 遍历HTMLCollection，给每个元素设置样式
      for (let i = 0; i < divs.length; i++) {
          divs[i].style.margin = "200px";
      }
  </script>
</body>

方法2：使用querySelectorAll + forEach #

<body>
  <div class="div">
      <h2>heading</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, esse.</p>
      <button>submit</button>
  </div>
  <div class="div">
      <h2>heading</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex, esse.</p>
      <button>submit</button>
  </div>

  <script>
      let divs = document.querySelectorAll('.div');
      // NodeList支持forEach直接遍历
      divs.forEach(div => {
          div.style.margin = "200px";
      });
  </script>
</body>

补充说明 #

• 如果只想操作单个元素，可使用document.querySelector('.div')（返回第一个匹配的元素）或者document.getElementsByClassName('div')[0]（取集合的第一个元素），但你这里有两个class为div的元素，必须遍历才能让所有元素生效。

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