js是我們對頁面進行操作媒介，而頁面是通過一個一個標籤組成的，我們的各種事件(滑鼠事件，鍵盤事件等)，各種特效(輪播圖等)，都是通過js來實現和操作的

首先我們要獲取到要實現特效的標籤，之後再進行事件、特效的新增刪除等操作

通過id名獲取(document.getElementById(""))

<div id="box"></div>

var obox = document.getElementById('box');
console.log(obox); // <div id="box"></div>

在css中不管是類名還是id名，樣式都會作用在所有名稱相同的標籤上，但在js中通過id名獲取只能獲取到所有id名相同的標籤中的第一個標籤

<div id="box"></div>
<p id="box"></p>
<span id="box"></span>
<input type="text" id="box">

var obox = document.getElementById('box');
console.log(obox); // <div id="box"></div>

通過類名獲取(document.getElementsByClassName(""))

<div class="box"></
 
div>

var obox = document.getElementsByClassName('box');
console.log(obox);

而通過類名來獲取標籤時，會獲取到所有類名相同的標籤

<div class="box"></div>
<p class="box"></p>
<span class="box"></span>
<input type="text" class="box">

var obox = document.getElementsByClassName('box');
console.log(obox);
 

在控制檯中列印，我們可以看到集合中有四個名稱不同，類名相同的標籤

通過類名進行獲取標籤，得到的是一個集合，使用集合中的標籤時，通過下標來獲取到對應的具體標籤

var obox = document.getElementsByClassName('box')
console.log(obox[0]); // <div class="box"></div>

通過標籤名獲取標籤(document.getElementsByTagName(""))

<div class="header"></div>
<p class="box"></p>
<div class="main"></div>
<span class="box"></span>
<input type="text" class="box">
<div class="box"></div>

在上方的html程式碼中有三個div標籤，通過標籤名可以同時獲取到它們三個

var obox = document.getElementsByTagName('div');
console.log(obox);

三個標籤類名不同，但是通過標籤名同時獲取到了它們

PS.總結

通過方法獲取到標籤後是具體標籤的方法為Element

通過方法獲取到標籤集合的方法為Elements

querySelector("")，querySelectorAll("")

通過querySelector和querySelectorAll獲取標籤，要寫清楚標籤的型別id名還是類名，如果是id名則在名稱前方加#(例：#box)，如果是類名則在名稱前方加英文句號(例：.box)

querySelector會獲取到所有名稱相同的標籤中的第一個，querySelectorAll會獲取到所有名稱相同的標籤的集合

區別

querySelector("")，querySelectorAll("")簡稱為query方法

getElementById("")，getElementByClassName("")，getElementByTagName("")簡稱為getElement方法

1.getElement方法不能支援IE8及以下瀏覽器，query方法可以

2.在js中動態增刪dom元素時，getElement方法可以自動更新最新的資料，query方法不可以