问题标签 [htmlcollection]

我用把手模板替换了我的 html 文件中的内容。现在，我有这个js代码

在使用handelbars模板之前它工作正常，因为它返回一个节点列表，我能够迭代元素并将点击附加到每个元素。

使用把手后，我elements是一个 HTMLcollection，我尝试将其转换为数组，但我得到一个空数组。

我有以下问题。车把是否导致了这种变化？（返回 HTMLcollection 而不是节点列表）或者，我只是连接两个不同的东西？

为什么我得到一个空数组？

DOM4 使NodeList可迭代：

根据WebIDL，这意味着

实现被声明为可迭代的接口的对象支持被迭代以获得一系列值。

注意：在 ECMAScript 语言绑定中，可迭代的接口将 在其接口原型对象上具有“entries”、“forEach”、“keys”、“values”和@@iterator属性。

所以以下是可能的：

我注意到在 Firefox 和 Chrome 上似乎同样适用于 HTMLCollections：

事实上，我得到

但是，HTMLCollection没有定义为可迭代的：

我还检查了WHATWG DOM 规范，它也不是可迭代的。

那么，这种行为标准与否？HTMLCollection应该@@iterator在原型中有一个？

TL; 博士

我的 HTML/CSS/JS Web 应用程序在我的所有 Android 设备和笔记本电脑浏览器上都能完美运行，但在 iOS 上的 Safari 中却不行。相反，地图不会加载，也不会应用点击侦听器。似乎 Javascript 仅部分加载，但这很荒谬。

为什么 iOS Safari 似乎只加载了我的脚本的一半？

你自己看！在我的 GitHub 站点上查看演示。

我知道根据社区准则这是一个不好的问题，但我只是不知道要问什么问题。没有控制台错误要跟进，完全没有线索。

背景

我正在开发一个名为 Bike Share Explorer 的小应用程序。这是一个使用 Mapbox GL JS 和 Google MDL 的网络应用程序。该网络地图可让人们探索自行车共享系统和这些系统中的自行车可用性。

碎片

我正在使用 browserify 将 Mapbox GL JS 和我需要的其他代码与我的页面的 Javascript 捆绑在一起。该应用程序是为在 Express 服务器上运行而构建的，前端是使用 Pug 编写的，但是无论我是使用 Express 服务还是从文件系统服务，一切都可以在我的计算机上正常运行。

我试过的

根据各种 SO 帖子和博客，我...

• 确保使用 HTTP 1.1 版
• 确保我的标题包含Content-Type: text/html
• 使用cors在我的测试服务器上设置 CORS （真的，我尝试了所有我能想到的东西）
• 尝试将身体包裹在一个<div onclick="void(0)">（查看更多）
• 尝试将光标更改为指针（在 body 元素上完成）
• 尝试使用touchstart而不是click

我在几个设备上使用 BrowserSync 测试了所有这些方法。除了 iPhone，一切都很好。

然后我转而进行一些调试，alert以尝试查看实际运行的代码。从那我可以说我的脚本正在执行，并且 Mapbox GL JS 说它是受支持的，但是当我把它放在alert里面时map.on("load", () => {});，它从来没有在 iOS Safari 上触发。如果您在另一台设备上访问该网站，您会注意到它确实会在该设备上触发。

我希望我有一个更具体的问题要问，但我没有。

为什么 iOS Safari 似乎只加载了我的脚本的一半？

我一直在为此苦苦挣扎。我有一个从 wkwebview 发送的有效 javascript 命令：

当我从 Safari 控制台输入这个时，我回来了

但是当我尝试使用返回的对象时，我不知所措。我得到“EXC_BAD_ACCESS”（代码=1，加上一个地址）。有 4 个有效负载对象与“html: Any”对象相关联；他们都是0。这是上下文中的代码：

最终我的目标是将 html 集合变成一个 Swift 字符串数组。我怎么做？我非常欢迎 JSON 解决方案（可能使用 Alamofire），但我简化了我的方法以首先让某些东西工作。（我过去曾与 Alamofire 合作过，但没有那么多 JSON）。如果我在打印之前尝试查看变量，我会得到：

编辑：有关该错误的相关问题和信息，请参阅https://bugs.chromium.org/p/chromium/issues/detail?id=707544。

从现在开始不必回答这个问题，但保留问题以供参考。

Element.getElementsByTagName 在 Chrome 中返回 HTMLCollection。

它阻止 GC 收集被调用或引用的元素。

尽管在 Detached DOM 树中没有发现任何内容，但节点数（可能还有堆大小）意外增加。

下面演示了在下面提供代码的页面中单击按钮和强制GC 交替的结果。（Major GC/DOM GC 后堆大小下降，但节点计数不下降）

以及第一次分配和强制GC后的内存信息。

在我看来，那些 HTMLCollection 可能充当缓存/占位符。由于其父元素是一个临时元素，因此即使删除和收集了这些元素，也会保留不必要的 HTMLCollection 副本。

在 Win10 中的 Chrome 57.0.2987.133 和 Chromium 59.0.3058.0 上观察到。

可重现的代码：

UsingArray.filter似乎返回了我传入的相同数组。

如何返回图像 src 字符串数组？而不是图像元素数组？

该变量filtered是图像元素数组，而不是图像 src 字符串：/

我对 getElementsByClassName / getElementsByTagName 的了解是，它们都创建了相关元素的节点列表，并且节点列表元素被视为对象这似乎是不可能的。

例子：

//javascript.js 文件

这是较长代码的压缩版本。我认为 para1 变量应该是一个字符串，然后赋值语句应该将该字符串分配给 ansBox.innerHTML 但我什么也没得到。我已经修改了这个代码的几个版本都没有工作。如何让节点列表中的文本元素显示在 ansBox 中？

我在一个变量上做了一个console.log，在IE中它回来了

这是我用来放上面的

在 Chrome 中类似（但有更多细节）

因此，下面的这段代码在 Chrome 中有效，但在 IE 中失败。在 IE 中，它只显示名称，以及第二个 console.log 上的一些随机内容，如“length”、“item”和“namedItem”。IE11 不显示所有属性名称，只显示第一个。

有什么建议吗？因此，例如https://jsfiddle.net/6f0L9ye8/1/在 Chrom 中运行良好，它带回了所有内容（包括 HERE、WE 和 GO），但 IE11 没有

有两种方法可以从HTMLCollection获取节点：

collection.item(#)和collection[#]

现在两者都工作得很好。他们做同样的事情，但是 [#] 让你认为它是一个数组，它不是。

使用上真的有区别吗？还是有时间您应该使用其中一个？

我试图抓取的页面上有一堆跨度元素，它们的格式如下：

所以，我决定使用 getElementsByClassName() 来选择它们，然后遍历这个 HTMLCollection，当我在开发者控制台中查看它时显示 32 个项目，但是当我检查长度属性时它是 0。

我一定遗漏了 getElementsByClassName 或 HTMLCollections 在一般工作中的工作方式，但此时我似乎无法通过文档或 Google 弄清楚。

据我了解，如果我将所有这些 span 元素视为 console.log 语句的一部分，它们应该会影响eventToClick HTMLCollection 的长度，并且我应该能够使用 for 循环对其进行迭代，但这不起作用！开发人员控制台是否在这里执行某种巫术，而我并没有真正将这些元素作为 HTMLCollection 的一部分？

这是一个实时版本，因此您可以在自己的浏览器中复制：http: //danielschroedermusic.com/apps/cal-test/cal.html

在控制台中为帮助解决此问题的人发布第二张 span 元素的图像。

工作解决方案，但不是很好！

正如 Harshal 在接受的答案中指出的那样，我无法抓取这些元素，因为我的脚本在它们加载到页面上之前正在执行。正在加载此日历数据的 Google 脚本非常复杂，并且使用调试器单步执行它们并没有产生一个我可以在逻辑上看到正在添加的元素的地方，所以我尝试使用间隔计时器来检查是否存在具有我正在寻找的类名的元素。

现在似乎可以解决问题，如果您有任何解决方案，我愿意接受更优雅的解决方案！还在研究这个...