JavaScript中的文档对象模型DOM详解

发布网友发布时间：2024-09-13 02:03

共1个回答

热心网友时间：2024-10-16 07:14

DOM，即文档对象模型，前端开发工程师必学的基础知识，趁着假期，顺便复习一下。在本文将介绍如何在HTML文档中选择元素、如何创建元素、如何更改内联CSS样式以及如何监听事件。

什么是DOM

DOM文档对象模型，是HTML和XML文档的编程接口，用一个逻辑树来表示一个文档，树的每个分支的终点都是一个节点（node），每个节点都包含着对象（objects），允许从文档中创建、更改或删除元素，还可以向这些元素添加事件，使页面更加动态。

DOM将HTML文档视为节点树，一个节点代表一个HTML元素。如下HTML代码，以更好地理解DOM树结构。

文档称为根节点，包含一个子节点，即<html>元素。<html>元素包含两个子元素，分别是<head>和<body>元素。

而<head>和<body>都有自己的子元素，如下图：

可以通过JavaScript访问文档中的这些元素并对其进行更改。下面将介绍如何使用JavaScript处理DOM。

选择元素

如何选择文档中的元素呢？在HTML文档中选择元素有几个不同的方法，下面介绍其中三种方法：

getElementById()：返回一个匹配特定ID的元素。

querySelector()：返回文档中与指定选择器或选择器组匹配的第一个HTMLElement对象。

querySelectorAll()：返回与指定的选择器组匹配的文档中的元素列表(使用深度优先的先序遍历文档的节点）。

getElementById()

在HTML中，id是HTML元素的唯一标识符，意味着不能为两个不同的元素使用设置相同的id，必须要确保id在整个文档中的唯一性。

在JavaScript中，可以通过使用id名称来获取HTML标签。

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>DOM树结构</title></head><body><h1>DOM对象模型</h1><h2>DOM树结构</h2><pid="intro">DOM即文档对象模型，它是一个编程接口。</p><scripttype="text/javascript">constelemIntro=document.getElementById("intro");console.log(elemIntro);</script></body></html>

打开开发者工具：

如果需要获取对象中的文本内容，可以使用textContent或者innerText：

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>DOM树结构</title></head><body><h1>DOM对象模型</h1><h2>DOM树结构</h2><pid="intro">DOM即文档对象模型，它是一个编程接口。</p><scripttype="text/javascript">constelemIntro=document.getElementById("intro");console.log(elemIntro);//获取元素内的文本内容constelemText=elemIntro.textContent;//elemIntro.innerTextconsole.log(elemText);</script></body></html>

打开控制器查看：

querySelector()

使用此方法查找具有一个或多个CSS选择器的元素，下面以国庆电影档期信息为示例，通过querySelector()获取相应的标题和列表元素。

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>DOM树结构</title></head><body><h1>2021国庆电影档期</h1><ulclass="movies"><li>《长津湖》</li><li>《我和我的父辈》</li><li>《铁道英雄》</li></ul><scripttype="text/javascript">constelemTitle=document.querySelector("h1");constelemList=document.querySelector(".movies");console.log("h1");console.log(elemTitle);console.log("ulmovies");console.log(elemList);</script></body></html>

在浏览器打开文档，并开启开发者工具，可以看到如下效果：

querySelectorAll()

此方法查找与CSS选择器匹配的所有元素并返回节点的列表，下面就查找电影档期的每一个li元素：

控制台打印的效果如下：

对于上述节点列表可以按照下面的方式进行遍历：

控制台打印的效果如下：

添加新元素

如何向文档添加新元素呢？可以使用document.createElement()向DOM树添加新元素，通过textContent为其新元素添加内容，如下的示例，在电影档期列表中添加新的档期：

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>DOM树结构</title></head><body><h1>2021国庆电影档期</h1><ulclass="movies"id="movies"><li>《长津湖》</li><li>《我和我的父辈》</li><li>《铁道英雄》</li></ul><scripttype="text/javascript">constmovieItems=document.getElementById("movies");constnewMovie=document.createElement("li");newMovie.textContent="《老鹰抓小鸡》";movieItems.appendChild(newMovie);</script></body></html>

运行后，页面效果如下：

更改CSS样式

如何更改内联CSS样式呢？通过使用style属性来能够更改HTML文档中的CSS样式，还是以国庆电影档期为示例，更改页面标题h1元素的字体大小和字体颜色：

运行后，页面效果如下：

关于CSS样式的属性，在JavaScript中采用驼峰方式，如font-size在JavaScript中对应的属性为fontSize，background-color就是backgroundColor。

如何监听事件

如何使用监听页面上元素的事件？使用方法addEventListener()，下面示例通过点击按钮，在列表中增加新的电影排期，如下：

<!DOCTYPEhtml><htmllang="zh"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><metahttp-equiv="X-UA-Compatible"content="ie=edge"/><title>DOM树结构</title></head><body><h1>2021国庆电影档期</h1><ulid="movies"><li>《长津湖》</li><li>《我和我的父辈》</li><li>《铁道英雄》</li></ul><buttonid="addNew">增加电影《老鹰抓小鸡》</button><scripttype="text/javascript">constmoviesList=document.getElementById("movies");constbutton=document.getElementById("addNew");constaddNewMovie=(movieTitle,elemTarget)=>{constnewMovie=document.createElement("li");newMovie.textContent=movieTitle;newMovie.style.color="#ff0000";elemTarget.appendChild(newMovie);};button.addEventListener("click",()=>{addNewMovie("《老鹰抓小鸡》",moviesList);});</script></body></html>

运行后，页面效果如下：

在实际项目中，事件监听处理比这要负责，对于现代WEB开发，丰富的前端框架，对于事件的处理都已经封装的很好了，甚至让开发人员就忘记了事件监听的相关知识，如事件冒泡、事件捕获、事件委托等，本文就不展开了。

结论

DOM文档对象模型，是HTML和XML文档的编程接口。当浏览器首次读取（解析）的HTML文档时，它会创建一个大的对象，一个以HTML文档为基础的非常大的对象，这个就是DOM。它是从HTML建模的树状结构。DOM用于交互和修改DOM结构或者特定的元素或节点。

全部栏目

JavaScript中的文档对象模型DOM详解