什么是HTML DOM

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

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

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

• 通過ID獲取（getElementById）
• 通過name屬性（getElementsByName）
• 通過標(biāo)簽名（getElementsByTagName）
• 通過類名（getElementsByClassName）
• 獲取html的方法（document.documentElement）
• 獲取body的方法（document.body）
• 通過選擇器獲取一個(gè)元素（querySelector）
• 通過選擇器獲取一組元素（querySelectorAll）
  我們開始逐一講解侄旬。

1.通過ID獲确挝怠（getElementById）

document.getElementById('id')

用法：
1.上下文必須是document。
2.必須傳參數(shù)儡羔，參數(shù)是string類型宣羊，是獲取元素的id。
3.返回值只獲取到一個(gè)元素汰蜘，沒有找到返回null仇冯。

坑~_坑坑坑坑_坑坑：
1.如果有多個(gè)id存在只獲取第一個(gè)，也就是最先出現(xiàn)的哪一個(gè)族操。一般情況也不會(huì)出現(xiàn)同一個(gè)ID在頁面上出現(xiàn)兩次苛坚。
2.在IE6、7中會(huì)把表單元素的name當(dāng)做ID值獲取到。所以大家在定義這些的時(shí)候一定要注意泼舱。
3.在IE6等缀、7中不區(qū)分大小寫。
4.可以直接用元素的ID代表這個(gè)元素柠掂。（項(xiàng)目中不推薦）
5.通過ID獲取元素的上下文只能是document项滑。為什么上下文必須是document呢，因?yàn)間etElementById這個(gè)方法在Document類的原型上涯贞，也許你沒有聽懂枪狂，那就繼續(xù)往下看。

2.通過name屬性（getElementsByName）

document.getElementsByName('name')

用法：
1.上下文必須是document宋渔。
2.必須傳參數(shù)州疾，參數(shù)是是獲取元素的name屬性。
3.返回值是一個(gè)類數(shù)組皇拣，沒有找到返回空數(shù)組严蓖。

坑~_坑坑坑坑_坑坑：
1.獲取的結(jié)果是一個(gè)類數(shù)組，不是數(shù)組氧急。
2.在IE瀏覽器中只能獲取到表單元素颗胡，當(dāng)然我們一般也只用它獲取表單元素，從ie10開始可以不只是表單元素吩坝。
3.上下文只能是document毒姨，原因同getElementById。

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

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

用法：
1.上下文可以是document钉寝，也可以是一個(gè)元素弧呐，注意這個(gè)元素一定要存在。
2.參數(shù)是是獲取元素的標(biāo)簽名屬性嵌纲，不區(qū)分大小寫俘枫。
3.返回值是一個(gè)類數(shù)組，沒有找到返回空數(shù)組逮走。

坑~_坑坑坑坑_坑坑：
1.獲取的結(jié)果是一個(gè)類數(shù)組鸠蚪。
2.上下文不必須是document了，因?yàn)間etElementsByTagName方法在不僅在Document類的原型上也在Element類的原型上言沐，所以document和元素都可以使用這個(gè)方法邓嘹。如果還不懂我在文章最后會(huì)再解釋一下。

4.通過類名（getElementsByClassName）

用法（和getElementsByTagName類似）：
1.上下文可以是document险胰，也可以是一個(gè)元素汹押。
2.參數(shù)是元素的類名。
3.返回值是一個(gè)類數(shù)組起便，沒有找到返回空數(shù)組棚贾。

坑~_坑坑坑坑_坑坑：
1.獲取的結(jié)果是一個(gè)類數(shù)組窖维。
2.IE8以及以前版本不兼容。真可惜這么好用的方法不兼容妙痹。

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

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

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

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

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

用法：
1.上下文可以是document怯伊，也可以是一個(gè)元素琳轿。
2.參數(shù)是選擇器，如："div .className"耿芹。
3.返回值只獲取到一個(gè)元素崭篡。

坑~_坑坑坑坑_坑坑：
這個(gè)方法不兼容IE7以及以前版本，現(xiàn)在似乎也沒有考慮IE7兼容的公司了吧秕。

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

用法同querySelector類似：
1.上下文可以是document琉闪，也可以是一個(gè)元素。
2.參數(shù)是選擇器砸彬，如："div .className"颠毙。
3.返回值是一個(gè)類數(shù)組。

坑~_坑坑坑坑_坑坑：
同querySelector砂碉，不兼容IE7蛀蜜。

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

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

他們的繼承關(guān)系：
HTMLDivElement > HTMLElement > Element > Node > EventTarget
HTMLDocument > Document > Node > EventTarget

我們都知道子類繼承父類，子類就可以使用父類的屬性和方法偏瓤。
他們相同的繼承關(guān)系是Node和EventTarget杀怠，也就是說他們都可以使用Node和EventTarget上的方法。
如Node上的nodeName厅克、parentNode等赔退，和EventTarget上的addEventListener等。
getElementById只在Document類的原型上证舟，HTMLDivElement 沒有繼承Document類硕旗，所以div不能使用getElementById方法。
getElementsByTagName即在Document類的原型上也在Element類的原型上女责，所以div和document都可以使用getElementsByTagName方法漆枚。
其它同理。

本文全部內(nèi)容均是自己整理未經(jīng)過校驗(yàn)抵知，如有錯(cuò)誤歡迎指出墙基，避免誤導(dǎo)其他人软族。
歡迎轉(zhuǎn)載，但請注明出處残制。