JavaScript-DOM访问方式

学习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选择器进行访问。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 11,873评论 1 91
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 3,683评论 0 20
  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 2,450评论 0 44
  •   DOM(文档对象模型)是针对 HTML 和 XML 文档的一个 API(应用程序编程接口)。   DOM 描绘...
    霜天晓阅读 1,146评论 0 7
  • 隔着十二个时区的距离想你思念飘荡在空中填满了整个东八区定于2018.9.12
    简JN阅读 1,678评论 44 59