什么是DOM?(详解)

什么是DOM?

  • DOM的定义
  • 知识回顾
  • 什么是D?
  • 什么是O?
  • 什么是M?
  • 什么是DOM树?
    • 根节点对象与节点对象
  • DOM树简单举例
  • DOM的主要用途

DOM的定义

DOM(Document Object Model,文档对象模型)

W3C对DOM的定义是:

一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态地对文档的内容、结构和样式进行访问和修改。

知识回顾


HTML是网页内容的结构基础,它定义了网页中的元素和内容的布局。HTML元素(如<div><p><a>等)通过标签来标识,并且可以有属性来提供额外的信息。


CSS则负责控制网页的样式和表现,包括颜色、字体、布局等。CSS可以通过内联样式、内部样式表或外部样式表的方式与HTML关联。外部样式表是最常用的方式,通过<link>元素在HTML文档的<head>部分引入CSS文件。


当HTML文档被浏览器加载时,浏览器会解析HTML元素,并根据CSS规则来应用样式。这种交互是自动的,不需要额外的编程接口。例如,HTML元素中的class或id属性可以被CSS选择器用来应用特定的样式规则。


在实际开发中,JavaScript通常也会与HTML和CSS(CSS为间接)进行交互。但是JavaScript需要通过DOM API来访问和修改HTML元素,同时也可以动态地改变CSS样式。这种交互使得网页可以实现动态效果和交互功能。

所以,我们可以简单理解成DOM是JavaScript与HTML和CSS(CSS为间接)交互的一种工具

什么是D?

Document (文档)


这一点很容易明白,在编写一个网页时,我们都离不开HTML、CSS、JavaScript这三者,无论是把它们三者分开写通过文件引用的方式,还是直接把这三者一起写在一个文件里,它们最终网页加载时,都会形成一个整体。

所以我们写的这三种语言组成的代码就是Document,代码即是文档内容。

什么是O?

Object(对象)


在面向对象编程的概念中,对象是一组独立数据的集合。

JS里面的对象模型有很多种,但核心模型一般认为有三种:

内置对象(Built-in Objects):这些是JavaScript语言自带的对象,开发者可以直接使用。例如:
Math:提供数学相关的方法和常量。
Date:用于处理日期和时间。
Array:用于处理数组。
String:用于处理字符串。
Number:用于处理数字。
Boolean:用于处理布尔值(true 或 false)。
RegExp:用于处理正则表达式。
JSON:用于处理JSON数据。
等等。

宿主对象(Host Objects):这些对象是由JavaScript的运行环境(例如Web浏览器)提供的。它们提供了与浏览器或宿主环境交互的能力。例如:
window:在浏览器环境中,window 对象代表了浏览器窗口或全局作用域。
document:在浏览器环境中,document 对象代表了加载在窗口中的HTML文档。
navigator:提供了关于浏览器的信息。
location:提供了关于当前URL的信息。
screen:提供了关于用户屏幕的信息。
等等。

用户自定义对象(User-Defined Objects):这些是开发者自己创建的对象。可以使用对象字面量语法、构造函数或class关键字来创建自定义对象。

所以这里的对象的含义我们将注意力放document即可,document对象是JS与HTML和CSS进行交互的载体。

什么是M?

Model(模型)


在前面,我们说过DOM是一种API,那么API往往都会有着比较严谨的一套标准,经过这套标准梳理后,便会形成一个模型。

DOM的标准由W3C(World Wide Web Consortium,万维网联盟)制定DOM标准规定了如何表示文档的结构、如何访问和修改文档的内容、事件处理等方面的内容。

既然都说到模型了,那么DOM树肯定是我们必须要理解的概念了。

什么是DOM树?

当浏览器加载一个网页时,它会将网页中的HTML内容解析成一个树形结构,这个结构就被称为DOM树。DOM树中的每个节点都对应着网页中的一个元素、属性或文本内容。

“树”这个概念在数据结构的概念中已经是老生常谈了。

根节点对象与节点对象


根节点对象:当浏览器窗口扫描到一个.html文件时,会先在内存中自动创建一个document对象,作为整个DOM树的树根。网页中所有的HTML内容,都会成为这个document树根对象的子节点或后代节点。

注意哈,一个HTML文档一般只对应一个document对象,所以说根节点对象就是document对象本身,但DOM节点对象不是document对象。

节点对象:浏览器窗口开始扫描网页内容,每扫描到一项内容,都会在DOM树上对应位置创建一个对象,保存这项扫描到的内容的属性值或其他细节。


## 节点类型

DOM树有着多种类型的的节点,但是我们自己画DOM树时通常是以元素节点为主去画的,不会去涉及太多细节。

元素节点(Element):对应网页的HTML标签元素,是DOM树的主要节点。元素节点有三个主要的node属性:nodeType(值为1)、nodeName(元素的大写标签名)和nodeValue(值为null)。元素可以有任意多个子节点和后代节点,也可以是其它元素的子节点。

属性节点(Attribute):对应网页中HTML标签的属性,只存在于元素的attributes属性中,并不是DOM文档树的一部分。属性节点的nodeType值是2,nodeName值是属性名,nodeValue值是属性值。

文本节点(Text):代表网页中的HTML标签内容。文本节点的nodeType值是3,nodeName值是’#text’,nodeValue值是标签内容值。

注释节点(Comment):在HTML代码中,注释是用来为代码添加说明的,不会被浏览器执行或显示。在DOM中,注释也是一个节点,nodeType值为8。

文档节点(Document):每个文档的根节点,代表了整个文档。在HTML中,<html>元素就是文档节点的子节点,也被称为文档元素。文档元素是文档的最外层元素,每个文档只能有一个文档元素。

DOM树简单举例

我们来写一个简单HTML文档

<!DOCTYPE html>  
<html>  
<head>  
  <title>不知道咋取标题</title>  
</head>  
<body>  
  <h1>这是一个网页</h1>  
  <p>DOM树的小Demo</p>  
  <ul>  
    <li>列表项 1</li>  
    <li>列表项 2</li>  
    <li>列表项 3</li>  
  </ul>  
</body>  
</html>

在这里插入图片描述
这里的DOM树为了画面简洁,只展示了元素节点构成的DOM树,忽略了文本节点等内容。

在这里插入图片描述

DOM的主要用途

DOM的主要用途有以下几种:

动态内容更新:通过JavaScript和DOM,开发者可以动态地创建、修改或删除HTML元素和内容。这对于实现交互式的网页应用非常关键,比如用户表单的提交、动态加载数据、实时更新页面元素等。

事件处理:DOM允许开发者为HTML元素添加事件监听器,从而响应用户的交互行为,如点击、键盘输入、鼠标移动等。这是创建交互式网页的重要组成部分。

样式操作:虽然DOM不直接处理CSS,但可以通过JavaScript来读取和修改元素的样式属性,包括内联样式和通过CSS类应用的样式。这使得开发者可以动态地改变网页的布局和外观。

文档导航和选择:DOM提供了遍历和操作文档结构的API,允许开发者通过节点和元素之间的关系来定位和选择特定的HTML元素。这对于复杂文档的操作和查询非常有用。

跨平台兼容性:由于DOM是一个标准化的接口,因此它使得开发者能够编写兼容多种浏览器和平台的代码。这促进了网页的互操作性和可访问性。

与AJAX等其他技术的集成:DOM经常与AJAX(Asynchronous JavaScript and XML)等技术一起使用,以实现无需重新加载整个页面就能更新部分内容的功能。这大大提高了网页的性能和用户体验。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/411563.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

MySQL 8自动备份脚本密码安全警告

作者&#xff1a;田逸&#xff08;formyz&#xff09; 目标需求 接到一个任务&#xff0c;需要在凌晨四点对一个数据库进行备份&#xff0c;不是进行全库备份&#xff0c;而是只对制定的数据库进行逐一导出&#xff0c;并生成以库为关键字的“.sql”文件。数据库的版本为MySQL …

宝塔面板mysql使用root账户远程登录

今日在弄数据库备份&#xff0c;我们两台服务器&#xff0c;一台测试环境一个正式环境&#xff1b;使用linux宝塔面板&#xff0c;数据库都是服务器本地mysql&#xff0c;打算在测试服务器添加远程数据库备份正式环境的数据库&#xff0c;需要注意的是添加远程服务器后必须点一…

Linux编程 1.3 系统文件IO- 内核表示

文件IO内核表示 1、内核中的三种数据结构 1.1文件描述符表 文件描述符标志 文件表项指针1.2 文件表项 文件状态标志 读、写、追加、同步和非阻塞等状态标志 当前文件偏移量 i节点表项指针 引用计数器1.3 节点 文件类型和对该文件的操作函数指针 当前文件长度 文件所有者 文…

外汇天眼:投资者关注!Cboe与MSCI发布多样化指数期权和波动率指数

芝加哥期权交易所全球市场&#xff08;Cboe Global Markets&#xff09;与摩根士丹利资本国际&#xff08;MSCI&#xff09;合作推出新的指数期权和波动率指数 芝加哥期权交易所全球市场&#xff08;Cboe Global Markets, Inc.&#xff09;今天宣布与MSCI Inc.&#xff08;MSC…

Python性能测试框架Locust实战教程

01、认识Locust Locust是一个比较容易上手的分布式用户负载测试工具。它旨在对网站&#xff08;或其他系统&#xff09;进行负载测试&#xff0c;并确定系统可以处理多少个并发用户&#xff0c;Locust 在英文中是 蝗虫 的意思&#xff1a;作者的想法是在测试期间&#xff0c;放…

【生成式AI】ChatGPT原理解析(1/3)- 对ChatGPT的常见误解

Hung-yi Lee 课件整理 文章目录 误解1误解2ChatGPT真正在做的事情-文字接龙 ChatGPT是在2022年12月7日上线的。 当时试用的感觉十分震撼。 误解1 我们想让chatGPT讲个笑话&#xff0c;可能会以为它是在一个笑话的集合里面随机地找一个笑话出来。 我们做一个测试就知道不是这样…

【论文笔记之 YIN】YIN, a fundamental frequency estimator for speech and music

本文对 Alain de Cheveigne 等人于 2002 年在 The Journal of the Acoustical Society of America 上发表的论文进行简单地翻译。如有表述不当之处欢迎批评指正。欢迎任何形式的转载&#xff0c;但请务必注明出处。 论文链接&#xff1a;http://audition.ens.fr/adc/pdf/2002_…

[C++]18:set和map的使用

set和map的使用 一.关联式容器&#xff1a;1.简单概念&#xff1a;2.<key , value>--->键值对3.set和map的底层结构&#xff08;平衡搜索树或者红黑树&#xff09; 二.set1.set (排序不重复)1.模板参数&#xff1a;2.set是一个有序存储的容器&#xff1a;3.set中每个数…

iconfont的组件化使用方法(SVG)

目录 一、需求描述二、操作步骤1.在iconfont中选择项目需要使用的图标2.在项目中创建iconfont.js3.创建svgIcon组件 一、需求描述 将iconfont图标库选择的图标以SVG的形式引入项目并通过组件化的形式在项目中引用可控制图标的大小和颜色 二、操作步骤 1.在iconfont中选择项目…

H264/H265基本编码参数1

本文主要讲解一些视频编码相关的基本概念 像素 像素是图像的基本单元&#xff0c;一个个像素就组成了图像。你可以认为像素就是图像中的一个点。我们来直观地看看像素是怎么组成图像的。在下面这张图中&#xff0c;你可以看到一个个方块&#xff0c;这些方块就是像素。 分辨…

猫头虎分享已解决Bug || TypeError: Object(...) is not a function (React Hooks)

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

vue3 使用qrcodejs2-fix生成二维码并可下载保存

直接上代码 <el-button click‘setEwm’>打开弹框二维码</el-button><el-dialog v-model"centerDialogVisible" align-center ><div class"code"><div class"content" id"qrCodeUrl" ref"qrCodeUrl&q…

C++ //练习 9.18 编写程序,从标准输入中读取string序列,存入一个deque中。编写一个循环,用迭代器打印deque中的元素。

C Primer&#xff08;第5版&#xff09; 练习 9.18 练习 9.18 编写程序&#xff0c;从标准输入中读取string序列&#xff0c;存入一个deque中。编写一个循环&#xff0c;用迭代器打印deque中的元素。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&am…

成都直播基地产业合规指南 共促直播行业和谐发展

随着互联网技术的不断发展&#xff0c;直播行业正迅速崛起&#xff0c;成为当今社会最具有影响力和商业价值的行业之一。而作为直播行业中的重要组成部分&#xff0c;各大互联网机构在推动直播产业发展的过程中扮演着至关重要的角色。天府锋巢直播产业基地作为成都规模最大的直…

微服务篇之任务调度

一、xxl-job的作用 1. 解决集群任务的重复执行问题。 2. cron表达式定义灵活。 3. 定时任务失败了&#xff0c;重试和统计。 4. 任务量大&#xff0c;分片执行。 二、xxl-job路由策略 1. FIRST&#xff08;第一个&#xff09;&#xff1a;固定选择第一个机器。 2. LAST&#x…

FreeRTOS 的队列基础API函数的使用

参考教程来源 //* 实验平台:启明欣欣 STM32F407应用开发板(高配版) 参考正点原子 #include "freertos_demo.h" #include "./SYSTEM/usart/usart.h" #include "led.h" #include "lcd.h" #include "key.h"/*FreeRTOS*********…

C++类和对象篇

1.类的定义 在C语言结构体中&#xff0c;只能定义变量&#xff0c;C扩展了类的概念&#xff0c;能够在类定义函数&#xff1b;同时&#xff0c;struct仍然可以使用&#xff0c;但更常用class来表示类 1.1类中函数的两种定义方式 函数的声明和定义都在类中 class Date { public:…

Pytorch训练RCAN QAT超分模型

Pytorch训练RCAN QAT超分模型 版本信息测试步骤准备数据集创建容器生成文件列表创建文件列表的代码执行脚本,生成文件列表训练RCAN模型准备工作修改开源代码编写训练代码执行训练脚本可视化本文以RCAN超分模型为例,演示了QAT的训练过程,步骤如下: 先训练FP32模型再加载FP32训练…

Qt QWidget 简约美观的加载动画 第二季

&#x1f603; 第二季来啦 &#x1f603; 简约的加载动画,用于网络查询等耗时操作时给用户的提示. 这是最终效果: 一共只有三个文件,可以直接编译运行 //main.cpp #include "LoadingAnimWidget.h" #include <QApplication> #include <QVBoxLayout> #i…

LeetCode704. 二分查找(C++)

LeetCode704. 二分查找 题目链接代码 题目链接 https://leetcode.cn/problems/binary-search/description/ 代码 class Solution { public:int search(vector<int>& nums, int target) {int left 0;int right nums.size() - 1;while(left < right){int midd…