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方法不可以