快捷導(dǎo)航

詳解JS獲取HTML DOM元素的8種方法

更新時(shí)間：2017年06月17日 15:28:11 作者：痦子

本篇文章主要介紹了詳解JS獲取HTML DOM元素的8種方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

什么是HTML DOM

文檔對(duì)象模型（Document Object Model），是W3C組織推薦的處理可擴(kuò)展置標(biāo)語(yǔ)言的標(biāo)準(zhǔn)編程接口。簡(jiǎn)單理解就是HTML DOM 是關(guān)于如何獲取、修改、添加或刪除 HTML 元素的標(biāo)準(zhǔn)。我們用JavaScript對(duì)網(wǎng)頁(yè)進(jìn)行的所有操作都是通過(guò)DOM進(jìn)行的。

這篇文章不做深入研究，只把各種用法和坑做一個(gè)總結(jié)。

JS獲取DOM元素的方法（8種）

通過(guò)ID獲取（getElementById）
通過(guò)name屬性（getElementsByName）
通過(guò)標(biāo)簽名（getElementsByTagName）
通過(guò)類名（getElementsByClassName）
獲取html的方法（document.documentElement）
獲取body的方法（document.body）
通過(guò)選擇器獲取一個(gè)元素（querySelector）
通過(guò)選擇器獲取一組元素（querySelectorAll）

我們開(kāi)始逐一講解。

1.通過(guò)ID獲取（getElementById）

document.getElementById('id')

用法：

1.上下文必須是document。

2.必須傳參數(shù)，參數(shù)是string類型，是獲取元素的id。

3.返回值只獲取到一個(gè)元素，沒(méi)有找到返回null。

坑~~坑坑~坑坑~坑坑~：

1.如果有多個(gè)id存在只獲取第一個(gè)，也就是最先出現(xiàn)的哪一個(gè)。一般情況也不會(huì)出現(xiàn)同一個(gè)ID在頁(yè)面上出現(xiàn)兩次。

2.在IE6、7中會(huì)把表單元素的name當(dāng)做ID值獲取到。所以大家在定義這些的時(shí)候一定要注意。

3.在IE6、7中不區(qū)分大小寫(xiě)。

4.可以直接用元素的ID代表這個(gè)元素。（項(xiàng)目中不推薦）

5.通過(guò)ID獲取元素的上下文只能是document。為什么上下文必須是document呢，因?yàn)間etElementById這個(gè)方法在Document類的原型上，也許你沒(méi)有聽(tīng)懂，那就繼續(xù)往下看。

2.通過(guò)name屬性（getElementsByName）

document.getElementsByName('name')

用法：

1.上下文必須是document。

2.必須傳參數(shù)，參數(shù)是是獲取元素的name屬性。

3.返回值是一個(gè)類數(shù)組，沒(méi)有找到返回空數(shù)組。

坑~~坑坑~坑坑~坑坑~：

1.獲取的結(jié)果是一個(gè)類數(shù)組，不是數(shù)組。

2.在IE瀏覽器中只能獲取到表單元素，當(dāng)然我們一般也只用它獲取表單元素，從ie10開(kāi)始可以不只是表單元素。

3.上下文只能是document，原因同getElementById。

3.通過(guò)標(biāo)簽名（getElementsByTagName）

document.getElementsByTagName('p');
var oDiv = document.getElementById('divId');
oDiv.getElementsByTagName('p');

用法：

1.上下文可以是document，也可以是一個(gè)元素，注意這個(gè)元素一定要存在。

2.參數(shù)是是獲取元素的標(biāo)簽名屬性，不區(qū)分大小寫(xiě)。

3.返回值是一個(gè)類數(shù)組，沒(méi)有找到返回空數(shù)組。

坑~~坑坑~坑坑~坑坑~：

1.獲取的結(jié)果是一個(gè)類數(shù)組。

2.上下文不必須是document了，因?yàn)間etElementsByTagName方法在不僅在Document類的原型上也在Element類的原型上，所以document和元素都可以使用這個(gè)方法。如果還不懂我在文章最后會(huì)再解釋一下。

4.通過(guò)類名（getElementsByClassName）

用法（和getElementsByTagName類似）：

1.上下文可以是document，也可以是一個(gè)元素。

2.參數(shù)是元素的類名。

3.返回值是一個(gè)類數(shù)組，沒(méi)有找到返回空數(shù)組。

坑~~坑坑~坑坑~坑坑~：

1.獲取的結(jié)果是一個(gè)類數(shù)組。

2.IE8以及以前版本不兼容。真可惜這么好用的方法不兼容。

5.獲取html的方法（document.documentElement）

document.documentElement是專門(mén)獲取html這個(gè)標(biāo)簽的。

6.獲取body的方法（document.body）

document.body是專門(mén)獲取body這個(gè)標(biāo)簽的。

7.通過(guò)選擇器獲取一個(gè)元素（querySelector）

用法：

1.上下文可以是document，也可以是一個(gè)元素。

2.參數(shù)是選擇器，如："div .className"。

3.返回值只獲取到一個(gè)元素。

坑~~坑坑~坑坑~坑坑~：

這個(gè)方法不兼容IE7以及以前版本，現(xiàn)在似乎也沒(méi)有考慮IE7兼容的公司了。

8.通過(guò)選擇器獲取一組元素（querySelectorAll）

用法同querySelector類似：

1.上下文可以是document，也可以是一個(gè)元素。

2.參數(shù)是選擇器，如："div .className"。

3.返回值是一個(gè)類數(shù)組。

坑~~坑坑~坑坑~坑坑~：

同querySelector，不兼容IE7。

使用原生JS獲取DOM元素的8個(gè)方法講完了，接下來(lái)在講一下為什么有的方法只能在document上使用。

拿div舉栗子，div是HTMLDivElement類的一個(gè)實(shí)例，document是HTMLDocument 的實(shí)例。

他們的繼承關(guān)系：

HTMLDivElement > HTMLElement > Element > Node > EventTarget

HTMLDocument > Document > Node > EventTarget

我們都知道子類繼承父類，子類就可以使用父類的屬性和方法。

他們相同的繼承關(guān)系是Node和EventTarget，也就是說(shuō)他們都可以使用Node和EventTarget上的方法。

如Node上的nodeName、parentNode等，和EventTarget上的addEventListener等。

getElementById只在Document類的原型上，HTMLDivElement 沒(méi)有繼承Document類，所以div不能使用getElementById方法。
getElementsByTagName即在Document類的原型上也在Element類的原型上，所以div和document都可以使用getElementsByTagName方法。

其它同理。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。