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

2021-10-01 03:30:59 字數 1783 閱讀 5753

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

在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選擇器的規則

暫時記錄這幾個,其實還是比較簡單的~

慣例 撒花✿✿ヽ(°▽°)ノ✿

Dom獲取元素的幾種方式

通過id獲取獲取元素 document.getelementbyid 通過標籤名獲取元素 集合 document.getelementbytagname 通過class獲取元素 集合 ie9失效 document.getelementbyclassname 封裝getbyclass 方法一 func...

DOM獲取元素的幾種方法

dom根據id獲取元素 var div document.getelementbyid main console.log div 獲取到的資料型別 htmldivelement,物件都是有型別的 htmldivelement htmlelement element node eventtarget ...

DOM元素的獲取

通過id獲取元素 document.getelementbyid id 通過class獲取元素 document.getelementsbyclassname class 注意 這裡不相容ie8及以下,jq的話獲取class不影響這裡,假如要這樣操作的話,你需要寫個方法 function getel...