首页 > web前端 > js教程 > 如何在 JavaScript 中正确迭代 `getElementsByClassName()` 结果?

如何在 JavaScript 中正确迭代 `getElementsByClassName()` 结果?

Susan Sarandon
发布: 2024-12-01 06:07:13
原创
433 人浏览过

How to Correctly Iterate Over `getElementsByClassName()` Results in JavaScript?

错误:getElementsByClassName() 使用 Array.forEach 进行结果迭代

尝试使用 getElementsByClassName() 和数组迭代 DOM 元素时。 forEach 方法,用户可能会遇到错误,因为 getElementsByClassName() 不返回一个数组。

getElementsByClassName() 的结果是一个 HTMLCollection,在现代浏览器中,它与数组不同。要解决此问题,请在使用 forEach 之前将 HTMLCollection 转换为数组。这可以通过以下方法实现:

  • 使用 call() 和 Array.prototype.forEach:
var els = document.getElementsByClassName("myclass");
Array.prototype.forEach.call(els, function(el) {
  // Do stuff here
  console.log(el.tagName);
});
登录后复制
  • 使用`[].forEach.call():
[].forEach.call(els, function (el) {
  // Do stuff here
  console.log(el.tagName);
});
登录后复制
  • 使用 `Array.from() (ES6)**:
Array.from(els).forEach((el) => {
  // Do stuff here
  console.log(el.tagName);
});
登录后复制

以上是如何在 JavaScript 中正确迭代 `getElementsByClassName()` 结果?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板