学习JavaScript，少不了学习JavaScript中的DOM操作，本系列文章将会从DOM简介开始，讲解DOM的相关操作，其中本文重点讲解DOM的访问方式。
DOM简介
JavaScript的组成有三部分：
1.ECMAScript --- 核心语法；
2.DOM --- （浏览器对象模型），可以对浏览器窗口进行访问和操作。
3.BOM --- （文档对象模型），是 HTML 和 XML 的应用程序接口（API）。
DOM是Document Object Model的简称，是网站具有交互性的重要组成部分。它是一个接口，允许编程语言操作网站的内容、结构和样式。
在前端开发中，少不了通过JavaScript在网页中添加交互特效，例如下拉菜单、导航菜单切换、轮播图效果等等，这些交互特效都是需要通过js来操作网页中的标签或者样式，而如何来控制网页中的标签，如何通过js来添加样式，这些方法都是在DOM中提供。
总结：DOM可以理解为一个对网页文档进行控制的说明书，里面有各种方法和属性。
访问DOM元素
在对网页中的元素进行操作中，第一个事情就是先获取到这些元素，这个过程就叫DOM元素访问。在平时的开发中，有5中常用的访问DOM元素的方法。
1.getElementById() --- 通过ID访问；
2.getElementsByClassName() --- 通过类名访问；
3.getElementsByTagName() --- 通过标签名称访问；
4.querySelector() --- 通过CSS选择器访问（单个）；
5.querySelectorAll() --- 通过CSS选择器访问 （所有）；
接下来我们将每个方法进行讲解。
getElementById() 通过ID访问
在DOM中访问，通过ID来访问的方式是最为常用的方法之一，通过它唯一的ID来访问到单个元素：
<body>
<div id="box">IDdiv box</div>
<div class="box">Classdiv box</div>
<div class="box">Classdiv box</div>
<p class="p">p element</p>
<p class="p">p element</p>
<p id="third-p">p element</p>
<script>
var oBox = document.getElementById('box');
console.log(oBox); //=><div id="box">div box</div>
oBox.style.background = 'red';
</script>
</body>
var oBox = document.getElementById(‘box’);
document对象是一个内置对象，它有许多属性和方法，可以用来访问和修改Web页面。可以认为，DOM操作相关的方法和属性，都在document对象中。
通过该行代码，可以将第一个div获取到，它身上有名称为box的id：
<div id="box">IDdiv box</div>
同时，可以在控制台通过 console.log( oBox );进行输出结果验证。
也可以直接对访问到的元素进行样式控制，观察样式进行验证。
oBox.style.background = 'red';
结果就是div的背景颜色为红色。
getElementsByClassName() 通过类名访问
通过类名访问文档中的元素，可以获取到1个或多个元素，因为类名不再是唯一，因此getElementsByClassName() 获取到的是一个类数组。
var oDivs = document.getElementsByClassName('box');
该行代码，可以获取到文档中的两个div；
<div class="box">Classdiv box</div>
<div class="box">Classdiv box</div>
通过控制台输出 console.log( oDivs );，可以看到如下结果：
HTMLCollection(2) [div.box, div.box]
console.log( oDivs );
HTMLCollection 是一个类数组，所以它不能直接进行控制，例如像上面那样修改样式，是直接修改不了的。
oDivs.style.background = 'red';
结果就是直接报错：
Uncaught TypeError: Cannot set property 'background' of undefined at demo.html:21
oDivs.style.background = 'red';
在js中规定，类数组可以使用[]或者item()通过索引值进行访问，例如:oDivs[0] 表示访问第一个div元素。
结果是：
<div class="box">Classdiv box</div>
也可以通过该方式进行修改样式以及其他操作。
oDivs[0].style.background = 'blue';
通常我们使用class访问元素时，希望选中文档中的所有指定类的元素，而不像上图一样仅仅是其中的一个。刚才也提到了getElementsByClassName()方法返回的是一个HTMLCollection，是一个类数组，那么我们可以通过for循环来遍历数组中的每一项，让我们不再只选择一个元素：
for(var i=0; i<oDivs.length; i++){
oDivs[i].style.background = 'blue'
}
getElementsByTagName() 通过标签名称访问
通过标签名称访问的方式其实跟上面的 getElementsByClassName() 是差不多的，获取到的也是一个类数组，因此单个的访问方式也是一样。
var oDemos = document.getElementsByTagName('div');
通过 console.log(oDemos);输出看到的结果：
HTMLCollection(3) [div#box, div.box, div.box, box: div#box]
console.log(oDemos);
通过CSS选择器访问
querySelector()
如果是有jQuery基础的小伙伴，肯定会对jQuery强大的DOM查找系统不陌生。
例如：
$('#box');
$('.box');
$('div');
现在，不用羡慕jQuery了，在JavaScript中也可以使用querySelector()和querySelectorAll()方法执行类似jQuery中选择DOM元素的方法。
如果要访问单个元素，可以使用querySelector()方法。例如：
var oEle = document.querySelector('#box');
console.log(oEle);
结果就是获取到第一个div；<div id="box">IDdiv box</div>
而如果，通过.box 选择器来写，网页中有两个符合，但还是只返回第一个.box标签。
var oEle = document.querySelector('.box');
console.log(oEle);
结果是：<div class="box">Classdiv box</div>
也可以通过：oEle.style.background = 'green'; 进行验证；
querySelectorALL()
querySelectorAll()方法类似于getElementsByClassName()方法，只不过其返回的是一个NodeList的类数组，也是一个队列。同样的，不能直接进行控制，需要使用类似于forEach()方法对类数组进行遍历：
var oPs = document.querySelectorAll('.p');
console.log(oPs);
结果是：NodeList(2) [p.p, p.p]
console.log(oPs);
对获取到的进行单个控制，可以使用[]按索引值进行控制，获取通过 for 循环进行群体控制。
oPs[0].style.background = 'red';
总结
本文主要是对DOM进行了结束，以及讲解了DOM访问标签的几个方法，分部是，通过ID访问，通过类名访问，通过标签名称访问，以及通过CSS选择器进行访问。
网友评论