如何在JavaScript中迭代具有相同类名的元素？

为了在JavaScript中迭代具有相同类名的元素，我们将使用getElementsByClassName()方法。它用于获取文档中所有具有指定类名的元素的集合。

在这篇文章中，我们有三个div元素，每个元素都具有相同的类名。我们的任务是在JavaScript中迭代这些元素。

迭代具有相同类名元素的方法

以下是我们在本文中将讨论的，在JavaScript中迭代具有相同类名元素的方法，包括分步说明和完整的示例代码。

使用for循环迭代具有相同类名元素

为了在JavaScript中迭代具有相同类名的元素，我们将使用for循环。首先，我们将使用getElementsByClassName获取具有相同类名的元素集合，然后使用for循环对其进行迭代。

  • 我们使用div标签创建了三个div元素，每个元素都包含一些文本内容，并且都具有相同的类名。
  • 然后，我们使用**getElementsByClassName**获取所有具有类名**count**的元素，并将它们存储在一个名为**ele**的变量中。
  • 然后，我们使用**for**循环。它从0开始迭代，直到使用length属性存储在ele中的集合的大小。
  • 最后，我们使用console.log()方法在控制台中显示输出。

示例

这是一个完整的示例代码，实现了上述步骤，使用**for**循环在JavaScript中迭代具有相同类名的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Iterating Elements by ClassName in JavaScript
    </title>
<body>
    <h2>
        Iterating Elements by ClassName in JavaScript
    </h2>
    <p>
        In this example we have used <strong>for
        </strong>loop to iterate elements by className 
        in JavaScript.
    </p>
    <div class="count">This is Element 1</div>
    <div class="count">This is Element 2</div>
    <div class="count">This is Element 3</div>
    <script>
        let ele = document.getElementsByClassName('count');
        for (let index = 0; index < ele.length; index++) {
            console.log(ele[index].innerHTML);
        }
    </script>
</body>
</html>

使用for...of循环迭代具有相同类名元素

在这种方法中，为了在JavaScript中迭代具有相同类名的元素，我们使用for...of循环。

  • 我们使用**getElementsByClassName**获取所有具有类名**count**的元素，并将它们存储在一个名为**ele**的变量中。
  • 然后，我们使用**for...of**循环迭代ele中的每个元素。
  • 在每次迭代中，循环访问textContent属性。它更新每个div元素，并使用**console.log()**方法显示输出。

示例

这是一个完整的示例代码，实现了上述步骤，使用**for...of**循环在JavaScript中迭代具有相同类名的元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Iterating Elements by ClassName in JavaScript
    </title>
</head>
<body>
    <h2>
        Iterating Elements by ClassName in JavaScript
    </h2>
    <p>
        In this example we have used <strong>for...of
        </strong>loop to iterate elements by className 
        in JavaScript.
    </p>
    <div class="count">This is Element 1</div>
    <div class="count">This is Element 2</div>
    <div class="count">This is Element 3</div>
    <script>
        let ele = document.getElementsByClassName('count');
        for (let element of ele) {
            console.log(element.textContent);
        }
    </script>
</body>
</html>

结论

在本文中，我们讨论了两种类型的循环来在JavaScript中迭代具有相同类名的元素。我们使用**getElementsByClassName**获取具有相同类名的元素，然后使用**for**和**for...of**循环来迭代元素。

更新于：2024年10月21日

8K+ 阅读量

开启你的职业生涯

通过完成课程获得认证

开始学习
广告