JavaScript 中的文档对象模型 DOM

2024-10-03 13:17:13

1、什么是DOM

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

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

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>DOM树结构</title>
    </head>
    <body>
        <h1>DOM对象模型</h1>
        <h2>DOM树结构</h2>
    </body>
</html>

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

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

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

2、选择元素

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

getElementById()：返回一个匹配特定 ID的元素。
querySelector()：返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象。
querySelectorAll()：返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点）。

3、getElementById()

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

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

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>DOM树结构</title>
    </head>
    <body>
        <h1>DOM对象模型</h1>
        <h2>DOM树结构</h2>
        <p id="intro">DOM 即文档对象模型，它是一个编程接口。</p>

        <script type="text/javascript">
            const elemIntro = document.getElementById("intro");
            console.log(elemIntro);
        </script>
    </body>
</html>

打开开发者工具：

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

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>DOM树结构</title>
    </head>
    <body>
        <h1>DOM对象模型</h1>
        <h2>DOM树结构</h2>
        <p id="intro">DOM 即文档对象模型，它是一个编程接口。</p>

        <script type="text/javascript">
            const elemIntro = document.getElementById("intro");
            console.log(elemIntro);
            // 获取元素内的文本内容
            const elemText = elemIntro.textContent; // elemIntro.innerText
            console.log(elemText);
        </script>
    </body>
</html>

打开控制器查看：

4、querySelector()

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

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>DOM树结构</title>
    </head>
    <body>
        <h1>2021国庆电影档期</h1>
        <ul class="movies">
            <li>《长津湖》</li>
            <li>《我和我的父辈》</li>
            <li>《铁道英雄》</li>
        </ul>

        <script type="text/javascript">
            const elemTitle = document.querySelector("h1");
            const elemList = document.querySelector(".movies");
            console.log("h1");
            console.log(elemTitle);
            console.log("ul movies");
            console.log(elemList);
        </script>
    </body>
</html>

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

5、querySelectorAll()

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

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>DOM树结构</title>
    </head>
    <body>
        <h1>2021国庆电影档期</h1>
        <ul class="movies">
            <li>《长津湖》</li>
            <li>《我和我的父辈》</li>
            <li>《铁道英雄》</li>
        </ul>

        <script type="text/javascript">
            const elemTitle = document.querySelector("h1");
            const movieItems = document.querySelectorAll(".movies > li");
            console.log(movieItems);
        </script>
    </body>
</html>

控制台打印的效果如下：

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

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>DOM树结构</title>
    </head>
    <body>
        <h1>2021国庆电影档期</h1>
        <ul class="movies">
            <li>《长津湖》</li>
            <li>《我和我的父辈》</li>
            <li>《铁道英雄》</li>
        </ul>

        <script type="text/javascript">
            const elemTitle = document.querySelector("h1");
            const movieItems = document.querySelectorAll(".movies > li");
            movieItems.forEach((item) => {
                console.log(item);
            });
        </script>
    </body>
</html>

控制台打印的效果如下：

6、添加新元素

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

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>DOM树结构</title>
    </head>
    <body>
        <h1>2021国庆电影档期</h1>
        <ul class="movies" id="movies">
            <li>《长津湖》</li>
            <li>《我和我的父辈》</li>
            <li>《铁道英雄》</li>
        </ul>

        <script type="text/javascript">
            const movieItems = document.getElementById("movies");
            const newMovie = document.createElement("li");
            newMovie.textContent = "《老鹰抓小鸡》";
            movieItems.appendChild(newMovie);
        </script>
    </body>
</html>

运行后，页面效果如下：

7、更改CSS样式

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

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>DOM树结构</title>
    </head>
    <body>
        <h1>2021国庆电影档期</h1>
        <ul class="movies">
            <li>《长津湖》</li>
            <li>《我和我的父辈》</li>
            <li>《铁道英雄》</li>
        </ul>

        <script type="text/javascript">
            const pageTitle = document.querySelector("h1");
            pageTitle.style.fontSize = "24px";
            pageTitle.style.color = "#0000FF";
        </script>
    </body>
</html>

运行后，页面效果如下：

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

8、如何监听事件

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

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>DOM树结构</title>
    </head>
    <body>
        <h1>2021国庆电影档期</h1>
        <ul id="movies">
            <li>《长津湖》</li>
            <li>《我和我的父辈》</li>
            <li>《铁道英雄》</li>
        </ul>
        <button id="addNew">增加电影《老鹰抓小鸡》</button>
        <script type="text/javascript">
            const moviesList = document.getElementById("movies");
            const button = document.getElementById("addNew");
            const addNewMovie = (movieTitle, elemTarget) => {
                const newMovie = 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的文章就介绍到这了,更多相关JavaScript 文档对象模型 DOM内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详细聊聊JavaScript是如何影响DOM树构建的

目录文档对象模型 (DOM) DOM 和 JavaScript DOM 树如何生成解析 HTML 的三个阶段详解 HTML 解析流程 JavaScript 是如何影响 DOM 生成的解析过程中的优化总结文档对象模型 (DOM) 文档对象模型 (DOM) 会将 web 页面与到脚本或编程语言连接起来.DOM模型表示具有逻辑树的文档.树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects).DOM的方法(methods)允许以编程方式进行访问树,从而改变文档的结
javascript中contains是否包含功能实现代码(扩展字符、数组、dom)

一个小误区 JS中的contains 今天想要用JS判断集合中是否包含另一个集合. 发现,Contains并不能达到所要的效果,查找之后发现了问题原来,js的contains方法用来查看dom元素的包含关系,并不是Java中数组的contains方法. 先看一下duyunchao同学分享的代码 $(document).ready(function() { var Arrays = ['11','22','33']; var Array ='11'; if(Arrays.indexOf(Arra
JavaScript DOMContentLoaded事件案例详解

DOMContentLoaded 事件字面上看,它会在dom加载完成后触发. 与window.onload事件非常相似,但有一定区别: DOMContentLoaded 事件是在文档完全加载和解析之后触发: window.onload 事件不但文档完全加载和解析完毕,相关资源都要加载完毕,比如图片和CSS文件等: 下一个问题是什么时候dom加载完毕,这得从浏览器渲染说起,浏览器显示网页的过程可以做如下描述: 1. 请求得到html文档,根据文档请求更多的img,css及其它资源文件: 2.
JavaScript中BOM和DOM详解

目录 BOM(浏览器对象模型) 1. window 获取浏览器c窗口尺寸 2. screen 获取电脑屏幕大小 3. window 开启关闭窗口 4. 浏览器事件 5. location 6. history 7. navigator 获取浏览器相关信息 8. 弹窗 DOM (文档对象模型) DOM 分类 DOM对象 Document文档对象 element文档对象 DOM事件操作鼠标事件键盘事件触屏事件特殊事件表单事件浏览器兼容处理兼容性写法,封装工具 BOM(浏览器对象模型)
JavaScript学习总结(一) ECMAScript、BOM、DOM（核心、浏览器对象模型与文档对象模型）

一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,主要用来给HTML增加动态功能. 几乎所有主流的语言都可以编译为JavaScript,进而能够在所有平台上的浏览器中执行,这也体现了JavaScript的强大性和在Web开发中的重要性.如Blade:一个Visual Studio扩展,可以将C#代码转
Java解析xml文件和json转换的方法(DOM4j解析)

Java解析xml的方法有四种: DOM解析 SAX解析 JDOM解析 DOM4J解析本次主要介绍使用DOM4j进行解析: 这里我主要使用两种方式去解析: xml文件内容 <?xml version="1.0" encoding="utf-8"?> <books> <book id="1"> <name>金苹果</name> <info>锄禾日当午</info>
JavaScript 中的文档对象模型 DOM

目录 1.什么是DOM 2.选择元素 3.getElementById() 4.querySelector() 5.querySelectorAll() 6.添加新元素 7.更改CSS样式 8.如何监听事件 1.什么是DOM DOM 文档对象模型,是 HTML 和 XML 文档的编程接口,用一个逻辑树来表示一个文档,树的每个分支的终点都是一个节点(node),每个节点都包含着对象(objects),允许从文档中创建.更改或删除元素,还可以向这些元素添加事件,使页面更加动态. DOM 将 HTML
JavaScript中MutationObServer监听DOM元素详情

一.基本使用可以通过MutationObserver构造函数实例化,参数是一个回调函数. let observer = new MutationObserver(() => console.log("change")); console.log(observer); observer对象原型链如下: MutationObserver实例: 可以看到有disconnect.observer.takeRecords方法. 1. observer方法监听 observer方法用于关联
在JavaScript中判断整型的N种方法示例介绍

整数类型(Integer)在JavaScript经常会导致一些奇怪的问题.在ECMAScript的规范中,他们只存在于概念中: 所有的数字都是浮点数,并且整数只是没有一组没有小数的数字. 在这篇博客中,我会解释如何去检查某个值是否为整型. ECMAScript 5 在ES5中有很多方法你可以使用.有时侯,你可能想用自己的方法:一个isInteger(x)的函数,如果是整型返回true,否则返回false. 让我们看看一些例子. 通过余数检查你可以使用余数运算(%),将一个数字按1求余,看看余数
浅谈Javascript中的12种DOM节点类型

前言 DOM的作用是将网页转为一个javascript对象,从而可以使用javascript对网页进行各种操作(比如增删内容).浏览器会根据DOM模型,将HTML文档解析成一系列的节点,再由这些节点组成一个树状结构.DOM的最小组成单位叫做节点(node),文档的树形结构(DOM树)由12种类型的节点组成. 属性一般地,节点至少拥有nodeType.nodeName和nodeValue这三个基本属性. 节点类型不同,这三个属性的值也不相同 nodeType nodeType属性返回节点类型的常
简述JavaScript对传统文档对象模型的支持

这是将其在JavaScript语言早期版本中引入的模型.大家都被所有浏览器都支持,但只允许访问文件的某些关键部分,如表单,表单元素和图像. 该模型提供了若干个只读属性,如标题,URL和上次更改提供关于文档整体的信息.除了有由该模型可用于设置和获取文档的属性值提供各种方法. 文档属性在传统DOM: 下面是文档属性,可以使用传统DOM访问列表: 文档方法在传统DOM: 这里是由传统DOM支持的方法列表: 例子: 我们可以找到任何HTML元素,使用HTML DOM任何HTML文档.例如,如果一个网
javascript学习基础笔记之DOM对象操作

DOM文档对象模型是HTML和XML的应用程序接口(API),DOM将整个页面规划成由节点层次构成的文档.DOM对象给予开发者对HTML的访问权限,并且使开发者能将HTML作为XML文档来处理和查看.DOM对象是与语言无关的API,意味着它的实现并不是与javascript绑定,这在于初学者来说可能会理解错误.DOM是针对XML的基于树的API,它关注的不仅仅是解析XML代码,而是用一系列相互关联的对象来表示这些代码,而这些对象可以被修改,而且无需重新解析代码就能直接访问它们.由于DOM的使用上
浅析JavaScript中的事件机制

事件是什么 ? JavaScript与HTML交互是通过在用户或浏览器操纵页面上发生的事件进行处理. 当页面加载,这是一个事件.当用户点击一个按钮,这一下,也就是一个事件.事件的另一个例子是类似按下任意键,关闭窗口,调整窗口等. 开发者可以使用这些事件执行JavaScript编码响应,这引起按钮以关闭视窗,消息,以便显示给用户,要验证的数据,以及几乎任何其它类型的响应可以发生的. 事件是文档对象模型(DOM)第3级,每一个HTML元素的一部分有一套可以触发JavaScript代码事件. 例子:
JavaScript中对DOM节点的访问、创建、修改、删除

DOM DOM就是Document object Model的缩写.文档对象模型是把XML或HTML以树节点为表现形式的文档.用DOM方法和属性,你可以访问,修改,删除页面上任意一个元素,也是可以添加一个元素.DOM是独立于语言的API,可以被任意语言所实现,当然也包括了Javascript 看看下面的一个文本. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/