blocks|key|1120584|text|使用文档来帮助您！document.getElementsByClassName|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1120585|名称变量elements+=document.getElementsByClassName(+|1120586|+)|blockquote|1120587|1120588|elements是找到的元素的活动HTMLCollection。|style|CODE|1120589|1120590|在HTMLCollection文档中，您应该注意到的第一件事是它没有一个名为forEach的方法。但是它确实有一个名为length的属性|1120591|1120592|+HTMLCollection.length|1120593|1120594|返回集合中的项数。|1120595|1120596|和一个名为item的方法|1120597|1120598|+HTMLCollection.item()|1120599|1120600|将给定索引处的特定节点返回到列表中。如果索引超出范围，则返回null。|1120601|1120602|所以你应该能够做到这一点：|1120603|for+(var+i+=+0;+i+<+el.length;+i%2B%2B)+test(el.item(i));|code-block|syntax|javascript|1120604|或者使用阵列糖：|1120605|for+(var+i+=+0;+i+<+el.length;+i%2B%2B)+test(el[i]);|1120606|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName|1|https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection|2|https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection/item^0|9|V|0|0|0|0|0|H|E|H|E|1|0|0|1|E|12|7|1N|6|0|0|1|L|0|0|0|0|5|4|0|0|1|L|1|L|2|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1T|8|@]|9|@$A|1U|B|1V|1|1W]]|C|$]]|$1|D|3|E|5|6|7|1X|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1Y|8|@]|9|@]|C|$]]|$1|I|3|-4|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|J|3|K|5|6|7|20|8|@$A|21|B|22|L|M]]|9|@$A|23|B|24|1|25]]|C|$]]|$1|N|3|-4|5|6|7|26|8|@]|9|@]|C|$]]|$1|O|3|P|5|6|7|27|8|@$A|28|B|29|L|M]|$A|2A|B|2B|L|M]|$A|2C|B|2D|L|M]]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|2E|8|@]|9|@]|C|$]]|$1|R|3|S|5|H|7|2F|8|@$A|2G|B|2H|L|M]]|9|@]|C|$]]|$1|T|3|-4|5|6|7|2I|8|@]|9|@]|C|$]]|$1|U|3|V|5|6|7|2J|8|@]|9|@]|C|$]]|$1|W|3|-4|5|6|7|2K|8|@]|9|@]|C|$]]|$1|X|3|Y|5|6|7|2L|8|@$A|2M|B|2N|L|M]]|9|@]|C|$]]|$1|Z|3|-4|5|6|7|2O|8|@]|9|@]|C|$]]|$1|10|3|11|5|H|7|2P|8|@$A|2Q|B|2R|L|M]]|9|@$A|2S|B|2T|1|2U]]|C|$]]|$1|12|3|-4|5|6|7|2V|8|@]|9|@]|C|$]]|$1|13|3|14|5|6|7|2W|8|@]|9|@]|C|$]]|$1|15|3|-4|5|6|7|2X|8|@]|9|@]|C|$]]|$1|16|3|17|5|6|7|2Y|8|@]|9|@]|C|$]]|$1|18|3|19|5|1A|7|2Z|8|@]|9|@]|C|$1B|1C]]|$1|1D|3|1E|5|6|7|30|8|@]|9|@]|C|$]]|$1|1F|3|1G|5|1A|7|31|8|@]|9|@]|C|$1B|1C]]|$1|1H|3|-4|5|6|7|32|8|@]|9|@]|C|$]]]|1I|$1J|$5|1K|1L|1M|C|$1N|1O]]|1P|$5|1K|1L|1M|C|$1N|1Q]]|1R|$5|1K|1L|1M|C|$1N|1S]]]]

<p>Use the documentation to help you! <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName" rel="nofollow noreferrer">document.getElementsByClassName</a>:</p>
<blockquote>
<pre><code>var elements = document.getElementsByClassName(names)
</code></pre>
<p><em>elements</em> is a live <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection" rel="nofollow noreferrer"><code>HTMLCollection</code></a> of found elements.</p>
</blockquote>
<p>The first thing you should notice on the <code>HTMLCollection</code> documentation is that it does <em>not</em> have a method named <code>forEach</code>. But it does have a property named <code>length</code></p>
<blockquote>
<p><code>HTMLCollection.length</code></p>
<p>Returns the number of items in the collection.</p>
</blockquote>
<p>And a method named <code>item</code></p>
<blockquote>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection/item" rel="nofollow noreferrer"><code>HTMLCollection.item()</code></a></p>
<p>Returns the specific node at the given zero-based index into the list. Returns null if the index is out of range.</p>
</blockquote>
<p>So you should be able to do this:</p>
<pre><code>for (var i = 0; i &lt; el.length; i++) test(el.item(i));
</code></pre>
<p>Or use the array sugar:</p>
<pre><code>for (var i = 0; i &lt; el.length; i++) test(el[i]);
</code></pre>


blocks|key|1125203|text|并不是每个浏览器都在getElementsByClassName方法返回的HTMLCollection上实现Array.prototype方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1125204|此外，变量赋值不会提升。函数声明就是这样。|1125205|​|1125206|var+el+=+document.getElementsByClassName("machine_btn_over_layer");

//+manually+call+Array.prototype.forEach+on+HTMLCollection
Array.prototype.forEach.call(el,+test);

//+replace+function+expression+with+function+declaration+to+hoist+with+value
function+test()+{
++console.log("test");
}|code-block|syntax|javascript|1125207|<div+class="machine_btn_over_layer"></div>
<div+class="machine_btn_over_layer"></div>
<div+class="machine_btn_over_layer"></div>
<div+class="machine_btn_over_layer"></div>|1125208|1125209|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection^0|A|M|11|E|1I|F|11|E|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@$9|10|A|11|B|C]|$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|1A|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1B|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1C|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]]]

<p>Not every browser implements <code>Array.prototype</code> methods on <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection" rel="nofollow noreferrer"><code>HTMLCollection</code></a> returned by <code>getElementsByClassName</code> method.</p>

<p>Also variable assignments do not hoist. Function declarations do.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var el = document.getElementsByClassName("machine_btn_over_layer");

// manually call Array.prototype.forEach on HTMLCollection
Array.prototype.forEach.call(el, test);

// replace function expression with function declaration to hoist with value
function test() {
  console.log("test");
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="machine_btn_over_layer"&gt;&lt;/div&gt;
&lt;div class="machine_btn_over_layer"&gt;&lt;/div&gt;
&lt;div class="machine_btn_over_layer"&gt;&lt;/div&gt;
&lt;div class="machine_btn_over_layer"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|1125774|text|您需要进行两个更改。第一个数组是一个HTMLCollection，所以数组方法在这个问题上不起作用。因此，要使用数组方法，可以使用spread+operator(...)将其转换为数组|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1125775|其次，声明为var+test+=+function()+{}的函数永远不会被提升。所以当el.forEach被调用时，它不会得到函数，因此它会抛出undefined不是一个函数|1125776|​|1125777|var+el+=+[...document.getElementsByClassName("machine_btn_over_layer")];
var+test+=+function()+{
++console.log("test");
}
el.forEach(test);|code-block|syntax|javascript|1125778|<div+class="machine_btn_over_layer"></div>
<div+class="machine_btn_over_layer"></div>
<div+class="machine_btn_over_layer"></div>
<div+class="machine_btn_over_layer"></div>|1125779|1125780|entityMap^0|1T|K|0|6|O|18|A|21|9|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|13|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|14|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|16|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|S|$]]

<p>You need to make two changes. First <code>document.getElementsByClassName</code> is a HTMLCollection so array method will not work  on this. So to use the array method you can convert it to array using <code>spread operator(...)</code></p>

<p>Secondly a function declared <code>var test = function() {}</code> is never hoisted. So when <code>el.forEach</code> is called it don't get the function, hence it will throw <code>undefined</code> is not a function</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var el = [...document.getElementsByClassName("machine_btn_over_layer")];
var test = function() {
  console.log("test");
}
el.forEach(test);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="machine_btn_over_layer"&gt;&lt;/div&gt;
&lt;div class="machine_btn_over_layer"&gt;&lt;/div&gt;
&lt;div class="machine_btn_over_layer"&gt;&lt;/div&gt;
&lt;div class="machine_btn_over_layer"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


<p>I m storing all the elements from a getElementsByClassName to a variable, I would imagine I can foreach loop this variable to get every single ids from it. But its not working.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var el = document.getElementsByClassName("machine_btn_over_layer");
el.forEach(test);
var test = function() {
  console.log("test");
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="machine_btn_over_layer"&gt;&lt;/div&gt;
&lt;div class="machine_btn_over_layer"&gt;&lt;/div&gt;
&lt;div class="machine_btn_over_layer"&gt;&lt;/div&gt;
&lt;div class="machine_btn_over_layer"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>What am I doing wrong? Im getting error saying function is not working</p>


Using foreach to loop through a class element

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我将一个getElementsByClassName中的所有元素都存储到一个变量中，我想我可以循环这个变量来获取其中的每个it。但它不起作用。​var el = document.getElementsByClassName("machine_btn_over_layer");el.forEach(test);var ...

问使用foreach遍历class元素
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用foreach遍历class元素EN