什么是HTML DOM

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

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

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

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

我們開始逐一講解。

1.通過ID獲取（getElementById）

document.getElementById('id')

用法：

1.上下文必須是document。

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

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

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

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

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

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

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

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

2.通過name屬性（getElementsByName）

document.getElementsByName('name')

用法：

1.上下文必須是document。

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

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

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

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

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

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

3.通過標簽名（getElementsByTagName）

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

用法：

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

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

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