原生JS獲取DOM元素的方法(很多種方法)

2021-10-06 12:00:00 字數 1927 閱讀 1212

通過id獲取(getelementbyid)

通過name屬性(getelementsbyname)

通過標籤名(getelementsbytagname)

通過類名(getelementsbyclassname)

通過選擇器獲取乙個元素(queryselector)

通過選擇器獲取一組元素(queryselectorall)

獲取html的方法(document.documentelement)

document.documentelement是專門獲取html這個標籤的

獲取body的方法(document.body)

document.body是專門獲取body這個標籤的。

1.通過id獲取(getelementbyid)

document.

getelementbyid

('id'

)

上下文必須是document。

必須傳引數,引數是string型別,是獲取元素的id。

返回值只獲取到乙個元素,沒有找到返回null。

2.通過name屬性(getelementsbyname)

document.

getelementsbyname

('name'

)

上下文必須是document。內容

必須傳引數,引數是是獲取元素的name屬性。

返回值是乙個類陣列,沒有找到返回空陣列。

3.通過標籤名(getelementsbytagname)

var obj = document.

getelementsbytagname

('div');

for(

let i =

0; i)}

上下文可以是document,也可以是乙個元素,注意這個元素一定要存在。

引數是是獲取元素的標籤名屬性,不區分大小寫。

返回值是乙個類陣列,沒有找到返回空陣列

4.通過類名(getelementsbyclassname)

var obj1 = document.

getelemensbyclassname

('animated'

)// console.log01

:div#login.login.animated.rubberband

2:div#reg.reg.animated.shake

3:div#kefu.kefu.animated.swing

4:div#loginstate.state.animated.bounce

5:div.loginstate.animated

6:div.regstate.animated

7:div.pop.animated

上下文可以是document,也可以是乙個元素。

引數是元素的類名。

返回值是乙個類陣列,沒有找到返回空陣列。

5.通過選擇器獲取乙個元素(queryselector)

document.

queryselector

('.animated'

)

上下文可以是document,也可以是乙個元素。

引數是選擇器,如:」div .classname」。

返回值只獲取到第乙個元素。

6.通過選擇器獲取一組元素(queryselectorall)

document.

queryselector

('.animated'

)

上下文可以是document,也可以是乙個元素。

引數是選擇器,如:」div .classname」。

返回值是乙個類陣列。

原生JS獲取DOM元素的方法

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

原生JS獲取dom元素高度

clientheight,scrollwidth,offsetwidth的區別 用body 測試 網頁實際寬 document.body.clientwidth 網頁實際高 document.body.clientheight 網頁實際寬 document.body.offsetwidth 包括邊線...

js 獲取dom元素方法

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