詳解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(類名)
  -原先有就刪除，原先沒有就增加