JS獲取DOM元素的八種方法


什么是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)

用法:

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)

用法:

 

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

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

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

3.通過標簽名(getElementsByTagName)

用法:

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

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

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

4.通過類名(getElementsByClassName)

用法(和getElementsByTagName類似):

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

2.參數是元素的類名。

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

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方法。

其它同理。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM