1、什麼是DOM樹？

當浏覽器加載HTML 頁面的時候，首先就是DOM結構的計算，計算出來的DOM 結構就是DOM 樹（把頁面中的HTML标簽像樹的結構一樣，分析出之間的層級結構關系）

DOM樹描述了标簽與标簽之間的關系（節點間的關系），我們隻要知道任何一個标簽，都可以依據DOM中提供的屬性和方法，獲取到頁面中任意另一個标簽或者節點。

2、在JS中獲取DOM元素的方法

1）getElementById

a、通過元素的ID獲取指定的元素對象，使用的時候都是document.getElementById('')，此處的document是限定了獲取元素的範圍，我們把它稱之為“上下文[context]”；

b、getElementById的上下文隻能是document

因為嚴格意義上每一個頁面上的ID是不能重複的，浏覽器規定在整個文檔中可以獲取這 個唯一的Id。

如果頁面中的Id重複了，我們基于這個方法隻能獲取到第一個元素，後面相同的ID元素無法獲取。

c、在Ie6-7浏覽器中，會把表單元素input的name屬性值當做id來使用（建議：以後使用表單元素時，不要讓name和id的值有沖突）

2）getElementsByTagName

[context].getElementsByTagName——在指定的上下文中，根據标簽名獲取到一組元素集合（HTMLCollection）

a、獲取的元素是一個類數組（不能直接的使用數組中的方法），每一項對應的是一個元素對象（有一些自己的内置屬性）

b、它會把當前上下文中，子子孫孫（後代）層級内的标簽都獲取到（獲取的不僅是兒子級的）

c、基于這個方法獲取到的永遠都是一個集合（不管裡面是否有内容，也不管有幾項，它是一個容器或者集合），如果想操作集合中具體的某一項，需要基于索引獲取到才可以

3）getElementsByClassName

[context].getElementsByClassName’在指定的上下文中，基于元素的樣式類名（class=‘xxx‘）獲取到一組元素集合. 真實項目中，我們經常是基于樣式類給元素設置樣式，所以在JS中，我們也會經常基于樣式類來獲取元素，但是此方法在IE6-8下不兼容。

4）getElementsByName

document.getElementsByName() 它的上下文也隻能是document，在整個文檔中基于元素的name屬性值獲取一組節點集合（也是一個類數組）。

在IE浏覽器當中（IE9及以下），隻對表單元素的name元素起作用（正常來說，我們項目中隻會給表單元素設置name，給非表單元素設置name，其實是一個不太符合規範的操作）。

5）querySelector

[context].querySelector()——在指定的上下文中基于選擇器（類似于CSS選擇器）獲取到指定的元素對象（獲取的是一個元素，哪怕選擇器匹配了多個，我們隻獲取第一個）

6）querySelectorAll

在querySelector的基礎上，我們獲取到選擇器匹配的所有元素，結果是一個節點集合

querySelector、querySelectorAll都是不兼容IE6-8浏覽器的（不考慮兼容的情況下，我們能用byid或者其他方法獲取到，也盡量不要用這兩個方法，這兩個方法性能消耗較大）。

document.querySelectorAll(‘#box’);

document.querySelectorAll(‘.box’);

document.querySelectorAll(‘[name=”hobby”]’);

7）document.head

獲取head元素對象

8）document.body

獲取body元素對象

9）document.documentElement

獲取HTML元素對象

擴展：//=>需求：獲取浏覽器一屏幕的寬度和高度（兼容所有的浏覽器）

document.documentELement.clientWidth || document.body.clientWidth

document.documentELement.clientHeight || document.body.clientHeight

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!