腳本之家服務器常用軟件

快捷導航

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

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

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

DOM—文檔對象模型

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

其實就是操作 html 中的標簽的一些能力

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

我們可以操作哪些內容

獲取一個元素

移除一個元素

創(chuàng)建一個元素

向頁面里面添加一個元素

給元素綁定一些事件

獲取元素的屬性

給元素添加一些 css 樣式

...

DOM 的核心對象就是 document 對象

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

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

DOM樹

整個文檔以樹狀結構出現(xiàn)出來的

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

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

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

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

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

獲取DOM元素

通過 js 代碼來獲取頁面中的標簽

獲取到以后我們就可以操作這些標簽了

獲取非常規(guī)標簽

獲取頁面的html標簽

語法: document.documentElement

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

獲取頁面的head標簽

語法: document.head

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

獲取頁面的body標簽

語法:document.body

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

獲取常規(guī)標簽

getElementById

getElementById 是通過標簽的 id 名稱來獲取標簽的

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

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

獲取到的就是頁面中的那個 id 為 box 的 div 標簽

getElementsByClassName

getElementsByClassName 是用過標簽的 class 名稱來獲取標簽的

因為頁面中可能有多個元素的 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ù)結構，但是不是數(shù)組，是偽數(shù)組

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

getElementsByTagName

getElementsByTagName 是用過標簽的標簽名稱來獲取標簽的

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

哪怕真的只有一個這個標簽名，那么也是獲取一組元素，只不過這一組中只有一個 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ù)組的一組元素

必須要用索引才能得到準確的 DOM 元素

getElementByName

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

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

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

注意：

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

如果頁面上沒有 name 屬性對應的元素, 那么就是一個空的偽數(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ù)，也是需要用索引來獲取到準確的每一個 DOM 元素

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

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

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频