JS中獲取DOM的方法

2021-08-10 18:20:32 字數 1565 閱讀 1287

getelementbyid通過元素id獲取

此方法的上下文只能是document。

乙個html頁面中元素的id理論上是不能重複的,但是重複了頁面中也不會報錯

1、如果頁面中的id重複了,我們獲取的是第乙個id對應的元素物件。

2、在ie7及更低版本瀏覽器中,會把表單元素的name值當做id來識別。(專案中盡量不要讓表單的name和其他的元素的id相同

3、如果我們把js放在結構的下面,我們可以直接使用id值獲取這個元素(不需要通過getelementbyid獲取),而且這種方式會把頁面中所有id是他的元素都獲取到(元素物件/元素集合) ===》 此方法不推薦

getelementsbytagname通過元素標籤名獲取

此方法的上下文可以自己來定的

獲取到的結果是乙個元素集合(類陣列集合)

1、獲取的結果是集合,哪怕集合中只有一項,我們想要操作的是這一項(元素物件),需要先從集合中獲取出來,然後再操作。

2、在指定的上下文中,獲取所有子子孫孫元素中標簽名叫做這個的(後代篩選)

getelementsbyclassname通過元素的類名獲取

上下文可以隨意指定

獲取的結果是乙個類陣列

1、真實專案中我們經常會通過樣式類名來獲取元素,getelementsbyclassname這個方法在ie6~8瀏覽器中是不相容的

getelementsbyname通過元素的name屬性獲取

通過元素的name屬性值獲取一組元素(類陣列:節點集合 nodelist)

它的上下文也只能是document

ie瀏覽器只能識別表單元素的name屬性值,所以我們這個方法一般都是用來操作表單元素的

document.documentelement / document.body

獲取html或者body(乙個元素物件)

獲取一屏的高度

document.documentelement

.clientwidth||document.body

.clientwidth

//clientheight js中操作盒子模型的屬性,獲取可是區域的高度。

queryselector / queryselectorall

在ie6~8下不相容,而且也沒什麼特別好辦法處理它的相容,所以這兩個方法一般多用於移動端開發使用

queryselector:獲取乙個元素物件

queryselectorall:獲取的是乙個元素集合

只要是css支援的選擇器,這裡大部分都支援

js 獲取dom元素方法

js 獲取dom元素的八種方法 通過id獲取 getelementbyid 通過name屬性 getelementsbyname 通過標籤名 getelementsbytagname 通過類名 getelementsbyclassname 通過選擇器獲取乙個元素 queryselector 通過選擇...

原生JS獲取DOM元素的方法

js獲取dom元素的方法 8種 通過id獲取 getelementbyid 通過name屬性 getelementsbyname 通過標籤名 getelementsbytagname 通過類名 getelementsbyclassname 通過選擇器獲取乙個元素 queryselector 通過選擇...

JS獲取MOD屬性和DOM方法

dom樹 html下面的head和body head下面有meta style title body下面的有一些div標籤,像這種就是dom樹 nodetype 任何的html元素都有nodetype屬性,值1 11,原生js屬性 只需要掌握4個 值 1 元素節點 3 文字節點 空格也是文字節點 8...