HTML DOM 元素 getElementsByClassName() 方法

在 web 前端开发中，操作 HTML DOM 元素是非常常见的任务。其中，通过类名获取元素是一种常用的操作。在 HTML DOM 中，我们可以使用 getElementsByClassName() 方法来实现根据类名获取元素的功能。

语法

getElementsByClassName() 方法的语法如下：

element.getElementsByClassName(classNames)

• element：表示要查找的父元素，可以是文档中的任何元素。
• classNames：一个或多个类名，用空格分隔。

返回值

getElementsByClassName() 方法返回一个 HTMLCollection 集合，其中包含所有具有指定类名的元素。

示例

假设我们有以下 HTML 结构：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
    <title>getElementsByClassName 示例</title>
</head>
<body>
    <div class="container">
        <h1 class="title">标题</h1>
        <p class="content">内容1</p>
        <p class="content">内容2</p>
    </div>
</body>
</html>

现在，我们想要获取所有类名为 content 的元素，可以这样做：

var elements = document.getElementsByClassName('content');
for (var i = 0; i < elements.length; i++) {
    console.log(elements[i].textContent);
}

运行上述代码后，控制台会输出：

内容1
内容2

注意事项

• getElementsByClassName() 方法返回的是一个 HTMLCollection 集合，而不是数组。如果需要对集合进行数组操作，可以使用 Array.from() 方法将其转换为数组。
• getElementsByClassName() 方法只能通过类名获取元素，不能通过标签名或 ID 来获取。
• 如果要获取多个类名的元素，可以在参数中传入多个类名，以空格分隔。

总的来说，getElementsByClassName() 方法是一个非常方便的 DOM 操作方法，可以帮助我们快速获取指定类名的元素。在实际开发中，我们经常会用到这个方法来操作页面上的元素。