一整套操作文件流的屬性與方法
操作頁面的標籤(元素)
操作標籤的增刪改查
操作標籤的屬性(id, class, type, …)
操作標籤的樣式
…
認識一些內容
-document：文件流，頁面，根節點，但不是元素(標籤)
-html：承載所有標籤的最大的元素，根元素節點
-head：專門承載目前頁面的說明標籤，這裡的內容一般不顯示在頁面上
-body：專門承載目前頁面的顯示標籤，真實顯示在網頁的內容
用變數儲存頁面中的某個或某些元素
取得元素的方法分為兩類
1、取得非常規元素
語法：document.getElementById
# 傳回值：如果頁面上有id 對應的元素，那麼就是這個元素，如果沒有就是null
語法：document.getElementsByClassName('元素類別名稱')
傳回值：
必然是一個偽數組# 如果頁面上有類別名稱對應的元素, 那麼有多少獲取多少, 放在偽數組內返回
如果頁面上沒有類別名稱對應的元素, 那麼就是一個空的偽數組
語法：document.getElementsByTagName('標籤名稱')
傳回值：
必然是一個偽數組 如果頁面上有標籤名對應的元素,那麼有多少獲取多少, 放在偽數組內返回
如果頁面上沒有標籤名對應的元素, 那麼就是一個空的偽數組
語法：document.querySelector('選擇器')
傳回值：如果頁面上有選擇器對應的元素, 那麼傳回選擇器對應的第一個元素
如果頁面上沒有選擇器對應的元素, 那麼就是null
語法：document.querySelectorAll('選擇器')
傳回值：
必然是一個偽數組 如果頁面上有選擇器對應的元素, 有多少獲取多少, 放在一個偽數組內返回
如果頁面上沒有選擇器對應的元素, 那麼就是一個空的偽陣列
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'])
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'])
ele.style.backgroundColor = 'red'
原生屬性的操作
因為JS 內有一個關鍵子叫做class，為了避開改名叫做className
注意：類別名稱的值是一個字串, 但是字串中可能包含多個類別名稱
每個元素節點身上自帶一個屬性叫做classList
是一個類似素組的資料結構，存放的是該元素的所有類別名稱
增刪改查都是對classList 的操作，給出專用的api
增：元素.classList.add(類別名稱)
刪：元素.classList. remove(類別名稱)
切換：元素.classList.toggle(類別名稱)
-原先有就刪除，原先沒有就增加
JavaScript影片教學】
以上是詳解JavaScript如何操作元素屬性,樣式與類別名的詳細內容。更多資訊請關注PHP中文網其他相關文章！
