前端开发注意啦！一定要会的DOM基础操作（上）

Posted 2021-04-08 飞也飞也

javascript脚本就像剧本，DOM就是导演

Javascript DOM（文档对象模型）是一个允许开发人员控制和管理页面内容、结构和样式的接口。是连接html页面和JS代码的桥梁，通过这个桥梁，js可以控制HTML元素，让他们按照自己的脚本动起来，换句话说，js脚本就是剧本。本文先介绍什么是DOM，然后列举一些基础的DOM操作。

一开始各个厂家的浏览器对DOM的支持层度和方法是不一样的，但现在几乎所有的浏览器都内置了对DOM的支持，并对DOM标准有了很好的支持，所以现在人们可以当心大胆地使用脚本了。实际上，任何一种支持DOM API的程序设计语言都可以去处理标记文档，但是在web领域，舍js其谁啊！

什么是 DOM？

Javascript DOM编程艺术上对DOM有一个总体的定义：DOM是一套对文档的内容进行抽象和概念化的方法。

具体来说，DOM的三个字母分别代表的含义是：

D：document的缩写，也就是文档。浏览器打开一个网页的时候，会先打开一个窗口，窗口里呈现的内容就是文档，文档加载完成，浏览器也就创建了与文档对应的文档对象。文档是一切讨论的基础。

O：object的缩写，也就是对象。js中的对象分为三种：用户自定义对象、内建对象、宿主对象。流浪器窗口对应js中的window对象，就是典型的宿主对象。

M：Model的缩写，也就是模型。模型就是对对象的一种描述，DOM把一份文档表示为一棵树。html元素是根元素，head和body是html下的两个节点，以此类推，html文档内容以及相互之间的关系就用树形的形式被描述出来，这个树就是这个文档的模型。

节点（node）表示网络结构中的一个连接点。DOM中文档是由节点构成的集合，只不过在树形网络中，节点只有树枝节点和叶子两种类型节点。DOM中的节点按标记来分，分为元素节点、文本节点、属性节点。元素节点很好理解，就是对应的HTML标签，比如根节点html元素，body元素，div元素、p元素、span元素等。需要注意的是文本节点，是指包含在标签内的被标签分隔的文本是独立的一个文本节点比如<p style="color:red" class="title">文本<span>内容</span>在此</p>，对应的网络节点就是：

查找 HTML 元素

查找元素是处理元素的基础，DOM提供了多种查找元素的方法：

按 ID 获取元素：getElementById()

方法用于通过其 id 获取单个元素。我们来看一个例子：

var AD = document.getElementById(‘banner’);

我们得到 id 为“banner”的元素，并将其保存到变量AD 中。

注意这个方法的getElementById没有s，写成getElementsById是错误的。

按类名获取元素：getElementsByClassName()

用getElementsByClassName()方法获取的是多个对象的组成的元素数组。

var items = document.getElementsByClassName(‘hot’);

这里我们得到所有包含“hot”类的元素，并以数组的形式将它们保存到变量中。这个很好理解，可能有多个元素使用了这个类。

按标签名称获取元素：getElementsByTagName()

ID和类名都是元素的属性，除了这两个其实还可以直接用标签名称来获取元素：

var uls= document.getElementsByTagName(‘ul’);

这里我们获取 HTML 文档中所有的ul元素，并将它以数组的形式保存到变量uls中。

通过Queryselector借助CSS选择器

借助querySelector()方法，可以获取与 CSS选择器匹配的第一个元素。比如通过id、class、tag和其他的 CSS 选择器获取元素。

按 id 获取：

var title = document.querySelector(‘#title’)

按 class 获取：

var title = document.querySelector(‘.title’)

按标签获取：

var title = document.querySelector(‘h1’);

获取更精准的元素：

document.querySelector(“p.title”);

返回传递给 CSS Selector 的第一个元素class中含有title类的p元素。

Queryselectorall

querySelectorAll()方法与querySelector()在使用方法上完全相同，只是它返回的是一个数组，包含所有符合 CSS选择器的元素。

var des = document.querySelectorAll(‘p.des’);

在这个例子中，我们得到所有包含des类的p标签，并将它以数组的形式存储在变量des中。

本文先介绍DOM的概念，以及DOM的查找操作，查找的目的是为了对DOM节点进行进一步的处理，下一节着重介绍如何通过DOM来进行修改操作。