• 通過ID獲取（getElementById）
• 通過name屬性（getElementsByName）
• 通過標簽名（getElementsByTagName）
• 通過類名（getElementsByClassName）
• 獲取html的方法（document.documentElement）
• 獲取body的方法（document.body）
• 通過選擇器獲取一個元素（querySelector）
• 通過選擇器獲取一組元素（querySelectorAll）

下面依次講解：
1.通過ID獲取（getElementById）

<div id="id1"></div>
<script>
    let box= document.getElementById("id1");
</script>
 

上下文必須是document。
必須傳參數，參數是string類型，是獲取元素的id。
返回值只獲取到一個元素，沒有找到返回null。

2.通過name屬性（getElementsByName）

<div id="box">
    <input type="text" name="user" />
</div>
<script>
    let userInput= document.getElementsByName("user");
</script>

只有含有name屬性的元素(表單元素)才能通過name屬性獲取
上下文必須是document。

3.通過標簽名（getElementsByTagName）

<div id="box"> 
<p>段落A</p>
<p>段落B</p> 
<p>段落C</p> 
<p>段落D</p>
<p>段落E</p> 
<p>段落F</p>
</div> 
<script>
    let pCollection= document.getElementsByTagName("p");
</script>
 

該方法返回的也是一個集合。

4.通過類名（getElementsByClassName）

<div class="box">
</div>
<div class="box">
</div> 
<script>
    let boxCollection= document.getElementsByClassName("box");
    let box1 = boxList[0];
    let box2 = boxList[1];
</script>

getElementsByClassName()括號中的不需要在前面加 “.” ，因為方法就決定了括號中的值是一個元素的class值。該方法返回一個集合。不能直接給集合綁定事件，需要獲取到集合中的某一個元素，然後再為元素綁定事件
IE8以及以前版本不兼容

5.獲取html的方法（document.documentElement）

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

6.獲取body的方法（document.body）

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

7.通過選擇器獲取一個元素（querySelector）

<div id="id1"></div>
<script>
    let box= document.querySelector("#id1");
</script>

querySelector()方法括號中的值是元素的選擇器，所以前面加了”#”符號，使用的是id選擇器。此方法直接返回DOM對象本身
不兼容IE7以及以前版本

8.通過選擇器獲取一組元素（querySelectorAll）

<div class="box">boxA</div>
<div class="box">boxB</div> 
<div class="box">boxC</div> 
<div class="box">boxD</div> 
<div class="box">boxE</div> 
<script>
let box1= document.querySelector(".box"); 
let boxes= document.querySelectorAll(".box"); 
</script>

不兼容IE7
querySelector()和querySelectorAll()方法括號中的取值都是選擇器。
當有多個class相同的元素時，使用querySelector()方法只能獲取到第一個class為box的元素，而querySelectorAll()獲取到了所有class為box的元素集合。

DOM元素的繼承關系

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方法。
其它同理。

總結：

所有獲取DOM對象的方法中，只有getElementById()和querySelector()這兩個方法直接返回的DOM對象本身，可直接為其綁定事件。
getElementXXX類型的方法，除了通過Id獲取元素，其他都返回一個集合，如果需要取到具體的DOM元素，需要加索引，如：document.getElementsByClassName(“box”)[0] =>獲取class為box的所有元素中的第一個DOM元素。
querySelector()與querySelectorAll()兩者的聯系與區別：
聯系： 兩者括號中的取值都是選擇器
區別： 當有多個class相同的元素時，使用querySelector()方法只能獲取到第一個class為box的元素，而querySelectorAll()獲取到了所有class為box的元素集合。

JS獲取DOM的幾種方法