詳解JavaScript如何操作元素屬性,樣式和類名

DOM - Document Object Model

一整套操作檔案流的屬性和方法

操作頁面的標籤(元素)
操作標籤的增刪改查
操作標籤的屬性(id, class, type, …)
操作標籤的樣式
…
認識一些內容
-document：檔案流，頁面，根節點，但不是元素(標籤)
-html：承載所有標籤的最大的元素，根元素節點
-head：專門承載當前頁面的說明標籤，這裡的內容一般不顯示在頁面上
-body：專門承載當前頁面的顯示標籤，真實顯示在網頁的內容

獲取元素

用一個變數儲存頁面中的某個或者某些元素
獲取元素的方法分為兩類
1、獲取非常規元素

html：document.documentElement
head：document.head
body：document.body

2、獲取常規元素

根據 id 獲取元素
語法：document.getElementById
返回值：如果頁面上有 id 對應的元素，那麼就是這個元素，如果沒有就是 null
根據類名獲取元素
語法：document.getElementsByClassName(‘元素類名’)
返回值：必然是一個偽陣列
如果頁面上有類名對應的元素, 那麼有多少獲取多少, 放在偽陣列內返回
如果頁面上沒有類名對應的元素, 那麼就是一個空的偽陣列
根據標籤名獲取元素
語法：document.getElementsByTagName(‘標籤名’)
返回值：必然是一個偽陣列
如果頁面上有標籤名對應的元素, 那麼有多少獲取多少, 放在偽陣列內返回
如果頁面上沒有標籤名對應的元素, 那麼就是一個空的偽陣列
根據選擇器獲取一個標籤
語法：document.querySelector(‘選擇器’)
返回值：如果頁面上有選擇器對應的元素, 那麼返回選擇器對應的第一個元素
如果頁面上沒有選擇器對應的元素, 那麼就是 null
根據選擇器獲取一組標籤
語法：document.querySelectorAll(‘選擇器’)
返回值：必然是一個偽陣列
如果頁面上有選擇器對應的元素, 有多少獲取多少, 放在一個偽陣列內返回
如果頁面上沒有選擇器對應的元素, 那麼就是一個空的偽陣列

操作元素樣式

在 JS 內操作元素樣式有三種
1、獲取元素行內樣式(只能獲取到行內樣式)
2、獲取元素非行內樣式(包含行內和非行內)
3、設定元素的樣式(只能設定行內樣式)
注意:涉及到帶有中劃線的樣式名的時候
轉換成駝峰命名法
使用陣列關聯語法
獲取元素行內樣式
語法：元素.style.樣式名

console.log(ele.style.width)
console.log(ele.style.height) // 非行內樣式
console.log(ele.style.fontSize)
console.log(ele.style['font-size'])

·獲取元素非行內樣式
語法：window.getComputedStyle(要獲取樣式的元素).樣式名

console.log(window.getComputedStyle(ele).width)
console.log(window.getComputedStyle(ele).height)
console.log(window.getComputedStyle(ele).fontSize)
console.log(window.getComputedStyle(ele)['background-color'])

設定元素樣式(只能設定行內樣式)
語法：元素.style.樣式名 = 樣式值

ele.style.backgroundColor = 'red'

操作元素類名

目的：批次給變樣式

className
原生屬性的操作
因為 JS 內有一個關鍵子叫做class，為了避開改名叫做className
注意：類名的值是一個字串, 但是字串中可能包含多個類名
classList
每一個元素節點身上自帶一個屬性叫做classList
是一個類似素組的資料結構，存放的是該元素的所有類名
增刪改查都是對 classList 的操作，給出專用的api
增：元素.classList.add(類名)
刪：元素.classList.remove(類名)
切換：元素.classList.toggle(類名)
-原先有就刪除，原先沒有就增加