Typescript -如何迭代HTMLCollection

ehxuflar 于 2023-08-08 发布在 TypeScript

关注(0)|答案(3)|浏览(158)

我是一个打字新手，我正在尝试迭代document.getElementsByClassName()获得的HTMLCollection。我的代码是：

let tag_list = document.getElementsByClassName("...") as HTMLCollectionOf<HTMLLinkElement>;
for (const tag of tag_list) {
    //do sth with tag.href
}

字符串
但事实证明，“TS2495：Type 'HTMLCollectionOf' is not an array type or a string type.”那么，我能做的最好的方法是什么来防止这个错误呢？

typescript

来源：https://stackoverflow.com/questions/54704099/typescript-how-to-iterate-over-a-htmlcollection

3条答案

按热度按时间

u5i3ibmn1#

HTMLCollectionOf<HTMLLinkElement>不是数组，因此不能迭代它。所以，你需要把它变成一个数组

for (const tag of Array.from(tag_list)) {

字符串
希望这对你有帮助

赞(0）回复(0）举报 2023-08-08

mdfafbf12#

如this S.O. answer所示，它依赖于编译。
tsconfig.json：

{
  "compileOnSave"  : true,
  "compilerOptions": {
    "noImplicitAny"   : true,
    "target"          : "ES2021",
    "moduleResolution": "Node"
  },
  "exclude": [
    "node_modules",
    "dist"
  ]
}

字符串
以下代码将编译并运行：

const tds = document.getElementsByTagName('td') as HTMLCollectionOf<HTMLTableCellElement>;
for( const td of tds ) {
  Utils.onClick( td, ( event: UIEvent ) => this.place( event, 1, 1 ));
}

型

赞(0）回复(0）举报 2023-08-08

oxosxuxt3#

你可以通过先将Typescript转换为any，然后再转换为你想要的类型，使Typescript认为任何东西都是任何类型，就像这样：

for (const child of dom.children as any as HTMLElement[]) {
  ....
}

字符串
这种技术虽然丑陋，但很有效，它可以让您对Typescript“撒谎”。由于JavaScript会很乐意地迭代HTMLElement的子元素，因此像这样对Typescript撒谎可以让JavaScript做它自己的事情。

赞(0）回复(0）举报 2023-08-08

我来回答

Typescript -如何迭代HTMLCollection

3条答案

相关问题

热门标签

最新问答