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

什么是dom？作用是什么

article 2025/9/20 7:41:03

DOM 的定义

DOM（Document Object Model，文档对象模型）是 HTML 和 XML 文档的编程接口。它将文档解析为一个由节点和对象组成的树状结构，允许开发者通过编程方式动态访问和操作文档的内容、结构和样式。

DOM 的作用

DOM 的主要作用是为开发者提供一种与网页内容交互的方式，使得可以通过 JavaScript 等脚本语言动态地修改网页的内容、结构和样式。

通过 DOM，开发者可以访问和修改 HTML 元素、属性和文本内容。例如，可以动态地添加、删除或修改页面中的元素。

DOM 允许开发者处理用户交互事件，如点击、鼠标移动、键盘输入等。通过事件监听器，可以响应用户的操作并执行相应的逻辑。

DOM 提供了对 CSS 样式的访问和修改能力，使得开发者可以动态地改变元素的样式，实现动画效果或响应式设计。

通过 DOM，开发者可以遍历文档树，查找特定的元素或节点，并对其进行操作。这在处理复杂文档结构时非常有用。

DOM 的树状结构

DOM 将文档表示为一个树状结构，每个节点代表文档中的一个部分。例如，HTML 文档中的每个标签、属性和文本内容都对应 DOM 树中的一个节点。

<!DOCTYPE html>
<html>
<head><title>DOM Example</title>
</head>
<body><h1>Hello, World!</h1><p>This is a paragraph.</p>
</body>
</html>

上述 HTML 文档对应的 DOM 树结构如下：

  • Document
    • html
      • head
        • title
          • "DOM Example"
      • body
        • h1
          • "Hello, World!"
        • p
          • "This is a paragraph."

DOM 操作示例

以下是一个简单的 JavaScript 示例，展示了如何使用 DOM 动态修改网页内容：

// 获取 h1 元素
const heading = document.querySelector('h1');// 修改 h1 元素的文本内容
heading.textContent = 'Welcome to the DOM!';// 创建一个新的段落元素
const newParagraph = document.createElement('p');
newParagraph.textContent = 'This is a new paragraph added via JavaScript.';// 将新段落添加到 body 中
document.body.appendChild(newParagraph);

通过 DOM，开发者可以灵活地操作网页内容，实现丰富的交互效果和动态更新。

相关文章：

什么是dom？作用是什么

DOM 的定义 DOM&#xff08;Document Object Model&#xff0c;文档对象模型&#xff09;是 HTML 和 XML 文档的编程接口。它将文档解析为一个由节点和对象组成的树状结构&#xff0c;允许开发者通过编程方式动态访问和操作文档的内容、结构和样式。 DOM 的作用 DOM 的主要作…...

编程日记 2025/7/2 11:02:22

Trae - 国人Cursor的免费平替产品

前情提要&#xff1a;Cursor-零基础使用flutter完成贪吃蛇游戏-迄今为止世上最牛的AI编辑工具&#xff0c;不需要程序员也可以编程 Cursor 不是我的最佳选择 Cursor 是基于 VSCode 进化而来&#xff0c;虽然好用&#xff0c;但总结下来有几点点是我有所顾虑的。 第一&#x…...

编程日记 2025/6/12 22:29:56

自动化：批量文件重命名

自动化&#xff1a;批量文件重命名 1、前言 2、效果图 3、源码 一、前言 今天来分享一款好玩的自动化脚&#xff1a;批量文件重命名 有时候呢&#xff0c;你的文件被下载下来文件名都是乱七八糟毫无规律&#xff0c;但是当时你下载的时候没办法重名或者你又不想另存为重新重…...

编程日记 2025/9/18 23:16:28

Jsoup库和Apache HttpClient库有什么区别？

Jsoup 和 Apache HttpClient 是两个功能不同的库&#xff0c;它们在 Java 开发中被广泛使用&#xff0c;但用途和功能有明显的区别&#xff1a; Jsoup 用途&#xff1a;Jsoup 是一个用于解析 HTML 文档的库。它提供了非常方便的方法来抓取和解析网页内容&#xff0c;提取和操作…...

编程日记 2025/6/21 8:58:45

学习！FastAPI

目录 FastAPI简介快速开始安装FastApiFastAPI CLI自动化文档 Reqeust路径参数Enum 类用于路径参数路径参数和数值校验 查询参数查询参数和字符串校验 请求体多个请求体参数嵌入单个请求体参数 CookieHeader表单文件直接使用请求 ResponseResponse Model多个关联模型 响应状态码…...

编程日记 2025/9/18 21:55:40

Linux 安装 Unreal Engine

需要对在unreal engine官网进行绑定github账号&#xff0c;然后到unreal engine github仓库中进行下载对应的版本&#xff0c;并进行安装unreal engine官网 github地址...

编程日记 2025/9/11 7:46:08

【第三十六周】LoRA 微调方法

LoRA 摘要Abstract文章信息引言方法LoRA的原理LoRA在Transformer中的应用补充其他细节 实验与分析LoRA的使用论文实验结果分析 总结 摘要 本篇博客介绍了LoRA&#xff08;Low-Rank Adaptation&#xff09;&#xff0c;这是一种面向大规模预训练语言模型的参数高效微调方法&…...

编程日记 2025/9/18 21:55:05

什么是 Boosting

什么是 Boosting Boosting 通过按顺序纠正错误并将弱学习器组合成强预测器来提高机器学习性能。机器学习的最新进展引入了解决复杂问题的新方法。Boosting 是一种不断显示出希望的技术。它通过使用多种算法来提高性能&#xff0c;从而改变了我们进行数据建模的方式。随着 Boost…...

编程日记 2025/6/26 1:29:21

Redis 数据类型与操作完全指南

Redis 是一个开源的、内存中的数据结构存储系统&#xff0c;它可以用作数据库、缓存和消息中间件。与传统的关系型数据库不同&#xff0c;Redis 提供了丰富的数据类型和灵活的操作方式&#xff0c;这使得它能够高效地解决各种不同场景下的数据存储和处理问题。本文将全面介绍 R…...

编程日记 2025/9/18 21:54:37

Digi XBee XR 系列介绍

Digi 延续了 20 多年来亚 GHz 射频模块的传统&#xff0c;推出了 Digi XBee XR 系列远距离模块&#xff0c;包括 Digi XBee XR 900 - 已通过多个地区的预先认证 - 以及 Digi XBee XR 868 - 已通过欧洲地区应用的预先认证。 这些先进的射频模块专为远距离抗干扰无线通信而设计。…...

编程日记 2025/9/18 18:54:45

【方法论】金字塔原理概述：写作逻辑的底层架构与实践法则

文章目录 一、为何采用金字塔结构&#xff1a;对抗认知局限的思维框架1、 梳理逻辑&#xff0c;抽象归纳2、自上而下&#xff0c;结论居首3、 结论先行之必要 三、金字塔结构1、纵向逻辑&#xff1a;上层思想必须是下层思想的概括提炼2、横向逻辑&#xff1a;每组思想需属于同一…...

编程日记 2025/9/18 1:48:51

深入探索 OpenCV：从实时视频流到图像处理的实战指南

引言 在当今数字化时代&#xff0c;计算机视觉技术正逐渐成为推动科技发展的核心力量之一。从自动驾驶汽车到智能家居设备&#xff0c;从医疗影像诊断到工业自动化&#xff0c;计算机视觉的应用无处不在。而 OpenCV&#xff08;Open Source Computer Vision Library&#xff0…...

编程日记 2025/9/19 6:20:36

BERT 核心技术全解析：Transformer 双向编码与掩码语言建模的底层逻辑

一、引言&#xff1a;从 BERT 到生成式 AI 的进化之路 科学的突破从来不是孤立的奇迹&#xff0c;而是人类知识长河中无数基石的累积。 当我们惊叹于 ChatGPT、Google Bard 等大型语言模型&#xff08;LLM&#xff09;在生成式 AI 领域的惊人表现时&#xff0c;不能不回溯到 20…...

编程日记 2025/9/18 5:17:25

【OpenCV基础 1】几何变换、形态学处理、阈值分割、区域提取和脱敏处理

目录 一、图像几何变化 1、对图片进行放大、缩小、水平放大和垂直放大 2、旋转、缩放、控制画布大小 二、图像形态学处理 1、梯度运算 2、闭运算 3、礼帽运算 4、黑帽运算 三、图像阈值分割 1、二值化处理 2、反二值化处理 3、截断阈值处理 4、超阈值零处理 5、低…...

编程日记 2025/9/18 11:24:49

CSS- 4.4 固定定位（fixed） 咖啡售卖官网实例

本系列可作为前端学习系列的笔记&#xff0c;代码的运行环境是在HBuilder中&#xff0c;小编会将代码复制下来&#xff0c;大家复制下来就可以练习了&#xff0c;方便大家学习。 HTML系列文章 已经收录在前端专栏&#xff0c;有需要的宝宝们可以点击前端专栏查看&#xff01; 点…...

编程日记 2025/9/5 11:59:07

得力标签打印机系统集成方案的技术应用与场景实践

一、方案背景与技术特性 在物联网设备管理场景中&#xff0c;标签打印的自动化与效率提升成为企业数字化升级的重要需求。得力标签打印机驱动及系统集成方案&#xff0c;通过技术接口开发与硬件协同&#xff0c;为设备标识管理提供 轻量化对接能力。以下从技术适配性与功能设计…...

编程日记 2025/9/5 11:58:07

【通用智能体】Playwright：跨浏览器自动化工具

Playwright&#xff1a;跨浏览器自动化工具 一、Playwright 是什么&#xff1f;二、应用场景及案例场景 1&#xff1a;端到端&#xff08;E2E&#xff09;测试场景 2&#xff1a;UI 自动化&#xff08;表单批量提交&#xff09;场景 3&#xff1a;页面截图与 PDF 生成场景 4&am…...

编程日记 2025/9/5 14:13:18

SmartETL函数式组件的设计与应用

SmartETL框架主要采用了面向对象的设计思想&#xff0c;将ETL过程中的处理逻辑抽象为Loader和Processor&#xff08;对应loader模块和iterator模块&#xff09;&#xff0c;所有流程组件需要继承或实现DataProvider&#xff08;iter方法&#xff09;或JsonIterator&#xff08;…...

编程日记 2025/9/19 6:26:59

精准掌控张力动态，重构卷对卷工艺设计

一、MapleSim Web Handling Library仿真和虚拟调试解决方案 在柔性材料加工领域&#xff0c;卷对卷&#xff08;Roll-to-Roll&#xff09;工艺的效率与质量直接决定了产品竞争力。如何在高动态生产场景中实现张力稳定、减少断裂风险、优化加工速度&#xff0c;是行业长期面临的…...

编程日记 2025/9/17 20:51:58

LlamaIndex中应用自定义提示词提升回答质量

在 LlamaIndex 中，get_response_synthesizer 允许你自定义生成回答的方式，包括传入自定义提示词（prompt）。可以通过 response_mode 和 text_qa_template 等参数来控制回答的生逻辑。在 LlamaIndex 中优化提示词（Prompt Template）可以显著提升回答质量。 一、使用自定义提…...

编程日记 2025/7/16 17:45:16

永磁同步电机公式总结【一】——反电动势、磁链、转矩公式；三项、两项电压方程；坐标表换方程

一、PMSM 电机参数介绍 1.1 转子极数 转子极数 (Rotor Poles) &#xff1a;三相交流电机每组线圈都会产生 N、S 磁极&#xff0c;每个电机每相含有的永磁体磁极个数就是极数。由于磁极是成对出现的&#xff0c;所以电机有 2、4、6、8……极 (偶数)。 未知参数的电机&#xff…...

编程日记 2025/9/19 12:11:26

STL - stack 和 queue 及容器适配器模式的介绍

文章目录 1. stack 的介绍和使用1.1 stack 的介绍1.2 stack 的接口及使用1.3 stack 的模拟实现 2. queue 的介绍和使用2.1 queue 的介绍2.2 queue 的接口及使用2.3 queue 的模拟实现 3. priority_queue的介绍和使用3.1 priority_queue 的介绍3.2 priority_queue 的接口及使用3.…...

编程日记 2025/9/18 8:07:11

windows 安装gdal实现png转tif，以及栅格拼接

windows 安装gdal实现png转tif&#xff0c;以及栅格拼接 一、安装gdal 网上有很多安装gdal的方法&#xff0c;此处通过osgeo4w安装gdal 1.下载osgeo4w 下载地址 https://trac.osgeo.org/osgeo4w/ 2、安装osgeo4w exe文件安装&#xff0c;前面部分很简单&#xff0c;就不再…...

编程日记 2025/9/5 14:15:48

量子计算在金融科技中的应用前景

随着量子计算技术的飞速发展&#xff0c;其在各行业的应用潜力逐渐显现&#xff0c;金融科技领域更是备受关注。量子计算的强大计算能力有望为金融行业带来前所未有的变革&#xff0c;从风险评估到投资组合优化&#xff0c;从高频交易到加密技术&#xff0c;量子计算都可能成为…...

编程日记 2025/9/19 14:30:31

OpenAI Chat API 详解：打造智能对话应用的基石

目录 OpenAI Chat API 详解&#xff1a;打造智能对话应用的基石参数概览核心参数详解与实战1. model: 选择你的 AI 大脑2. prompt: 指引 AI 的灵魂3. max_tokens: 控制输出的长度4. temperature 和 top_p: 调控创造力5. stop: 控制生成的结束6. presence_penalty 和 frequency_…...

编程日记 2025/9/17 20:01:08

JavaScript性能优化实战（12）：大型应用性能优化实战案例

在前面的系列文章中，我们探讨了各种JavaScript性能优化技术和策略。本篇将聚焦于实际的大型应用场景，通过真实案例展示如何综合运用这些技术，解决复杂应用中的性能挑战。 目录 电商平台首屏加载优化全流程复杂数据可视化应用性能优化案例在线协作工具的实时响应优化移动端W…...

编程日记 2025/9/18 11:52:57

Socket.IO是什么？适用哪些场景？

Socket.IO 详细介绍及适用场景 一、Socket.IO 是什么&#xff1f; Socket.IO 是一个基于事件驱动的 实时通信库&#xff0c;支持双向、低延迟的客户端-服务器交互。它底层结合了 WebSocket 和 HTTP 长轮询 等技术&#xff0c;能够在不同网络环境下自动选择最优传输方式&#x…...

编程日记 2025/9/11 22:50:52

深度学习入门：卷积神经网络

目录 1、整体结构2、卷积层2.1 全连接层存在的问题2.2 卷积运算2.3 填充2.4 步幅2.5 3维数据的卷积运算2.6 结合方块思考2.7 批处理 3、池化层4、卷积层和池化层的实现4.1 4维数组4.2 基于im2col的展开4.3 卷积层的实现4.4 池化层的实现 5、CNN的实现6、CNN的可视化6.1 第一层权…...

编程日记 2025/9/18 0:07:41

【Odoo】Pycharm导入运行Odoo15

【Odoo】Pycharm导入运行Odoo15 前置准备1. Odoo-15项目下载解压2. PsrtgreSQL数据库 项目导入运行1. 项目导入2. 设置项目内虚拟环境3. 下载项目中依赖4. 修改配置文件odoo.conf 运行Pycharm快捷运行 前置准备 1. Odoo-15项目下载解压 将下载好的项目解压到开发目录下 2. …...

编程日记 2025/9/7 2:01:29

pytest框架 - 第二集 allure报告

一、断言assert 二、Pytest 结合 allure-pytest 插件生成美观的 Allure 报告 (1) 安装 allure 环境 安装 allure-pytest 插件&#xff1a;pip install allure-pytest在 github 下载 allure 报告文件 地址&#xff1a;Releases allure-framework/allure2 GitHub下载&#x…...

编程日记 2025/9/9 7:15:41