问题标签 [htmlcollection]

在 ES6 中，一个可迭代对象是一个允许for... of并具有 Symbol.iterator 键的对象。

数组是可迭代的，Sets 和 Maps 也是如此。问题是：HTMLCollection和NodeList是可迭代的吗？他们应该是吗？

MDN 文档似乎表明 aNodeList是可迭代的。

for...offor...of在支持的浏览器（如 Firefox 13 及更高版本）中，循环将正确循环 NodeList 对象

这似乎证实了 Firefox 的行为。

我在 Chrome 和 Firefox 中测试了以下代码，惊讶地发现 Firefox 似乎认为它们是可迭代的，但 Chrome 却没有。另外，Firefox 认为 and 返回的迭代器HTMLCollection是NodeList一回事。

一件非常奇怪，令人困惑的事情：运行代码片段与复制它并在Firefox中的实际文件/控制台中运行产生不同的结果（特别是最后一个比较）。对这里这种奇怪行为的任何启示也将不胜感激。

测试.html

我检查了 eles 代表 HTMLCollenction。

这里说 HTMLCollection 还通过名称和索引将其成员直接公开为属性。

于是我尝试通过console.log(eles.length)和console.log(eles[0])进行调试。但不幸的是控制台显示 0 且未定义。（使用 Google Chrome Tool Developer）

如何访问 eles 的结果？我想更改样式并为 ClassName 获取的标签添加属性。另外，我只能使用自然 Javascript。

我使用带有 ES6 语法和 Babel 转译器的 Reactjs。

当我使用 ES5 语法时，我得到了预期的结果：

控制台日志输出

但是当我使用 for...of 循环时

Babel 将此代码转换为

我得到错误

未捕获的 TypeError：propInputs[Symbol.iterator] 不是函数

我需要将类似数组的对象转换为真正的数组。我正在使用 getElementsByTagName 来获取元素列表。

在 Chrome 中，tablerowArr正确转换为具有相同数量项目的数组。但是在 Firefox 和 IE 中，它有 0 个项目。

我做错了什么？

注意：我正在这样做，所以我可以使用

单击a 时，我正在尝试对 DOM 应用更改<tr>。单击时，它应该添加data-state=enabled和data-display=expanded到单击的<tr>同时应用data-state=disabled和data-display=collapsed到其他所有 <tr>。

因此，它应该看起来像突出显示单击的行，同时禁用其他行。

然后，当一行被突出显示，并且用户点击其他地方时，它应该重置为 default，即data-state=enabledand data-display=collapsedfor all<tr>

目前，我让它工作，以便当单击 a 时<tr>，该行被突出显示并且所有其他行被禁用。但是，该脚本缺少重置为默认值，因为如果<tr>单击另一个，它会立即突出显示那个并禁用其余部分。

我想在 vanilla javascript 中执行此操作，但如果它更容易并且不会显着影响性能，我也愿意使用 jQuery。

这是带有工作代码的 JSbin，可以查看它的位置： https ://jsbin.com/kirati/

到目前为止的代码：

和 Javascript

在 Javascript 中，我正在尝试创建一个新的 div。这是我为制作 div 添加的内容。

但在我的浏览器中，它显示 [object HTMLCollection] 应该在 div 标签的位置。

Concerts 是一个预定义的变量。

谁能向我解释一下我可能缺少什么来完成这项工作。提前致谢。

考虑这段代码：

这按预期工作，它删除了所有找到的元素。现在考虑这段代码：

它只删除了一半找到的元素。这是什么原因造成的？

当页面包含单个表格时，我有两个脚本可以完美运行。但是，现在我需要在支持相同功能的同一页面上放置多个表。

我需要一些帮助来转换这两个脚本以在同一页面上处理多个表，同时保持相同的功能。

第一个脚本称为“表数据状态”。第二个脚本称为“排序表数据”。

当前 JSBin： https ://jsbin.com/noyoluhasa/1/edit?html,js,output

除了替换tbodywith的实例之外，我还尝试将我的代码包装在这段代码中thisTable，但是这些脚本仅适用于表格的最后一次出现：

当您使用document.getElementsByTagName()我们搜索元素时，我们会得到一个HTMLCollection. 如果元素有ids 则输出有带有index和id的元素。

问题是，这种结构会在所有浏览器中保持不变还是会改变？

例子

根据Nicholas Zakas的说法，HTMLCollections 非常慢，如果您要重复访问成员，那么将整个内容复制到数组中是一种很好的做法。他似乎声称即使在 HTMLCollections 上使用索引器也会导致集合完全重新查询所有匹配元素的 DOM，就好像集合实际上是一个 linq-esq 表达式树，而不是直接指向元素的指针列表。

我有一种情况，我需要允许对表格进行轻松的键盘导航。每次有人点击其中一个箭头键时，我都需要将焦点从一个表格单元格切换到另一个表格单元格，并相应地添加和删除 CSS 类。我考虑只存储由返回的表格行的 HTMLCollection tableElement.rows，并通过它访问各个单元格元素。我知道 HTMLCollections 允许您像索引数组一样对它们进行索引，并且我认为这与索引数组一样有效。现在我正在重新考虑事情，但我仍然想了解原因。

我的问题是：当我打电话时，引擎盖下到底发生了什么tableElement.rows[2].cells[6]？