這篇文章主要介紹了詳解JS取得HTML DOM元素的8種方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧
什麼是HTML DOM
#文件物件模型（Document Object Model），是W3C組織推薦的處理可擴充置標語言的標準程式介面。簡單理解就是HTML DOM 是關於如何取得、修改、新增或刪除 HTML 元素的標準。我們用JavaScript對網頁進行的所有操作都是透過DOM進行的。
這篇文章不做深入研究，只把各種用法和坑做一個總結。
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.必須傳參數，參數是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 op = document.getElementById('pId'); op.getElementsByTagName('p');
用法：
# 1.上下文可以是document，也可以是一個元素，注意這個元素一定要存在。
坑~~坑坑~坑坑~坑坑~：
1.取得的結果是一個類別數組。
2.上下文不必須是document了，因為getElementsByTag
Name方法
4.透過類別名稱（getElementsByClassName）
用法（和getElementsByTagName類似）：
#1.上下文可以是document，也可以是一個元素。
2.參數是元素的類別名稱。
3.傳回值是一個類別數組，沒有找到回傳空數組。
坑~~坑坑~坑坑~坑坑~：2.IE8以及先前版本不相容。真可惜這麼好用的方法不相容。
document.documentElement是專門取得html這個標籤的。
7.透過選擇器取得一個元素（querySelector）
#用法：
這個方法不相容IE7以及以前版本，現在似乎也沒有考慮IE7相容的公司了。
8.透過選擇器取得一組元素（querySelectorAll）
#用法相同querySelector類似：
屬性和方法。
getElementsByTagName即在Document類別的原型上也在Element類別的原型上，所以p和document都可以使用getElementsByTagName方法。
以上是詳解JS取得HTML DOM元素的實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！
