如何正确迭代 getElementsByClassName

javascript dom html

2022-08-30 02:09:51

我是Javascript初学者。

我正在通过启动网页，我必须通过类名（）找到一堆元素，并根据一些逻辑将它们重新分发到不同的节点中。我有一个函数，它接受一个元素作为输入并执行分布。我想做这样的事情（例如这里或这里概述）：window.onloadslideDistribute(element)

var slides = getElementsByClassName("slide");
for(var i = 0; i < slides.length; i++)
{
   Distribute(slides[i]);
}

然而，这对我来说并没有发挥魔力，因为实际上并没有返回数组，而是一个NodeList，这是...getElementsByClassName

...这是我的推测...

...在函数内部更改（DOM 树在此函数内部被更改，并且某些节点的克隆发生）。循环结构也无济于事。DistributeFor-each

可变幻灯片的行为确实是不确定的，通过每次迭代，它都会疯狂地改变它的长度和元素的顺序。

在我的情况下，迭代 NodeList 的正确方法是什么？我正在考虑填充一些临时数组，但不确定如何做到这一点......

编辑：

我忘记提到的重要事实是，可能有一张幻灯片在另一张幻灯片中，这实际上是改变变量的原因，因为我刚刚发现这要归功于用户Alohci。slides

对我来说，解决方案是首先将每个元素克隆到一个数组中，然后逐个将数组传递到数组中。Distribute()

答案 1

根据 MDN，从中检索项目的方法是：NodeList

nodeItem = nodeList.item(index)

因此：

var slides = document.getElementsByClassName("slide");
for (var i = 0; i < slides.length; i++) {
   Distribute(slides.item(i));
}

我自己没有尝试过（正常的循环一直对我有用），但试一试。for

答案 2

如果使用新的 querySelectorAll，则可以直接调用 forEach。

document.querySelectorAll('.edit').forEach(function(button) {
    // Now do something with my button
});

根据下面的评论。nodeList 没有 forEach 函数。

如果将其与 babel 一起使用，则可以添加，它将非节点列表转换为 forEach 数组。在以下浏览器（包括 IE 11）中无法本机工作。Array.fromArray.from

Array.from(document.querySelectorAll('.edit')).forEach(function(button) {
    // Now do something with my button
});

在昨晚的聚会上，我发现了另一种处理没有forEach的节点列表的方法。

[...document.querySelectorAll('.edit')].forEach(function(button) {
    // Now do something with my button
});

显示为节点列表

显示为数组