当前位置： 首页 > news >正文

什么是DOM？(JavaScript DOM是什么？)

news 2026/4/1 14:12:03

1、DOM简洁

DOM是js中最重要的一部分，没有DOM就不会通过js实现和用户之间的交互。
window是最大的浏览器对象，在它的下面还有很多子对象，我们要学习的DOM就是window对象下面的document对象
DOM（Document Object Model）是由W3C指定的用于访问诸如XML和HTML等结构化文档的标准

W3C DOM标准被分为三个不同的部分：

  • 核心DOM：针对任何结构化文档的标准模型
  • XML DOM：针对XML文档的标准模型
  • HTML DOM：针对HTML文档的标准模型

    DOM的设计是以对象管理组织（OMG）的规约为基础的，可以用于任何编程语言，DOM以基于对象的方式来描述整个文档，让我们可以很方便的操作整个文档，包括：文档内容的添加、修改、隐藏、显示，对HTML央视的添加和替换等。
// 例子
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<button onclick="createImg()">点击生成图片</button>
<script>function createImg(){var img = document.createElement('img'); // 创建图片标签img.src = 'https://www.zhishunet.com/static/zhishuindex/picture/weixin.jpg'; // 设置src属性// 显示到页面上document.getElementsByTagName('body')[0].appendChild(img);}
</script>
</script>
</body>
</html>

2、DOM中的D是什么

DOM中的D指的是document（文档），在我们进行的web开发中指的就是HTML文档。我们向服务器请求页面，服务器返回的就是一个HTML文档，在浏览器收到HTML文档后会把这个文档处理成一个document对象，然后显示在浏览器中，如果其中有js代码则会被一一顺序执行显示出相应的动态效果

3、DOM中的O是什么

DOM中的O指的是object对象,服务器返回HTML文档之后欧浏览器会把HTML文档解析成DOMN对象，放入到内存中，再从内存中取出这个document对象显示在浏览器中。
正是由于浏览器把服务器返回的HTML文档转换成document对象并存储与内存中，js才可以操作这些标签元素，呈现出不同的动态效果。

4、DOM中的M是什么

DOM中的M指的是Model，就是模型的意思，就是浏览器在把HTML文档处理成document对象时所使用的组织形式，也可以说documeng对象是一种表现形式。
DOM在组织HTML文档的时候以树状形式实现的。在收到服务器返回的HTML文档之后，DOM会把这个HTML文档以家谱树的形式组织起来并存储到内存中，在显示到浏览器中供用户查看。
家谱树本身就是一种模型，==使用父(parent)、子(child)、兄弟(sibling)==等记号表示之间的关系，最大的优点就是可以把复杂的方式简单化

像这样大家一看就明白<html>标签是树的根，代表整个HTML文档，在它下面<head>和<body>标签是并列的兄弟关系,在<head>标签中有<meta>和<title>标签。像这样再复杂的文档也能一层层的表示出来，而且标签元素所在的位置也非常容易描述，这就是树状结构模型所带来的好处。

相关文章：

什么是DOM？(JavaScript DOM是什么？)

1、DOM简洁 DOM是js中最重要的一部分&#xff0c;没有DOM就不会通过js实现和用户之间的交互。 window是最大的浏览器对象&#xff0c;在它的下面还有很多子对象&#xff0c;我们要学习的DOM就是window对象下面的document对象 DOM&#xff08;Document Object Model&#xff09…...

编程日记 2024/1/23 5:16:30

UIElement编辑器扩展 组件 Inspector

UIElement编辑器扩展 组件 Inspector https://docs.unity.cn/cn/2021.3/Manual/UIE-create-a-binding-uxml-inspector.html 简单开始 声明序列化VisualTreeAsset [SerializeField] VisualTreeAsset visualTree; 声明完&#xff0c;直接在脚本的Inspector面板&#xff0c;把你…...

编程日记 2024/1/23 5:14:28

Flask 3.x log全域配置(包含pytest)

最近使用到flask3.x&#xff0c;配置了全域的log&#xff0c;这边记录下 首先需要创建logging的配置文件&#xff0c;我是放在项目根目录的&#xff0c; Logging 配置 logging.json {"version": 1, # 配置文件版本号"formatters": {"default&qu…...

编程日记 2024/1/23 5:13:26

枚举算法（穷举法）（暴力法）

1.什么是枚举 枚举是指在一定范围内将所有情况一一列举&#xff0c;再通过条件判断得到自己想要的答案&#xff1b; 2.枚举核心 3.使用枚举的基本步骤 4.例题 4.1.我国古代数学家张丘建在他的《算经》一书中提出了著名的“百钱买百鸡”问题:鸡翁一值钱五;鸡母一值钱三;鸡雏三…...

编程日记 2024/1/23 5:12:25

计算机网络学习The next day

在计算机网络first day中&#xff0c;我们了解了计算机网络这个科目要学习什么&#xff0c;因特网的概述&#xff0c;三种信息交换方式等&#xff0c;在今天&#xff0c;我们就来一起学习一下计算机网络的定义和分类&#xff0c;以及计算机网络中常见的几个性能指标。 废话不多…...

编程日记 2024/1/23 5:11:24

ffmpeg中AVFrame解码linesize确定

一 测试环境 机型&#xff1a;Intel(R) Xeon(R) Gold 5218 ffmpeg版本4.3-dev 解码视频分辨率 720x1280 , 解码后 AVFrame linesize 768 解码视频分辨率 480x640, 解码后AVFrame linesize 512 二 linesize计算过程 avcodec_default_get_buffer2 -->update_frame_pool() --&g…...

编程日记 2024/1/23 5:07:21

数据可视化 | 期末复习 | 补档

文章目录 &#x1f4da;介绍可视化&#x1f407;什么是可视化&#x1f407;科学可视化&#xff0c;信息可视化&#xff0c;可视分析系统三者之间有什么区别&#x1f525;&#x1f407;可视化的基本流程&#x1f407;可视化的两个基本设计原则&#x1f407;数据属性&#x1f407…...

编程日记 2024/1/23 5:04:18

【Docker】使用Docker安装Nginx及部署前后端分离项目应用

一、Nginx介绍 Nginx是一个高性能的HTTP和反向代理web服务器&#xff0c;同时也提供了IMAP/POP3/SMTP服务。它是由伊戈尔赛索耶夫为俄罗斯访问量第二的Rambler.ru站点开发的&#xff0c;公开版本1.19.6发布于2020年12月15日。其将源代码以类BSD许可证的形式发布&#xff0c;因它…...

编程日记 2024/1/23 5:01:15

28、web攻防——通用漏洞SQL注入HTTP头XFFCOOKIEPOST请求

文章目录 $_GET&#xff1a;接收get请求&#xff0c;传输少量数据&#xff0c;URL是有长度限制的&#xff1b; $_POST&#xff1a;接收post请求&#xff1b; $_COOKIE&#xff1a;接收cookie&#xff0c;用于身份验证&#xff1b; $_REQUEST&#xff1a;收集通过 GET 、POST和C…...

编程日记 2024/1/23 5:00:14

c++：类和对象（1），封装

C面向对象的三大特性&#xff1a;封装、继承、多态。 封装 封装的意义一&#xff1a; 将属性和行为作为一个整体&#xff0c;表现生活中的事物将属性和行为加以权限控制 类中的属性和行为&#xff0c;我们统一称为成员 属性也叫&#xff1a; 成员属性 成员变量 行为也叫&a…...

编程日记 2024/1/23 4:59:13

三、安全工程—安全架构（CISSP）

目录 一、安全工程 1.企业安全架构与系统安全架构 2.通用企业架构框架 2.1 Zachman框架...

编程日记 2024/1/23 4:56:11

Linux：shell脚本：基础使用（9）《数组》

数组就是一组数据类型相同集合 定义 数组名(元素内容…………) 如果没有元素内容就是空 arr1() # 定义了一个空数组 arr2(1 2 3 4 5 6 ) # 定义了一个元素是整形的数组 arr3("hello" "world" "你好" "世界") # 定义了一个元素为字符…...

编程日记 2024/1/23 4:53:07

TCP高并发服务器简介（select、poll、epoll实现与区别）

select、poll、epoll三者的实现&#xff1a; select实现TCP高并发服务器的流程&#xff1a; 一、创建套接字&#xff08;socket函数&#xff09;&#xff1a;二、填充服务器的网络信息结构体&#xff1a;三、套接字和服务器的网络信息结构体进行绑定&#xff08;bind函数&…...

编程日记 2024/1/23 4:50:03

Linux中的软件包管理器yum

目录 1.什么是软件包 2.关于 rzsz 3.查看软件包 4.如何安装软件 5.如何卸载软件 1.什么是软件包 ● 在Linux下安装软件, 一个通常的办法是下载到程序的源代码, 并进行编译, 得到可执行程序. ● 但是这样太麻烦了, 于是有些人把一些常用的软件提前编译好, 做成软件包(可以理…...

编程日记 2024/1/23 4:47:01

如何使用支付宝沙箱环境本地配置模拟支付并结合内网穿透远程调试

文章目录 前言1. 下载当面付demo2. 修改配置文件3. 打包成web服务4. 局域网测试5. 内网穿透6. 测试公网访问7. 配置二级子域名8. 测试使用固定二级子域名访问 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的 人工智能学习网站&#xff0c; 通俗易懂&#xff…...

编程日记 2024/1/23 4:43:57

解决子元素的click事件会触发父元素的dbclick事件

解决子元素的click事件会触发父元素的dbclick事件 方案一&#xff1a;方案二&#xff1a;方案三&#xff1a;方案一方案二综合案例如下&#xff1a; 方案一&#xff1a; 错误思路&#xff1a;通过阻止子元素click事件的冒泡&#xff0c;阻止父元素的dbclick 正确思路&#xff…...

编程日记 2024/1/23 4:42:55

算法训练营Day38（动态规划1）

动态规划理论基础 动态规划&#xff0c;英文&#xff1a;Dynamic Programming&#xff0c;简称DP&#xff0c;如果某一问题有很多重叠子问题&#xff0c;使用动态规划是最有效的。 区别 动态规划中每一个状态一定是由上一个状态推导出来的&#xff0c;这一点就区分于贪心&…...

编程日记 2024/1/23 4:41:55

基于Harris角点的多视角图像全景拼接算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1 Harris角点检测 4.2 图像配准 4.3 图像变换和拼接 4.4 全景图像优化 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 function [ImageB…...

编程日记 2024/1/23 4:38:52

数学建模--PageRank算法的Python实现

文章目录 1. P a g e R a n k PageRank PageRank算法背景2. P a g e R a n k PageRank PageRank算法基础2.1. P a g e R a n k PageRank PageRank问题描述2.2.有向图模型2.3.随机游走模型 3. P a g e R a n k PageRank PageRank算法定义3.1. P a g e R a n k PageRank PageRank…...

编程日记 2024/1/23 4:36:49

samba服务搭建，并将共享目录映射到windows

系统版本&#xff1a;centos7 1、centos 安装samba yum -y install samba 2、查看安装信息 rpm -qa |grep samba 3、设置开机自启动 systemctl enable smb.service systemctl enable nmb.service 4、设置samba服务器配置文件 sudo vi /etc/samba/smb.conf 注意&#…...

编程日记 2024/1/23 4:33:46

UE4实战：利用VaRest与VictoryBPLibrary实现高效本地文件读写

1. 为什么需要本地文件读写 在虚幻引擎4开发过程中&#xff0c;我们经常需要保存游戏配置、玩家进度或者关卡数据。想象一下你正在开发一个RPG游戏&#xff0c;需要记录玩家背包里的所有物品、当前任务进度和角色属性。如果每次退出游戏这些数据都消失&#xff0c;玩家肯定会抓…...

编程新知 2026/4/1 13:55:36

从‘带不动’到‘跑满帧’：游戏玩家必懂的显示器带宽与接口选择避坑指南

从‘带不动’到‘跑满帧’&#xff1a;游戏玩家必懂的显示器带宽与接口选择避坑指南 刚入手一台2K 170Hz电竞显示器&#xff0c;却发现刷新率死活上不去&#xff1f;画面时不时出现撕裂或闪烁&#xff1f;别急着怀疑显卡性能&#xff0c;问题可能出在那根被你忽视的连接线上。…...

编程新知 2026/4/1 13:08:43

从零开始：roLabelImg安装与OBB旋转框标注实战指南

1. 为什么需要roLabelImg和旋转框标注 在计算机视觉项目中&#xff0c;我们经常需要标注图像中的目标物体。对于常规的矩形框标注&#xff0c;LabelImg这类工具已经足够好用。但遇到倾斜物体时&#xff0c;比如遥感图像中的飞机、自然场景中的交通标志、医学图像中的器官&#…...

编程新知 2026/4/1 10:18:44

Hotkey Detective：3步快速解决Windows热键冲突，找出占用快捷键的幕后黑手

Hotkey Detective&#xff1a;3步快速解决Windows热键冲突&#xff0c;找出占用快捷键的幕后黑手 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/h…...

编程新知 2026/4/1 9:56:27

C语言调用Omni-Vision Sanctuary轻量级推理接口（C API）教程

C语言调用Omni-Vision Sanctuary轻量级推理接口&#xff08;C API&#xff09;教程 1. 引言&#xff1a;为什么选择C API&#xff1f; 在嵌入式设备和资源受限的环境中&#xff0c;Python运行时往往显得过于臃肿。Omni-Vision Sanctuary提供的C语言接口&#xff08;C API&…...

编程新知 2026/4/1 6:46:00

SAP移动类型全解析：从收货到移库，一文搞懂库存管理核心配置

SAP移动类型实战指南&#xff1a;解锁库存管理的核心密码 当你第一次在SAP系统中执行货物移动时&#xff0c;面对上百种移动类型代码&#xff0c;是否感到无从下手&#xff1f;作为全球500强企业广泛采用的ERP系统&#xff0c;SAP的库存管理模块以其严谨性和灵活性著称&#xf…...

编程新知 2026/4/1 6:23:35

GAN训练过程可视化神器对比：GAN Lab和TensorFlow Playground到底怎么选？

GAN训练可视化工具深度评测&#xff1a;从交互设计到教学效果的全面对比 当开发者第一次接触生成对抗网络&#xff08;GAN&#xff09;时&#xff0c;往往会被其复杂的对抗训练机制所困扰。传统的静态图表和数学公式很难直观展示生成器与判别器之间微妙的博弈过程。这正是可视化…...

编程新知 2026/4/1 6:19:31

DASD-4B-Thinking应用场景：科研人员用Chainlit调用长链思维模型写论文推导

DASD-4B-Thinking应用场景&#xff1a;科研人员用Chainlit调用长链思维模型写论文推导 安全声明&#xff1a;本文仅讨论技术实现与应用&#xff0c;所有内容均符合技术交流规范&#xff0c;不涉及任何敏感或违规内容。 1. 科研写作的新助手&#xff1a;当AI遇到学术研究 作为一…...

编程新知 2026/4/1 5:55:10

PyTorch 2.8镜像部署教程：RTX 4090D配置htop实时监控GPU/CPU/内存使用

PyTorch 2.8镜像部署教程&#xff1a;RTX 4090D配置htop实时监控GPU/CPU/内存使用 1. 环境准备与快速部署 在开始之前&#xff0c;请确保您的硬件配置满足以下要求&#xff1a; 显卡&#xff1a;RTX 4090D 24GB显存内存&#xff1a;120GB及以上存储&#xff1a;系统盘50GB …...

编程新知 2026/4/1 5:29:00

Ubuntu22.04微信依赖冲突的终极解决方案

1. 问题现象与原因分析 最近在Ubuntu 22.04上安装微信时&#xff0c;很多朋友都遇到了依赖冲突的问题。具体表现是当你尝试通过命令行安装微信时&#xff0c;系统会提示类似这样的错误信息&#xff1a; 下列软件包有未满足的依赖关系&#xff1a; libldap-2.4-2 : 依赖: libsas…...

编程新知 2026/4/1 5:26:59