Question

我遇到了简单JS代码的奇怪行为。元素通过一个元素处理。

var a = document.getElementsByClassName('nahren');
Array.prototype.forEach.call(a, function(e) {
    e.classList.remove('nahren')
})

Example on JSFiddle

Answer 1

getElementsByClassName返回的集合是“实时”：如果您更改它们以使它们从选择器中取消资格，它们将从集合中消失。这使得对它们的迭代很不稳定。使用querySelectorAll('.nahren')返回“死”集合，或通过克隆来固定“实时”集合：

var deadArray = Array.prototype.slice.call(liveCollection);
deadArray.forEach(...)

Answer 2

Amadan，已经正确回答，但这是另一种可以使用ES6克隆它们的实现。

＆＃13;

var a = Array.from(document.getElementsByClassName('nahren')); //clone array
Array.prototype.forEach.call(a, function(e,i) {
  e.classList.remove('nahren');
})

＆＃13;

div#container div {
  height: 30px;
  width: 100px;
  margin-bottom: 5px;
}

.hren {
  outline: 1px red solid;
}

.hren.nahren {
  outline: 1px blue solid;
}

＆＃13;

<div id="container">
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
<div class="hren nahren"></div>
  <div>

＆＃13;

Answer 3

我已根据您的要求附加了代码段。在您的情况下，您不能使用类名'nahren'作为选择器。因为从DOM元素中删除类'nahren'一次，您的对象就不再相同了。您可以使用'hren'类来选择DOM对象，因为您要删除'nahren'类，只有DOM选择器不会更改。

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      div {
        height: 30px;
        width: 100px;
        margin-bottom: 5px;
      }
      
      .hren {
        outline: 1px red solid
      }
      
      .hren.nahren {
        outline: 1px blue solid
      }
    </style>
    <script>
	function RemoveClass(){
		var a = document.getElementsByClassName('hren');
	    Array.prototype.forEach.call(a, function(e,i) {
	       e.classList.remove('nahren');
	    })
	}
          
    </script>
  </head>
  <body>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
    <div class="hren nahren"></div>
	<button onclick="RemoveClass()">Remove</button>
  </body>
</html>

forEach通过一个处理DOM元素的数组

3 个答案: