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

DOM – Document Object Model

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

• 操作頁(yè)面的標(biāo)簽(元素)
  操作標(biāo)簽的增刪改查
  操作標(biāo)簽的屬性(id, class, type, …)
  操作標(biāo)簽的樣式
  …

• 認(rèn)識(shí)一些內(nèi)容
  -document：文檔流，頁(yè)面，根節(jié)點(diǎn)，但不是元素(標(biāo)簽)
  -html：承載所有標(biāo)簽的最大的元素，根元素節(jié)點(diǎn)
  -head：專門承載當(dāng)前頁(yè)面的說(shuō)明標(biāo)簽，這里的內(nèi)容一般不顯示在頁(yè)面上
  -body：專門承載當(dāng)前頁(yè)面的顯示標(biāo)簽，真實(shí)顯示在網(wǎng)頁(yè)的內(nèi)容

獲取元素

用一個(gè)變量保存頁(yè)面中的某個(gè)或者某些元素
獲取元素的方法分為兩類
1、獲取非常規(guī)元素

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

2、獲取常規(guī)元素

• 根據(jù) id 獲取元素
  語(yǔ)法：document.getElementById
  返回值：如果頁(yè)面上有 id 對(duì)應(yīng)的元素，那么就是這個(gè)元素，如果沒(méi)有就是 null

• 根據(jù) 類名 獲取元素
  語(yǔ)法：document.getElementsByClassName(‘元素類名’)
  返回值：必然是一個(gè)偽數(shù)組
  如果頁(yè)面上有 類名 對(duì)應(yīng)的元素, 那么有多少獲取多少, 放在偽數(shù)組內(nèi)返回
  如果頁(yè)面上沒(méi)有 類名 對(duì)應(yīng)的元素, 那么就是一個(gè)空的偽數(shù)組

• 根據(jù) 標(biāo)簽名 獲取元素
  語(yǔ)法：document.getElementsByTagName(‘標(biāo)簽名’)
  返回值：必然是一個(gè)偽數(shù)組
  如果頁(yè)面上有 標(biāo)簽名 對(duì)應(yīng)的元素, 那么有多少獲取多少, 放在偽數(shù)組內(nèi)返回
  如果頁(yè)面上沒(méi)有 標(biāo)簽名 對(duì)應(yīng)的元素, 那么就是一個(gè)空的偽數(shù)組

• 根據(jù)選擇器獲取 一個(gè) 標(biāo)簽
  語(yǔ)法：document.querySelector(‘選擇器’)
  返回值：如果頁(yè)面上有 選擇器 對(duì)應(yīng)的元素, 那么返回選擇器對(duì)應(yīng)的第一個(gè)元素
  如果頁(yè)面上沒(méi)有 選擇器 對(duì)應(yīng)的元素, 那么就是 null

• 根據(jù)選擇器獲取 一組 標(biāo)簽
  語(yǔ)法：document.querySelectorAll(‘選擇器’)
  返回值：必然是一個(gè)偽數(shù)組
  如果頁(yè)面上有 選擇器 對(duì)應(yīng)的元素, 有多少獲取多少, 放在一個(gè)偽數(shù)組內(nèi)返回
  如果頁(yè)面上沒(méi)有 選擇器 對(duì)應(yīng)的元素, 那么就是一個(gè)空的偽數(shù)組

操作元素樣式

• 在 JS 內(nèi)操作元素樣式有三種
  1、獲取元素行內(nèi)樣式(只能獲取到行內(nèi)樣式)
  2、獲取元素非行內(nèi)樣式(包含行內(nèi)和非行內(nèi))
  3、設(shè)置元素的樣式(只能設(shè)置行內(nèi)樣式)
  注意:涉及到帶有中劃線的樣式名的時(shí)候
  轉(zhuǎn)換成駝峰命名法
  使用數(shù)組關(guān)聯(lián)語(yǔ)法

• 獲取元素行內(nèi)樣式
  語(yǔ)法：元素.style.樣式名

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

• ·獲取元素非行內(nèi)樣式
  語(yǔ)法：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'])

• 設(shè)置元素樣式(只能設(shè)置行內(nèi)樣式)
  語(yǔ)法：元素.style.樣式名 = 樣式值

ele.style.backgroundColor = 'red'

操作元素類名

目的：批量給變樣式

• className
  原生屬性的操作
  因?yàn)?JS 內(nèi)有一個(gè)關(guān)鍵子叫做class，為了避開改名叫做className
  注意：類名的值是一個(gè)字符串, 但是字符串中可能包含多個(gè)類名

• classList
  每一個(gè) 元素節(jié)點(diǎn) 身上自帶一個(gè)屬性叫做classList
  是一個(gè)類似素組的數(shù)據(jù)結(jié)構(gòu)，存放的是該元素的所有類名
  增刪改查都是對(duì) classList 的操作，給出專用的api
  增：元素.classList.add(類名)
  刪：元素.classList.remove(類名)
  切換：元素.classList.toggle(類名)
  -原先有就刪除，原先沒(méi)有就增加