问题标签 [htmlcollection]

我的一段前端 JS 代码依赖于数千个 DOM 节点的实时HTMLCollection 。由于它是实时的，它会随着 DOM 的更新而自动更新。

这与document.getElementsByClassName我每次修改 DOM 时都重新运行调用相同，还是在幕后进行了性能优化？

我有以下代码。我试图通过将outerHTML设置为空（''）来删除一个元素。我也对html集合做了一些研究，发现它是一个活的集合

参考：

• https://idiallo.com/javascript/live-html-collections

• https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection

所以我所知道的是，如果我更改文档，那么列表应该会更改。代码证明了这种行为，尽管我最初的 html 集合的长度为 9，但循环运行了 4 次。现在，当我用 innerHTML 替换 outerHTML 时，循环运行了 9 次。因此，如果列表应该随着文档的更改而更新，为什么当我用 innerHTML 替换 outerHTML 时不会发生这种情况

这是我的结果

使用 outerHTML 时

使用 innerHTML 时

[ 1

以上是2张截图。一个是浏览器中的控制台，另一个是我注入到 iframe 中的一些 javascript。当我打印通过类名获得的表格时，它说它是一个 HTML 集合。但是当我尝试使用 .item() 方法访问内容时，它有些为空，即使我可以清楚地看到索引为 0 的信息。

有什么帮助吗？

编辑：添加了这些屏幕截图以显示我要访问的内容

我正在尝试使用 JavaScript 将 HTML 元素内容转换为列表。我正在使用此代码，但它只返回最后一个选项 - “选项 6” - 而不是逐行返回每个选项。

有人可以告诉我我错过了什么吗？

下面是html代码

上面的代码只删除了第一项。我真的不知道如何实现这一点。真的对 html 集合和节点列表概念感到困惑。

在以下示例中，从包含 HTML 的字符串创建 HTMLCollection。

是否可以最终将 HTML 集合添加到另一个元素中，而无需添加额外的周围 div 或模板元素？

生成目标 div 元素的 HTMLCollection。

我正在尝试将数组admin1中的每个索引处的字符串添加到每个索引处每个 div 的 classList 中。

现在当我使用 console.log 时content，我可以看到添加的新类 - 但是它只显示admin1数组中所有 div 的第一个字符串。

我读到您不能在 HTMLCollections 上使用 for 循环，所以我尝试在content此处转换为数组：

但是当我 console.log 时contentarr，我看到它的长度只有 1（索引 0）。

（这可能与这些 div 中只有一个最初存在于 html 中的事实有关，直到它乘以 ng-repeat (angularjs)？）

那么如何将 HTMLCollection 转换为数组，然后从admin1数组中添加类？

谢谢你。

编辑

更多上下文-

我的角度控制器中有一个嵌套数组，名为subdivisions2. 我将名为“name”的键的所有值放入admin1数组中。

admin1 看起来像这样：

有趣的是，当我查看 HTMLCollection 时，它在底部显示“长度：47”（与 admin1 的长度相同）。但是当我把 console.log(content.length); 它说 1. 这是为什么？

我正在制作一个日历，用户可以在其中选择不同的日期。问题是该月的最后一天不可用。我在控制台中看到数组的最后一个索引是未定义的，但是当我记录 HTMLCollection 时，这个索引是可用的。什么原因？

我试图做一种不同的循环方式，但结果是一样的。如果您能帮助我，我将不胜感激。谢谢

我的代码在这里：

我正在尝试使用 webpack 和 Babel 建立一个网站。我正在尝试使用 jQuery 将“onclick”事件分配给表内的所有项目。我正在选择所有使用getElementsByClassName返回 HTMLCollection 的“可点击行”表行项目，但在调用.length它时，它返回 0。将集合打印到控制台显示其中有项目。这让我认为这是一个 Babel 问题。

我尝试将其转换为数组 - 数组为空。尝试document.querySelectorAll();返回空的 NodeList 和...运算符，尝试使用.forEach()并尝试HTMLCollection.prototype.forEach = Array.prototype.forEach;在任何地方都没有使用。

这是我正在使用的代码：

这是控制台在谷歌浏览器中返回的结果：

我尝试在 jsfiddle 中重新创建相同的东西，但它没有导致相同的行为，这让我更加认为它是 Babel/webpack 的东西。 http://jsfiddle.net/h2emxdf1/2/

对不起，如果我把事情搞混了，但如果涉及到整个 webpack 事情，我是一个新手。

我试图克隆一个节点，它是另一个节点的子节点，但是 js 不允许我索引 HTMLCollection/NodeList 数据类型。每当我尝试索引该数据类型时，它总是会导致未定义的值。即使当我按照将 HTMLCollection 转换为数组的最有效方式将该数据类型转换为数组时，我仍然无法索引该数组。

克隆节点给出的错误：Cannot read property 'cloneNode' of undefined。