詳細列舉DOM獲取元素的幾種方法

整理記錄一些以前的筆記~~~

在DOM中,提供了很多的獲取元素的方法和之間關係的屬性以及操作這些元素的方法。

獲取頁面中元素的方法

1)、通過元素的id來獲取一個元素

document.getElementById('元素的ID')
  在整個文檔中,通過元素的ID獲取到這個元素對象(獲取的是一個元素)
注意:如果頁面中的 id 重複了,那麼這個方法默認只獲得第一個元素
在ie6、7中,會把表單元素(input)的name屬性值當做ID來使用;
在ie6、7中,不區分ID的大小寫;
使用注意事項:不要讓表單元素的name和其他元素的id重複,不要用id的大小寫來區分不同元素
  如果沒有獲取到,返回的 結果爲null
  也可以直接的用元素的id來代表當前元素對象(不推薦)

2)、通過元素的標籤名,來獲取一組元素

document.getElementsByTagName('元素的標籤名')
  在整個文檔中,通過元素的標籤名獲取一組元素。(有幾個獲取幾個)
  獲取的是一個對象數據類型結果,並且是一個類數組(以數字作爲索引,索引從0開始,逐級遞增,索引代表的是當前對應的某一個元素,有一個叫做length的屬性代表獲取的個數)
  document稱之爲上下文(context),就是我們自己可以限定當前獲取元素的範圍
  getElementById的上下文只能是document。

3)、通過元素的name屬性的值獲取一組元素

context.getElementsByName()
通過元素的name屬性的值獲取一組元素,在ie瀏覽器下只對表單元素起作用
  這個方法一般會應用於獲取具有同樣name的表單元素

4)、通過元素的類名(class的值)

context.getElementsByClassName()
通過元素的類名(class的值) 是項目中最常用的一種方法,但是在ie6-ie8中會報錯。獲取多個的這幾個方法,即使你獲取的只有一個,他也是類數組,也是一個集合,如果想用其中的第一個,也要通過索引拿出來用。

5)、直接獲取HTML元素

document.documentElement //獲取HTML元素
例如:
//獲取body元素
document.body
//兼容所有瀏覽器的獲取當前屏幕的寬度
var curWidth = document.documentElement.clientWidth || document.body.clientWidth
//兼容所有瀏覽器的獲取當前屏幕的高度
var curHeight = document.documentElement.clientHeight || document.body.clientHeight

6)在移動端獲取元素常用的方法(IE6~8下不兼容)

//獲取一個
document.querySelector()
//獲取多個
document.querySelectorAll()
querySelector、jquery中的選擇器參考的是css選擇器的規則

暫時記錄這幾個,其實還是比較簡單的~
慣例 撒花✿✿ヽ(°▽°)ノ✿

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章