詳解JS取得HTML DOM元素的實例教學

這篇文章主要介紹了詳解JS取得HTML DOM元素的8種方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

什麼是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 op = document.getElementById('pId');
op.getElementsByTagName('p');

用法：

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

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

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

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

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

2.上下文不必須是document了，因為getElementsByTag
Name方法

在不僅在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.參數是選擇器，如："p .className"。 #########3.傳回值只取得到一個元素。 ######坑~~坑坑~坑坑~坑坑~：#######

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

8.透過選擇器取得一組元素（querySelectorAll）

#用法相同querySelector類似：

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

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

3.傳回值是一個類別數組。

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

同querySelector，不相容IE7。

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

拿p舉栗子，p是HTMLpElement類別的一個實例，document是HTMLDocument 的實例。

他們的繼承關係：

HTMLpElement > HTMLElement > Element > Node > EventTarget

HTMLDocument > Document > Node > ; EventTarget

我們都知道子類別繼承父類，子類別就可以使用父類別的

屬性和方法。

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

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

getElementById只在Document類別的原型上，HTMLpElement 沒有繼承Document類，所以p不能使用getElementById方法。

getElementsByTagName即在Document類別的原型上也在Element類別的原型上，所以p和document都可以使用getElementsByTagName方法。

其它同理。

以上是詳解JS取得HTML DOM元素的實例教學的詳細內容。更多資訊請關注PHP中文網其他相關文章！