DOM操做之——獲取DOM標籤的9種方式

雖然如今咱們在開發中已經用不到本身操做DOM了，以前有JQ，如今更是有VUE、REACT兩大框架供咱們使用，可是咱們也有必要了解下，關於原生JS中的DOM操做問題。

• 此次咱們先介紹幾個DOM標籤獲取的方式

思惟導圖

一、經過ID獲取——元素對象

• 語法：document.getElementById([ID])
• 在整個文檔中，根據元素的ID，得到這個元素對象
• document是獲取元素的上下文（獲取元素的範圍）
• 獲取到的結果是一個對象（堆內存：裏面存儲着不少內置的屬性和方法）

1).getElementById 方法的上下文只能是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方法。

二、經過標籤名獲取——元素集合

• 語法：[context].getElementsByTagName([標籤名])
• 在指定的上下文中，基於元素的標籤名獲取一組元素集合
• 獲取的結果是HTMLCollection元素集合（類數組：數字做爲索引，length表明長度）
• 集合中的每一項都是一個單獨的元素對象

三、經過CLASS類名獲取——元素集合

• 語法：[context].getElementsByClassName([樣式類])
• 在指定上下文中，基於樣式類名獲取對應的元素集合
• 集合就是集合，想操做某一項須要經過索引獲取後在操做
• 不兼容IE6～8低版本瀏覽器

四、經過NAME屬性名獲取——元素集合

• 語法：document.getElementsByName([NAME 屬性名])
• 根據元素的Name 屬性值，在整個文檔中獲取一組元素集合
• 真實項目中也是基於它操做表單元素的，尤爲是單選框或者複選框
• 在IE9如下只對表單元素做用

五、獲取HTML——元素對象

• 語法：document.documentElement
• 獲取整個HTML元素對象
• HTML是頁面的根節點

六、獲取BODY——元素對象

• 語法：document.body

七、獲取HEAD——元素對象

• 語法：document.head

八、經過CSS選擇器獲取——元素對象

• 語法：[context].querySelector([選擇器])
• 根據選擇器（相似於CSS選擇器）獲取一個元素對象
• 不兼容IE6~8低版本瀏覽器

九、經過CSS選擇器獲取——元素集合

• 語法：[context].querySelectorAll([選擇器])
• 根據選擇器（相似於CSS選擇器）快速獲取一組元素集合
• 哪怕只有一項也是集合
• 不兼容IE6~8低版本瀏覽器

在不考慮兼容的狀況下，這8/9兩種方法就足以獲取咱們須要的元素對象和集合了