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

列印頁面