JavaScript是一種廣泛用于Web前端開發的編程語言，在網頁中通過添加script標簽可以使JavaScript代碼在瀏覽器中執行。其中，通過遍歷class可以快速地操作網頁中的多個元素，使得開發變得更加高效。本文將介紹如何使用JavaScript遍歷class，并通過實例進行詳細闡述。
一、遍歷所有class 在JavaScript中，可以通過getElementByClassName()方法獲取頁面中所有指定class的元素，如下所示：

var myClass = document.getElementsByClassName("className");
<br>
for (var i = 0; i < myClass.length; i++) {
// 執行操作
}

其中，“className”應替換為開發者所需尋找的class名稱。這樣，就可以遍歷當前頁面中所有指定class的元素了。下面我們通過一個實例來說明。
假設我們想要遍歷一個頁面中所有的按鈕元素，并修改它們的文本內容。HTML代碼如下：

<button class="btn btn1">按鈕1</button>
<button class="btn btn2">按鈕2</button>
<button class="btn btn3">按鈕3</button>
<button class="btn btn4">按鈕4</button>

要改變所有按鈕的文本內容，可以使用下列JavaScript代碼：

var btns = document.getElementsByClassName("btn");
<br>
for (var i = 0; i < btns.length; i++) {
btns[i].innerHTML = "已點擊";
}

通過以上代碼，我們可以成功地將所有按鈕的文本內容修改為“已點擊”。
二、遍歷指定class 如果開發者只想遍歷頁面中某個特定的class，也可以通過以下方式獲取到指定的元素：

var myEl = document.querySelector(".myClass");

其中“.myClass”表示一個CSS選擇器，代表class名稱為“myClass”的元素。這樣，就可以修改該元素的屬性或者執行其他操作。
例如，我們想要操作頁面中class為“box”的所有元素，可以用以下方式：

var boxes = document.querySelectorAll(".box");
<br>
for (var i = 0; i < boxes.length; i++) {
boxes[i].style.backgroundColor = "red";
}

通過以上代碼，我們就成功地將頁面中所有class為“box”的元素的背景顏色修改為紅色了。
三、使用classList 除了獲取元素的class名稱外，JavaScript還提供了專門的classList屬性，可以對元素的class進行增刪改查等操作。該屬性包括以下常用方法： 添加class：element.classList.add("className") 刪除class：element.classList.remove("className") 開關class：element.classList.toggle("className") 檢測class：element.classList.contains("className")
例如，我們想要為頁面中所有class為“menu”的元素添加一個“active”類名，可以用以下代碼：

var menu = document.getElementsByClassName("menu");
<br>
for (var i = 0; i < menu.length; i++) {
menu[i].classList.add("active");
}

以上代碼將會把class為“menu”的元素都添加上一個名為“active”的類名。
綜上所述，通過遍歷class可以快速地操作任意多個元素，使得開發變得更加高效。本文通過三個實例介紹了如何使用JavaScript遍歷class，并通過代碼和注釋詳細說明了每個方法的使用方式。希望本文內容對廣大Web前端開發者有所幫助。