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

快捷導(dǎo)航

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

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

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

DOM—文檔對象模型

DOM（Document Object Model）：文檔對象模型

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

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

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

獲取一個元素

移除一個元素

創(chuàng)建一個元素

向頁面里面添加一個元素

給元素綁定一些事件

獲取元素的屬性

給元素添加一些 css 樣式

...

DOM 的核心對象就是 document 對象

document 對象是瀏覽器內(nèi)置的一個對象，里面存儲著專門用來操作元素的各種方法

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

DOM樹

整個文檔以樹狀結(jié)構(gòu)出現(xiàn)出來的

整個文檔是一個文檔節(jié)點

每個標(biāo)簽是一個元素節(jié)點

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

每一個屬性是一個屬性節(jié)點

注釋屬于注釋節(jié)點

獲取DOM元素

通過 js 代碼來獲取頁面中的標(biāo)簽

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

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

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

語法: document.documentElement

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

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

語法: document.head

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

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

語法:document.body

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

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

getElementById

getElementById 是通過標(biāo)簽的 id 名稱來獲取標(biāo)簽的

因為在一個頁面中 id 是唯一的，所以獲取到的就是一個元素

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

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

getElementsByClassName

getElementsByClassName 是用過標(biāo)簽的 class 名稱來獲取標(biāo)簽的

因為頁面中可能有多個元素的 class 名稱一樣，所以獲取到的是一組元素

哪怕你獲取的 class 只有一個，那也是獲取一組元素，只不過這一組中只有一個 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>

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

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

getElementsByTagName

getElementsByTagName 是用過標(biāo)簽的標(biāo)簽名稱來獲取標(biāo)簽的

因為頁面中可能有多個元素的標(biāo)簽名稱一樣，所以獲取到的是一組元素

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

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

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

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

getElementByName

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

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

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

注意：

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

如果頁面上沒有 name 屬性對應(yīng)的元素, 那么就是一個空的偽數(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 是按照選擇器的方式來獲取元素

也就是說，按照我們寫 css 的時候的選擇器來獲取

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

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

querySelectorAll

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

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

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

querySelector和querySelectorAll在IE低版本中不支持有兼容性問題

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

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片