Javascript 如何迭代HTMLCollection?
我的HTML中有一些元素与类Javascript 如何迭代HTMLCollection?,javascript,angular,typescript,htmlcollection,Javascript,Angular,Typescript,Htmlcollection,我的HTML中有一些元素与类节点项,我使用以下方法在组件中访问它们: let nodeItems = document.getElementsByClassName('node-item'); 当我记录nodeItems时,它会给我一个长度为4的HTMLCollection[] 我尝试了很多方法,但仍然无法迭代节点项: 1-首先尝试一下: let bar = [].slice.call(nodeItems); for (var g of bar){ console.log(g); //
节点项
,我使用以下方法在组件中访问它们:
let nodeItems = document.getElementsByClassName('node-item');
当我记录nodeItems
时,它会给我一个长度为4的HTMLCollection[]
我尝试了很多方法,但仍然无法迭代节点项
:
1-首先尝试一下:
let bar = [].slice.call(nodeItems);
for (var g of bar){
console.log(g); //gives me nothing
}
for(let c of <any>nodeItems) {
console.log(c); //gives me nothing
}
2秒尝试:
let bar = [].slice.call(nodeItems);
for (var g of bar){
console.log(g); //gives me nothing
}
for(let c of <any>nodeItems) {
console.log(c); //gives me nothing
}
for(让c为节点项){
console.log(c);//什么也没给我
}
我尝试了数组迭代和对象迭代,但仍然未定义
或错误
。还尝试:
let nodeItems=document.querySelector(选择器)代码>
但是同样的问题。只需使用Array.from(document.getElementsByClassName('node-item'))
或排列运算符[…document.getElementsByClassName('node-item')]
即可,并在数组中使用任何您想要使用的内容
除此之外,您还可以使用正常的for
循环
let nodeItems = document.getElementsByClassName('node-item');
for (let i = 0; i < nodeItems.length; i++) {
// access current element with nodeItems[i]
}
let nodeItems=document.getElementsByClassName('node-item');
for(设i=0;i
您可以在document.querySelectorAll
上使用扩展运算符来创建数组
以下是一个片段:
let nodeItems=[…(document.querySelectorAll('.class1'))];
for(节点的var g){
log(g.innerHTML);
}
Text 1
文本2
文本3是类似数组的对象
它在现代浏览器中非常适用。启用时支持迭代器,在这种情况下,迭代器将是:
const nodeItems = document.getElementsByClassName('node-item');
for (const c of nodeItems) {
// ...
}
Iterables可以在较旧的浏览器中进行多填充<代码>核心js
提供
否则,nodeItems
可以转换为数组并像往常一样迭代:
const nodeItems = Array.from(document.getElementsByClassName('node-item'));
for (const c of nodeItems) {
// ...
}
这两种方法都应该有效(尽管Array.from()
比[].slice.call()
更干净)。您确定集合中确实包含这些元素吗?请记住,它是一个活动节点列表。请执行console.log(nodeItems.length)
。在控制台中执行操作时,您的代码正在工作,您有更多示例吗?@Bergi@romuleald我记录nodeItems
,它给我一个完整的HTMLCollection,但当记录长度时,它给我0。那么您的实际问题是,当您尝试迭代它时,集合是空的,它只是在以后(当DOM元素被加载时)才被填充。@Bergi这不是列出的问题的重复,因为这个问题是特定于TS的。我很确定在某个地方有一个规范的TS问题。我尝试了代码,但控制台没有记录任何内容。我的HTMLCollection已满,我将其记录在日志中,尝试时,[…document.getElementsByClassName('node-item')]
它会给我错误,HTMLCollectionOf'不是数组类型
。我有相同的情况,但这对我没有帮助。没有理由否决正确的答案。如果没有帮助,这意味着你的情况可能会有所不同。考虑问你自己的问题并提供,所以问题可以由用户复制。如果我做了代码>数组。从()/代码>然后<代码> NoDEsType < /代码>它仍然是一个对象。@ GeordeSic <代码> Type of < /Cord>不会告诉你任何事情。数组是对象。