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

【问题标题】：forEach processes array of DOM elements through an oneforEach 通过一个处理 DOM 元素数组
【发布时间】：2016-11-02 04:57:15
【问题描述】：

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

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

Example on JSFiddle

【问题讨论】：

标签： javascript foreach

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

Amadan，已经正确回答了，但是这里有另一个实现，您可以使用 ES6 克隆它们。

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

div#container div {
  height: 30px;
  width: 100px;
  margin-bottom: 5px;
}

.hren {
  outline: 1px red solid;
}

.hren.nahren {
  outline: 1px blue solid;
}

<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>

【讨论】：

是的，很好。我还没有切换到默认使用 ES6 回答：P +1 为你
太棒了（相对而言）。只是我认为很多人仍然在为 IE6 开发。 >.
你可以使用a.forEach()。使用Array.from()后，你有一个真正的数组，所以你可以使用a.forEach()。

【解决方案3】：

我已根据您的要求附上了代码 sn-p。在您的情况下，您不能使用类名 '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>

【讨论】：

嗯，这个sn-p的目的是什么？？