腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

JavaScript?DOM操作之獲取元素方式全解析

更新時(shí)間：2023年05月24日 08:52:07 作者：陸榮濤

這篇文章主要為大家介紹了JavaScript全解析之DOM操作及獲取元素的方法全面解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

DOM—文檔對(duì)象模型

DOM（Document Object Model）：文檔對(duì)象模型

其實(shí)就是操作 html 中的標(biāo)簽的一些能力

或者說(shuō)是一整套操作文檔流的屬性和方法的集合

我們可以操作哪些內(nèi)容

獲取一個(gè)元素

移除一個(gè)元素

創(chuàng)建一個(gè)元素

向頁(yè)面里面添加一個(gè)元素

給元素綁定一些事件

獲取元素的屬性

給元素添加一些 css 樣式

...

DOM 的核心對(duì)象就是 document 對(duì)象

document 對(duì)象是瀏覽器內(nèi)置的一個(gè)對(duì)象，里面存儲(chǔ)著專門(mén)用來(lái)操作元素的各種方法

DOM：頁(yè)面中的標(biāo)簽，我們通過(guò) js 獲取到以后，就把這個(gè)對(duì)象叫做 DOM 對(duì)象

DOM樹(shù)

整個(gè)文檔以樹(shù)狀結(jié)構(gòu)出現(xiàn)出來(lái)的

整個(gè)文檔是一個(gè)文檔節(jié)點(diǎn)

每個(gè)標(biāo)簽是一個(gè)元素節(jié)點(diǎn)

包含在元素中的文本是文本節(jié)點(diǎn)

每一個(gè)屬性是一個(gè)屬性節(jié)點(diǎn)

注釋屬于注釋節(jié)點(diǎn)

獲取DOM元素

通過(guò) js 代碼來(lái)獲取頁(yè)面中的標(biāo)簽

獲取到以后我們就可以操作這些標(biāo)簽了

獲取非常規(guī)標(biāo)簽

獲取頁(yè)面的html標(biāo)簽

語(yǔ)法: document.documentElement

var doc = document.documentElement
console.log(doc);

獲取頁(yè)面的head標(biāo)簽

語(yǔ)法: document.head

var doc = document.head
console.log(doc);

獲取頁(yè)面的body標(biāo)簽

語(yǔ)法:document.body

var doc = document.body
console.log(doc);

獲取常規(guī)標(biāo)簽

getElementById

getElementById 是通過(guò)標(biāo)簽的 id 名稱來(lái)獲取標(biāo)簽的

因?yàn)樵谝粋€(gè)頁(yè)面中 id 是唯一的，所以獲取到的就是一個(gè)元素

<body>
  <div id="box"></div>
  <script>
      var box = document.getElementById('box')
      console.log(box) // <div></div>
  </script>
</body>

獲取到的就是頁(yè)面中的那個(gè) id 為 box 的 div 標(biāo)簽

getElementsByClassName

getElementsByClassName 是用過(guò)標(biāo)簽的 class 名稱來(lái)獲取標(biāo)簽的

因?yàn)轫?yè)面中可能有多個(gè)元素的 class 名稱一樣，所以獲取到的是一組元素

哪怕你獲取的 class 只有一個(gè)，那也是獲取一組元素，只不過(guò)這一組中只有一個(gè) DOM 元素而已

<body>
  <div calss="box"></div>
  <script>
      var box = document.getElementsByClassName('box')
      console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
  </script>
</body>

獲取到的是一組元素，是一個(gè)長(zhǎng)得和數(shù)組一樣的數(shù)據(jù)結(jié)構(gòu)，但是不是數(shù)組，是偽數(shù)組

這個(gè)一組數(shù)據(jù)也是按照索引排列的，所以我們想要準(zhǔn)確的拿到這個(gè) div，需要用索引來(lái)獲取

getElementsByTagName

getElementsByTagName 是用過(guò)標(biāo)簽的標(biāo)簽名稱來(lái)獲取標(biāo)簽的

因?yàn)轫?yè)面中可能有多個(gè)元素的標(biāo)簽名稱一樣，所以獲取到的是一組元素

哪怕真的只有一個(gè)這個(gè)標(biāo)簽名，那么也是獲取一組元素，只不過(guò)這一組中只有一個(gè) DOM 元素而已

<body>
  <div></div>
  <script>
      var box = document.getElementsByTagName('div')
      console.log(box) // [<div></div>]
    console.log(box[0]) // <div></div>
  </script>
</body>

和 getElementsByClassName 一樣，獲取到的是一個(gè)長(zhǎng)得很像數(shù)組的一組元素

必須要用索引才能得到準(zhǔn)確的 DOM 元素

getElementByName

根據(jù) name 屬性來(lái)獲取元素

語(yǔ)法：document.getElementsByName('name屬性')

返回值：一個(gè)偽數(shù)組，里面是每一個(gè)獲取到的元素對(duì)象

注意：

如果頁(yè)面上有 name 屬性對(duì)應(yīng)的元素, 那么有多少獲取多少, 放在偽數(shù)組內(nèi)返回

如果頁(yè)面上沒(méi)有 name 屬性對(duì)應(yīng)的元素, 那么就是一個(gè)空的偽數(shù)組

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="username" id="">
    <script>
        var eles = document.getElementsByName('username')
        console.log(eles)
    </script>
</body>
</html>

querySelector

querySelector 是按照選擇器的方式來(lái)獲取元素

也就是說(shuō)，按照我們寫(xiě) css 的時(shí)候的選擇器來(lái)獲取

這個(gè)方法只能獲取到一個(gè)元素，并且是頁(yè)面中第一個(gè)滿足條件的元素

console.log(document.querySelector('div')) // 獲取頁(yè)面中的第一個(gè) div 元素
console.log(docuemnt.querySelector('.box')) // 獲取頁(yè)面中第一個(gè)有 box 類名的元素
console.log(document.querySelector('#box')) // 獲取頁(yè)面中第一個(gè) id 名為 box 的元素

querySelectorAll

querySelectorAll 是按照選擇器的方式來(lái)獲取元素
這個(gè)方法能獲取到所有滿足條件的元素，以一個(gè)偽數(shù)組的形式返回

console.log(document.querySelectorAll('div')) // 獲取頁(yè)面中的所有的 div 元素
console.log(docuemnt.querySelectorAll('.box')) // 獲取頁(yè)面中所有有 box 類名的元素

獲取到的是一組數(shù)據(jù)，也是需要用索引來(lái)獲取到準(zhǔn)確的每一個(gè) DOM 元素

querySelector和querySelectorAll在IE低版本中不支持有兼容性問(wèn)題

以上就是JavaScript全解析——DOM操作-獲取元素的方式的詳細(xì)內(nèi)容，更多關(guān)于JavaScript DOM獲取元素的方式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线