詳解JS獲取HTML DOM元素的8種方法
什么是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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法
計(jì)時(shí)器在日常開(kāi)發(fā)中經(jīng)常會(huì)遇到,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用計(jì)時(shí)器setInterval的場(chǎng)景與方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-08-08JavaScript常用數(shù)組元素搜索或過(guò)濾的四種方法詳解
這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過(guò)濾的四種方法,每種方式通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-08-08js操作數(shù)組函數(shù)實(shí)例小結(jié)
這篇文章主要介紹了js操作數(shù)組函數(shù),實(shí)例分析了JavaScript針對(duì)數(shù)組刪除指定元素、去重及刪除指定下標(biāo)元素的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-12-12javascript延時(shí)加載之defer測(cè)試
偶爾發(fā)現(xiàn) js 中有個(gè)延時(shí)加載的標(biāo)簽 defer,還在疑惑這么好用的東西為什么沒(méi)有流行起來(lái),本人今天把它拾起來(lái)用了一下,發(fā)現(xiàn)只在ie7,8,9和360安全濟(jì)覽器下可以,知道為什么不用它了吧2012-12-12如何優(yōu)雅地取消 JavaScript 異步任務(wù)
這篇文章主要介紹了如何優(yōu)雅地取消 JavaScript 異步任務(wù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03JS+canvas五子棋人機(jī)對(duì)戰(zhàn)實(shí)現(xiàn)步驟詳解
這篇文章主要介紹了JS+canvas五子棋人機(jī)對(duì)戰(zhàn)實(shí)現(xiàn)步驟詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-06-06js中apply和Math.max()函數(shù)的問(wèn)題及區(qū)別介紹
這篇文章主要介紹了js中apply和Math.max()函數(shù)的問(wèn)題,本文給大家?guī)?lái)兩種答案,每一種答案給大家介紹的非常詳細(xì),在文章底部給大家提到了js中Math.max.apply和Math.max的區(qū)別,感興趣的朋友一起看看吧2018-03-03