类型“ HTMLCollectionOf <HTMLCanvasElement>”必须具有返回迭代器的“ [Symbol.iterator]（）”方法

Question

我正在使用

构建一个数组

const myCanvas = documen.getElementsByTagName('canvas')

它实际上正在工作。它给我这样的东西：

images: [
0: canvas,
1: canvas,
2: canvas
]

这是一个Typescript项目，我要迭代此Array并转换每个图像以进行记录。

像这样：

for (const image of myCanvas) {
      console.log(canvas.toDataURL());
    }

（我不使用foreach，因为它不适用于HTMLCollectionOf类型）

我需要遍历getElementsByTagName返回我的HTMLCollection。输出为类型'HTMLCollectionOf'必须具有返回迭代器的'Symbol.iterator'方法

Answer 1

要以这种方式进行迭代，您需要像这样设置compilerOptions：

"compilerOptions": {
        // ...
        "target": "ES6",
        "lib": [
            "DOM",
            "DOM.Iterable",
            "ES6"
        ]
        // ...
    }

Answer 2

可能值得检查您的TypeScript /定义版本because I get no errors。我认为这些错误与某些较旧的浏览器实际上不支持HTML集合的迭代有关，因此您可以可以使用传统的for循环。

两个示例如下：

const myCanvas: HTMLCollectionOf<HTMLCanvasElement> = document.getElementsByTagName('canvas');

for (const image of myCanvas) {
  console.log(image.toDataURL());
}

for (let i = 0; i < myCanvas.length; i++) {
  console.log(myCanvas[i].toDataURL());
}

Answer 3

你可以像这样使用 for-of：

const menus = document.getElementsByClassName('navbar-menu');
for (const menusKey of Object.keys(menus)) {
  console.log(menus[menusKey]);
}