獲取DOM元素的方法：
1.通過id獲取
<div id="box"></div>
<script>
let box= document.getElementById("box");
</script>
1
2
3
4
注意：getElementById()括號中的不需要在前面加“#”，因為方法就決定了括號中的值是一個元素的id值。該方法返回一個DOM對象。
2. 通過class獲取
<div class="box"></div>
<div class="box"></div>
<script>
let boxCollection= document.getElementsByClassName("box");
let box1 = boxList[0];
let box2 = boxList[1];
</script>
1
2
3
4
5
6
7
注意：getElementsByClassName()括號中的不需要在前面加 “.” ，因為方法就決定了括號中的值是一個元素的class值。該方法返回一個集合。不能直接給集合綁定事件，需要獲取到集合中的某一個元素，然后再為元素綁定事件。
3. 通過標簽名獲取
<div id="box">
<p>段落1</p>
<p>段落2</p>
<p>段落3</p>
<p>段落4</p>
<p>段落5</p>
<p>段落6</p>
</div>
<script>
let pCollection= document.getElementsByTagName("p");
</script>
1
2
3
4
5
6
7
8
9
10
11
注意: 該方法返回的也是一個集合。
4. 通過name屬性獲取
<div id="box">
<input type="text" name="user" />
</div>
<script>
let userInput= document.getElementsByName("user");
</script>
1
2
3
4
5
6
返回值如下：
注意：只有含有name屬性的元素(表單元素)才能通過name屬性獲取
5. 通過querySelector獲取
<div id="box"></div>
<script>
let box= document.querySelector("#box");
</script>
1
2
3
4
注意：querySelector()方法括號中的值是元素的選擇器，所以前面加了”#”符號，使用的是id選擇器。此方法直接返回DOM對象本身。
6. 通過querySelectorAll獲取
<div class="box">box1</div>
<div class="box">box2</div>
<div class="box">box3</div>
<div class="box">box4</div>
<div class="box">box5</div>
<script>
let box1= document.querySelector(".box");
let boxes= document.querySelectorAll(".box");
</script>
1
2
3
4
5
6
7
8
9
結果如下圖：
注意：querySelector()和querySelectorAll()方法括號中的取值都是選擇器，但從圖中我們可以看出，兩個方法是有區別的。當有多個class相同的元素時，使用querySelector()方法只能獲取到第一個class為box的元素，而querySelectorAll()獲取到了所有class為box的元素集合。
總結：
1.所有獲取DOM對象的方法中，只有getElementById()和querySelector()這兩個方法直接返回的DOM對象本身，可直接為其綁定事件。
2.getElementXXX類型的方法，除了通過Id獲取元素，其他都返回一個集合，如果需要取到具體的DOM元素，需要加索引，如：document.getElementsByClassName(“box”)[0] =>獲取class為box的所有元素中的第一個DOM元素。
3.querySelector()與querySelectorAll()兩者的聯系與區別：
聯系： 兩者括號中的取值都是選擇器
區別： 當有多個class相同的元素時，使用querySelector()方法只能獲取到第一個class為box的元素，而querySelectorAll()獲取到了所有class為box的元素集合。
————————————————
原文鏈接：https://blog.csdn.net/qq_33036599/article/details/80660923