JavaScript是一種非常流行的編程語言，可以用來創建豐富的交互式用戶體驗，其中改變class是JavaScript中的一個非常重要的部分。在這篇文章中，我們將介紹JavaScript中如何改變class，并給出一些實際的例子。

在瀏覽器中，class是用于樣式控制的一個非常重要的屬性。通過設置不同的class，我們可以定義不同的樣式來控制頁面元素的外觀和行為。在JavaScript中，我們可以使用classList來改變class的值。例如，下面的代碼演示了如何在單擊按鈕時動態改變class：

const button = document.querySelector('button');
button.addEventListener('click', () =>{
button.classList.toggle('active');
});

在這個例子中，我們首先使用querySelector選擇了一個按鈕元素，然后添加了一個事件監聽器，當按鈕被單擊時，該監聽器將在按鈕上切換"active" class。這意味著，如果按鈕已經有了這個class，它將被刪除，如果沒有，它將被添加。

除了toggle方法外，classList還有一些其他方法，例如add()和remove()方法，用于分別添加和刪除class。例如，下面的代碼演示了如何在加載頁面時添加一個class：

const body = document.querySelector('body');
window.addEventListener('load', () =>{
body.classList.add('loaded');
});

在這個例子中，我們首先選擇了文檔的body元素，然后添加了一個load事件監聽器。當頁面加載完成時，該監聽器將在body元素上添加"loaded" class，以表示頁面已經加載完成。

另外，classList還有一個contains()方法，可以用于檢查一個元素是否有某個特定的class。例如，下面的代碼演示了如何通過檢查導航欄元素是否有"active" class來確定當前頁面的活動狀態：

const navLinks = document.querySelectorAll('.nav-link');
const navBar = document.querySelector('.navbar');
navLinks.forEach(link =>{
link.addEventListener('click', () =>{
navLinks.forEach(link =>link.classList.remove('active'));
link.classList.add('active');
navBar.classList.toggle('collapsed');
});
});
if (navBar.classList.contains('collapsed')) {
console.log('Navigation bar is collapsed');
} else {
console.log('Navigation bar is expanded');
}

在這個例子中，我們首先使用querySelectorAll選擇所有具有".nav-link" class的元素和".navbar"元素，然后分別為所有鏈接添加了單擊事件監聽器。當單擊鏈接時，監聽器將刪除所有鏈接的"active" class，然后為當前鏈接添加該class，并切換".navbar"元素的"collapsed" class（以此來控制導航欄的展開和折疊）。在樣式和行為上實現導航欄的交互。

總之，改變class是JavaScript中的一個重要部分，可以幫助我們控制頁面元素的外觀和行為。我們可以使用classList對象中的一系列方法來添加、刪除和切換class，從而創建出更加豐富的用戶體驗。