# Javascript ClassName 在 Javascript 中，classname 是一個(gè)非常重要的概念。它可以幫助我們?cè)?HTML 頁(yè)面中精確地定位我們要進(jìn)行操作的元素。classname 本質(zhì)上是一個(gè) HTML 元素的屬性，它可以被用來(lái)指定元素的樣式類。通過(guò)對(duì) HTML 元素的 classname 進(jìn)行操作，我們可以輕易地改變?cè)氐臉邮健⒉僮髟兀踔翆⑺鼈兲砑印h除等。 下面我們來(lái)看看幾個(gè)實(shí)際的例子： ## 例子 1：改變?cè)貥邮? 我們可以通過(guò) classname 來(lái)控制元素的樣式，例如將一個(gè)元素背景顏色改變?yōu)辄S色： ```html``` ```javascript var element = document.querySelector('.my-element'); element.className = 'my-element yellow-background'; ``` 在此例子中，我們選擇了一個(gè) classname 為 `my-element` 的元素，并將其變成了 `yellow-background` 類。在 CSS 中可以定義 `.yellow-background {background-color: yellow;}` 來(lái)讓這個(gè)元素的背景顏色變黃。 ## 例子 2：添加、刪除元素 除了改變?cè)貥邮剑覀円部梢酝ㄟ^(guò)修改 classname 來(lái)添加、刪除元素。例如： ```html``` ```javascript var newListItem = document.createElement('li'); newListItem.innerHTML = 'Item 4'; newListItem.classList.add('item'); var list = document.querySelector('.my-list ul'); list.appendChild(newListItem); var itemToRemove = document.querySelector('.item'); // remove the first item itemToRemove.parentNode.removeChild(itemToRemove); ``` 在這里，我們首先創(chuàng)建了一個(gè)新的 `li` 元素并將其添加到 `my-list` 元素中。我們具體做法是使用 `classList.add` 方法添加了 classname 為 `item` 的類， 然后將這個(gè)新元素添加到列表中。然后我們?cè)偻ㄟ^(guò)查詢 classname 為 `.item` 的元素并將其刪除來(lái)刪除第一個(gè)列表項(xiàng)。 總的來(lái)說(shuō)，classname 是非常有用的，在 Javascript 中經(jīng)常被用來(lái)控制元素和樣式。不過(guò)，在前端中，classname 是 CSS 中另一個(gè)重要的部分。它可以幫助我們選擇具有共同特征的 HTML 元素并樣式化它們。通過(guò)在 Javascript 中使用 classname ，我們可以輕松地將這些 HTML元素與 JS 代碼鏈接起來(lái)，實(shí)現(xiàn)更復(fù)雜、更高效的前端工作。