這篇文章給大家分享的是有關如使用JS獲取HTML DOM元素的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
1、能夠嵌入動態文本于HTML頁面。2、對瀏覽器事件做出響應。3、讀寫HTML元素。4、在數據被提交到服務器之前驗證數據。5、檢測訪客的瀏覽器信息。6、控制cookies，包括創建和修改等。7、基于Node.js技術進行服務器端編程。
什么是HTML DOM
文檔對象模型（Document Object Model），是W3C組織推薦的處理可擴展置標語言的標準編程接口。簡單理解就是HTML DOM 是關于如何獲取、修改、添加或刪除 HTML 元素的標準。我們用JavaScript對網頁進行的所有操作都是通過DOM進行的。
這篇文章不做深入研究，只把各種用法和坑做一個總結。
JS獲取DOM元素的方法（8種）
通過ID獲?。╣etElementById）
通過name屬性（getElementsByName）
通過標簽名（getElementsByTagName）
通過類名（getElementsByClassName）
獲取html的方法（document.documentElement）
獲取body的方法（document.body）
通過選擇器獲取一個元素（querySelector）
通過選擇器獲取一組元素（querySelectorAll）
我們開始逐一講解。
1.通過ID獲?。╣etElementById）
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方法。
感謝各位的閱讀！關于“如使用JS獲取HTML DOM元素”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
