" />

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

詳解JS獲取HTML DOM元素的8種方法

 更新時間:2017年06月17日 15:28:11   作者:痦子  
本篇文章主要介紹了詳解JS獲取HTML DOM元素的8種方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

什么是HTML DOM

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

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

JS獲取DOM元素的方法(8種)

  1. 通過ID獲?。╣etElementById)
  2. 通過name屬性(getElementsByName)
  3. 通過標簽名(getElementsByTagName)
  4. 通過類名(getElementsByClassName)
  5. 獲取html的方法(document.documentElement)
  6. 獲取body的方法(document.body)
  7. 通過選擇器獲取一個元素(querySelector)
  8. 通過選擇器獲取一組元素(querySelectorAll)

我們開始逐一講解。

1.通過ID獲?。╣etElementById)

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當(dāng)做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瀏覽器中只能獲取到表單元素,當(dāng)然我們一般也只用它獲取表單元素,從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ù)組。

坑~~坑坑~坑坑~坑坑~:

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

2.上下文不必須是document了,因為getElementsByTagName方法在不僅在Document類的原型上也在Element類的原型上,所以document和元素都可以使用這個方法。如果還不懂我在文章最后會再解釋一下。

4.通過類名(getElementsByClassName)

用法(和getElementsByTagName類似):

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

2.參數(shù)是元素的類名。

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

坑~~坑坑~坑坑~坑坑~:

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

2.IE8以及以前版本不兼容。真可惜這么好用的方法不兼容。

5.獲取html的方法(document.documentElement)

document.documentElement是專門獲取html這個標簽的。

6.獲取body的方法(document.body)

document.body是專門獲取body這個標簽的。

7.通過選擇器獲取一個元素(querySelector)

用法:

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

2.參數(shù)是選擇器,如:"div .className"。

3.返回值只獲取到一個元素。

坑~~坑坑~坑坑~坑坑~:

這個方法不兼容IE7以及以前版本,現(xiàn)在似乎也沒有考慮IE7兼容的公司了。

8.通過選擇器獲取一組元素(querySelectorAll)

用法同querySelector類似:

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

2.參數(shù)是選擇器,如:"div .className"。

3.返回值是一個類數(shù)組。

坑~~坑坑~坑坑~坑坑~:

同querySelector,不兼容IE7。

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

拿div舉栗子,div是HTMLDivElement類的一個實例,document是HTMLDocument 的實例。

他們的繼承關(guān)系:

HTMLDivElement > HTMLElement > Element > Node > EventTarget

HTMLDocument > Document > Node > EventTarget

我們都知道子類繼承父類,子類就可以使用父類的屬性和方法。

他們相同的繼承關(guān)系是Node和EventTarget,也就是說他們都可以使用Node和EventTarget上的方法。

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

getElementById只在Document類的原型上,HTMLDivElement 沒有繼承Document類,所以div不能使用getElementById方法。
getElementsByTagName即在Document類的原型上也在Element類的原型上,所以div和document都可以使用getElementsByTagName方法。

其它同理。

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • uniapp中使用計時器setInterval的場景與方法

    uniapp中使用計時器setInterval的場景與方法

    計時器在日常開發(fā)中經(jīng)常會遇到,下面這篇文章主要給大家介紹了關(guān)于uniapp中使用計時器setInterval的場景與方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2022-08-08
  • JavaScript常用數(shù)組元素搜索或過濾的四種方法詳解

    JavaScript常用數(shù)組元素搜索或過濾的四種方法詳解

    這篇文章主要介紹了JavaScript常用數(shù)組元素搜索或過濾的四種方法,每種方式通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-08-08
  • JS仿百度自動下拉框模糊匹配提示

    JS仿百度自動下拉框模糊匹配提示

    這篇文章主要介紹了JS仿百度自動下拉框模糊匹配提示 的相關(guān)資料,需要的朋友可以參考下
    2016-07-07
  • js操作數(shù)組函數(shù)實例小結(jié)

    js操作數(shù)組函數(shù)實例小結(jié)

    這篇文章主要介紹了js操作數(shù)組函數(shù),實例分析了JavaScript針對數(shù)組刪除指定元素、去重及刪除指定下標元素的實現(xiàn)方法,需要的朋友可以參考下
    2015-12-12
  • NodeJS的Promise的用法解析

    NodeJS的Promise的用法解析

    下面小編就為大家?guī)硪黄狽odeJS的Promise的用法解析。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考
    2016-05-05
  • javascript延時加載之defer測試

    javascript延時加載之defer測試

    偶爾發(fā)現(xiàn) js 中有個延時加載的標簽 defer,還在疑惑這么好用的東西為什么沒有流行起來,本人今天把它拾起來用了一下,發(fā)現(xiàn)只在ie7,8,9和360安全濟覽器下可以,知道為什么不用它了吧
    2012-12-12
  • 如何優(yōu)雅地取消 JavaScript 異步任務(wù)

    如何優(yōu)雅地取消 JavaScript 異步任務(wù)

    這篇文章主要介紹了如何優(yōu)雅地取消 JavaScript 異步任務(wù),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-03-03
  • JS+canvas五子棋人機對戰(zhàn)實現(xiàn)步驟詳解

    JS+canvas五子棋人機對戰(zhàn)實現(xiàn)步驟詳解

    這篇文章主要介紹了JS+canvas五子棋人機對戰(zhàn)實現(xiàn)步驟詳解,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2020-06-06
  • ES6正則表達式擴展筆記

    ES6正則表達式擴展筆記

    正則表達式是javascript操作字符串的一個重要組成部分,然而,在ES6中,隨著字符串操作的變更, ES6也對正則表達式進行了一些更新。本文將詳細介紹ES6正則表達式擴展
    2017-07-07
  • js中apply和Math.max()函數(shù)的問題及區(qū)別介紹

    js中apply和Math.max()函數(shù)的問題及區(qū)別介紹

    這篇文章主要介紹了js中apply和Math.max()函數(shù)的問題,本文給大家?guī)韮煞N答案,每一種答案給大家介紹的非常詳細,在文章底部給大家提到了js中Math.max.apply和Math.max的區(qū)別,感興趣的朋友一起看看吧
    2018-03-03

最新評論