未捕获的TypeError：t.querySelectorAll在初始化嵌入式推文

Question

我正在使用Twitter的嵌入式推文API。 如果我从页面加载中获得html markdown，那么一切都很好。 如果我稍后使用该选项添加内容，并按ID加载推文，它也会很有用：

twttr.widgets.load(
  document.getElementById("container")
);

这是在这里的文档：https://dev.twitter.com/web/javascript/initialization#init

但是如果我尝试按类名加载推文：

twttr.widgets.load(
  document.getElementsByClassName("containers")
);

我在Twitter的widget.js中收到此错误：

Uncaught TypeError: t.querySelectorAll is not a function

如果我将元素组记录到控制台，我有一个合适的组：

我做错了什么，或者这是Twitter的小部件上的错误？

谢谢！

修改

截至2015年7月28日，由于我在Twitter开发论坛上发表的另一篇文章，getElementsByClassName示例已从Twitter的文档中删除

Answer 1

问题可能来自document.getElementsByClassName返回NodeList类型的事实，该类型不是真正的javascript Array对象。另一方面，widgets.load要求单个元素或Array个元素。这导致nodeList被视为单个元素，并且库试图在其上调用querySelectorAll，这对NodeList类型不可用。

解决方案是将nodeList传递给widgets.load时将其转换为真实数组。

一种方式：

twttr.widgets.load(
  Array.prototype.slice.call(document.getElementsByClassName("containers"))
);

这很有效，因为NodeList具有length属性且可索引。

Answer 2

根据twitter的文档，WHERE (classID = 24 AND sectionID IN (19,20)) OR (classID = 27 AND sectionID = 19) OR (classID = 28 AND sectionID = 5) 接受无参数或单个元素。

  

在没有参数的情况下调用，widgets-js将搜索整个document.body DOM树以查找未初始化的小部件。为了获得更好的性能，传递 HTMLElement对象，将搜索范围仅限制为元素的子项。

由于load()会返回getElementsByClassName，因此您无法直接传递该内容。相反，你可以像这样传递集合中的第一个元素

HTMLCollection