原生JS獲取DOM元素的方法

2021-09-29 14:56:51 字數 1694 閱讀 2138

js獲取dom元素的方法(8種)

通過id獲取(getelementbyid)

通過name屬性(getelementsbyname)

通過標籤名(getelementsbytagname)

通過類名(getelementsbyclassname)

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

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

獲取html的方法(document.documentelement)

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

獲取body的方法(document.body)

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

1.通過id獲取

>

var div = document.

getelementbuid

()

2.通過name屬性

"text" name=

"password"

/>

var div = document.

getelementbyname

('password'

)

3.通過標籤名

文字文字文字<

/p>

文字文字文字<

/p>

文字文字文字<

/p>

文字文字文字<

/p>

var p = document.

getelementbytagname

('p'

)for

(var i =

0; i)

4.通過類名

=>

<

/div>

getelementbyclassname

()

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

class

="layout"

>

<

/div>

queryselector()

var layout = document.

queryselector

('.layout'

)var div = document.

queryselector

('div'

)

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

="list"

>

="item"

>文字1

<

/li>

="item"

>文字2

<

/li>

="item"

>文字3

<

/li>

="item"

>文字4

<

/li>

="item"

>文字5

<

/li>

<

/ul>

var li = document.

queryselectorall

('.list .item'

)for

(var i in li)

原生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 通過選擇...

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

通過id獲取 getelementbyid 通過name屬性 getelementsbyname 通過標籤名 getelementsbytagname 通過類名 getelementsbyclassname 通過選擇器獲取乙個元素 queryselector 通過選擇器獲取一組元素 querysel...