HTML - DOM getElementsByClassName() 方法

HTML DOM 的getElementsByClassName() 方法用于检索文档中所有具有指定类名的元素的实时 HTMLCollection。在 HTML 中，“class”属性是一个标识符，允许您应用CSS 样式并使用JavaScript 操作元素。

使用此方法，您可以轻松地选择和操作共享相同类的多个元素，从而允许对网页进行动态更改。集合中的每个元素都可以使用从 0 开始的索引访问。

空格用于分隔元素的多个类名。例如：<p class = "tp1 tp2 tp3"></p>

以下交互式示例演示了getElementsByClassName() 方法在不同场景下的用法 -

DOM getElementsByClassName() 方法

欢迎来到 Tutorialspoint

您来对地方学习了…… 点击了解更多

如果单击“获取所有类”按钮，它将显示具有类名“tp”的元素总数。
如果单击“更改类”按钮，它将把当前<div>元素的类更改为不同的类。

语法

以下是 HTML DOM 的getElementsByClassName() 函数的语法 -

document.getElementsByClassName(classname);

参数

此方法接受如下所示的单个参数

参数	描述
classname	它表示您想要在文档中搜索的元素的类名。

返回值

它返回一个包含参数中指定类名的元素的集合，并且返回的元素按其在文档中出现的顺序排序。

示例 1：使用类名访问任何元素

以下示例演示了 HTML DOM 的getElementsByClassName() 方法的用法 -

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByClassName() Method</title>
</head>
<body>
<div class="tp">Tutorialspoint (TP)</div>
<script>
   let my_class = document.getElementsByClassName('tp');
   alert("We accessed an element through the class name: " + my_class[0].innerHTML);
</script>
</body>
</html>

以上程序使用其类名访问元素 -

示例 2：更改背景颜色

在此示例中，我们使用 HTML DOM 的getElementsByClassName() 方法更改具有类名“demo”的元素的背景颜色 -

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByClassName() Method</title>
<style>
   button{
       padding: 10px 20px;
       cursor: pointer;
   }
   div{
       padding: 10px;
   }
</style>
</head>
<body>
<p>Click the below button to add backgroundColor</p>
<div class="tp">
<p>Welcome to Tutorialspoint...</p>
</div>
<button onclick="fun()">Add BackgroundColor</button>
<script>
   function fun() {
      document.getElementsByClassName("tp")[0].style.backgroundColor = "green";
   }
</script>
</body>
</html>

执行以上程序后，将显示一个按钮，单击时将在元素中添加“绿色”背景颜色 -

示例 3：设置元素的边框

在此示例中，我们设置具有指定类名的段落的边框 -

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByClassName() Method</title>
<style>
   button{
       padding: 8px 20px;
       cursor: pointer;
   }
   .body1{
       padding: 10px;
   }
</style>
</head>
<body>
<p>Click to set the border.</p>
<button onclick="fun()">Add Border</button>
<p class="body1">Welcome to Tutorials Point..</p>
<script>
   function fun() {
      document.getElementsByClassName("body1")[0].style.border = "solid 2px #7ef79c";
   }
</script>
</body>
</html>

执行以上程序后，将显示一个按钮，单击时将在元素中添加边框 -

示例 4：获取具有相同类的元素数量

在以下示例中，我们将获取具有类名 =“tp”的元素数量 -

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML DOM getElementsByClassName() Method</title>
<style>
   button{
       padding: 8px 20px;
       cursor: pointer;
   }
</style>
</head>
<body>
<p>Click to get the number of classes with class name ='tp'.</p>
<button onclick="fun()">Click me</button>
<p class="tp">I am a paragraph with class tp</p>
<p class="tp">I am a paragraph with class tp</p>
<p class="tp">I am a paragraph with class tp</p>
<p class="tp1">I am a paragraph with class tp1</p>
<p id="num"></p>
<script>
   function fun() {
      let x = document.getElementsByClassName("tp").length;
      document.getElementById("num").innerHTML = "Number of elements with class 'tp': " + x;
   }
</script>
</body>
</html>

以上程序返回具有类名等于“tp”的元素数量 -

支持的浏览器

方法
getElementsByClassName()	是 1	是 12	是 3	是 3.1	是 9.5

html_dom_document_reference.htm

打印页面