什么是HTML DOM

文檔對象模型（Document Object Model），是W3C組織推薦的處理可擴展置標語言的標準編程接口。簡單理解就是HTML DOM 是關于如何獲取、修改、添加或刪除 HTML 元素的標準。我們用JavaScript對網頁進行的所有操作都是通過DOM進行的。

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

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

1. 通過ID獲取（getElementById）
2. 通過name屬性（getElementsByName）
3. 通過標簽名（getElementsByTagName）
4. 通過類名（getElementsByClassName）
5. 獲取html的方法（document.documentElement）
6. 獲取body的方法（document.body）
7. 通過選擇器獲取一個元素（querySelector）
8. 通過選擇器獲取一組元素（querySelectorAll）

我們開始逐一講解。

1.通過ID獲取（getElementById）

document.getElementById('id')

用法：

1.上下文必須是document。

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

3.返回值只獲取到一個元素，沒有找到返回null。

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

1.如果有多個id存在只獲取第一個，也就是最先出現的哪一個。一般情況也不會出現同一個ID在頁面上出現兩次。

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

3.在IE6、7中不區分大小寫。

4.可以直接用元素的ID代表這個元素。（項目中不推薦）

5.通過ID獲取元素的上下文只能是document。為什么上下文必須是document呢，因為getElementById這個方法在Document類的原型上，也許你沒有聽懂，那就繼續往下看。

2.通過name屬性（getElementsByName）

document.getElementsByName('name')

用法：

1.上下文必須是document。

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

3.返回值是一個類數組，沒有找到返回空數組。

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

1.獲取的結果是一個類數組，不是數組。

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

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

3.通過標簽名（getElementsByTagName）

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

用法：

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

2.參數是是獲取元素的標簽名屬性，不區分大小寫。

3.返回值是一個類數組，沒有找到返回空數組。

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

1.獲取的結果是一個類數組。

2.上下文不必須是document了，因為getElementsByTagName方法在不僅在Document類的原型上也在Element類的原型上，所以document和元素都可以使用這個方法。如果還不懂我在文章最后會再解釋一下。

4.通過類名（getElementsByClassName）

用法（和getElementsByTagName類似）：

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

2.參數是元素的類名。

3.返回值是一個類數組，沒有找到返回空數組。

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

1.獲取的結果是一個類數組。

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

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

document.documentElement是專門獲取html這個標簽的。

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

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

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

用法：

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

2.參數是選擇器，如："div .className"。

3.返回值只獲取到一個元素。

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

這個方法不兼容IE7以及以前版本，現在似乎也沒有考慮IE7兼容的公司了。

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

用法同querySelector類似：

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

2.參數是選擇器，如："div .className"。

3.返回值是一個類數組。

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

同querySelector，不兼容IE7。

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

拿div舉栗子，div是HTMLDivElement類的一個實例，document是HTMLDocument 的實例。

他們的繼承關系：

HTMLDivElement > HTMLElement > Element > Node > EventTarget

HTMLDocument > Document > Node > EventTarget

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

他們相同的繼承關系是Node和EventTarget，也就是說他們都可以使用Node和EventTarget上的方法。

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

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

其它同理。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。