js獲取dom元素

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.總結

通過方法獲取到標簽的dom的方法為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方法不可以