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

DOM（文档对象模型）深度解析

article 2025/6/10 0:42:35

DOM（文档对象模型）深度解析

DOM 是 HTML/XML 文档的树形结构表示，提供了一套让 JavaScript 动态操作网页内容、结构和样式的接口。

一、DOM 核心概念

1. 节点（Node）类型
类型值说明示例
ELEMENT_NODE1元素节点<div>, <p>
TEXT_NODE3文本节点元素内的文字
COMMENT_NODE8注释节点<!-- comment -->
DOCUMENT_NODE9文档根节点document
DOCUMENT_TYPE_NODE10文档类型声明节点<!DOCTYPE html>
2. DOM 树结构
<!DOCTYPE html>
<html><head><title>DOM示例</title></head><body><!-- 主内容 --><h1>标题</h1><p>段落</p></body>
</html>

对应的 DOM 树：

DOCUMENT_NODE (document)├── DOCUMENT_TYPE_NODE (html)└── ELEMENT_NODE (html)├── ELEMENT_NODE (head)│    └── ELEMENT_NODE (title)│         └── TEXT_NODE ("DOM示例")└── ELEMENT_NODE (body)├── COMMENT_NODE ("主内容")├── ELEMENT_NODE (h1)│    └── TEXT_NODE ("标题")└── ELEMENT_NODE (p)└── TEXT_NODE ("段落")

二、DOM 操作 API

1. 节点查询
方法返回内容示例
document.getElementById()单个元素document.getElementById('app')
document.querySelector()首个匹配元素document.querySelector('.btn')
document.querySelectorAll()静态 NodeListdocument.querySelectorAll('li')
element.getElementsByTagName()动态 HTMLCollectiondiv.getElementsByTagName('p')
2. 节点遍历
属性说明示例
parentNode父节点node.parentNode
childNodes所有子节点node.childNodes
firstChild / lastChild首/末子节点node.firstChild
previousSibling / nextSibling前/后兄弟节点node.previousSibling
children仅元素子节点node.children
3. 节点修改
// 创建节点
const newDiv = document.createElement('div');
const newText = document.createTextNode('Hello');// 添加节点
parent.appendChild(newDiv)

相关文章：

DOM（文档对象模型）深度解析

DOM（文档对象模型）深度解析 DOM 是 HTML/XML 文档的树形结构表示，提供了一套让 JavaScript 动态操作网页内容、结构和样式的接口。 一、DOM 核心概念 1. 节点（Node）类型 类型值说明示例ELEMENT_NODE1元素节点<div>, <p>TEXT_NODE3文本节点元素内的文字COMMEN…...

编程日记 2025/6/10 0:42:35

四、Sqoop 导入表数据子集

作者&#xff1a;IvanCodes 日期&#xff1a;2025年6月4日 专栏&#xff1a;Sqoop教程 当不需要将关系型数据库中的整个表一次性导入&#xff0c;而是只需要表中的一部分数据时&#xff0c;Sqoop 提供了多种方式来实现数据子集的导入。这通常通过过滤条件或选择特定列来完成。 …...

编程日记 2025/6/10 0:41:32

【读代码】从预训练到后训练：解锁语言模型推理潜能——Xiaomi MiMo项目深度解析

项目开源地址：https://github.com/XiaomiMiMo/MiMo 一、基本介绍 Xiaomi MiMo是小米公司开源的7B参数规模语言模型系列，专为复杂推理任务设计。项目包含基础模型（MiMo-7B-Base）、监督微调模型（MiMo-7B-SFT）和强化学习模型（MiMo-7B-RL）等多个版本。其核心创新在于通过…...

编程日记 2025/6/10 0:40:29

DROPP算法详解：专为时间序列和空间数据优化的PCA降维方案

DROPP (Dimensionality Reduction for Ordered Points via PCA) 是一种专门针对有序数据的降维方法。本文将详细介绍该算法的理论基础、实现步骤以及在降维任务中的具体应用。 在现代数据分析中&#xff0c;高维数据集普遍存在特征数量庞大的问题。这种高维特性不仅增加了计算…...

编程日记 2025/6/10 0:39:26

DeepSeek11-Ollama + Open WebUI 搭建本地 RAG 知识库全流程指南

&#x1f6e0;️ Ollama Open WebUI 搭建本地 RAG 知识库全流程指南 &#x1f4bb; 一、环境准备 # 1. 安装 Docker 和 Docker Compose sudo apt update && sudo apt install docker.io docker-compose -y# 2. 添加用户到 docker 组&#xff08;避免 sudo 权限&…...

编程日记 2025/6/10 0:38:17

【AI大模型】Transformer架构到底是什么？

引言 —— 想象一台能瞬间读懂整本《战争与和平》、精准翻译俳句中的禅意、甚至为你的设计草图生成前端代码的机器——这一切并非科幻&#xff0c;而是过去七年AI领域最震撼的技术革命&#xff1a;Transformer架构创造的奇迹。 当谷歌在2017年揭开Transformer的神秘面纱时&…...

编程日记 2025/6/10 0:37:15

code-server安装使用，并配置frp反射域名访问

为什么使用 code-server是VSCode网页版开发软件&#xff0c;可以在浏览器访问编程&#xff0c;可以使用vscode中的插件。如果有自己的服务器&#xff0c;使用frp透传后&#xff0c;域名访问在线编程&#xff0c;使用方便&#xff0c;打开的服务端口不需要单独配置&#xff0c;可…...

编程日记 2025/6/10 0:36:13

MTK-Android12-13 Camera2 设置默认视频画质功能实现

MTK-Android12-13 Camera2 设置默认视频画质功能实现 场景&#xff1a;部分客户使用自己的mipi相机安装到我们主板上&#xff0c;最大分辨率为1280720&#xff0c;但是视频画质默认的是640480。实际场景中&#xff0c;在默认视频分辨率情况下拍出来的视频比较模糊、预览也不清晰…...

编程日记 2025/6/10 0:35:08

Kafka 消息模式实战：从简单队列到流处理（一）

一、Kafka 简介 ** Kafka 是一种分布式的、基于发布 / 订阅的消息系统&#xff0c;由 LinkedIn 公司开发&#xff0c;并于 2011 年开源&#xff0c;后来成为 Apache 基金会的顶级项目。它最初的设计目标是处理 LinkedIn 公司的海量数据&#xff0c;如用户活动跟踪、消息传递和…...

编程日记 2025/6/10 0:34:05

Linux知识回顾总结----进程状态

本章将会介绍进程的一些概念&#xff1a;冯诺伊曼体系结构、进程是什么&#xff0c;怎么用、怎么表现得、进程空间地址、物理地址、虚拟地址、为什么存在进程空间地址、如何感性得去理解进程空间地址、环境变量是如何使用的。 目录 1. 冯诺伊曼体系结构 1.1 是什么 1.2 结论 …...

编程日记 2025/6/10 0:33:02

Linux 进程管理学习指南：架构、计划与关键问题全解

Linux 进程管理学习指南&#xff1a;架构、计划与关键问题全解 本文面向初学者&#xff0c;旨在帮助你从架构视角理解 Linux 进程管理子系统&#xff0c;构建系统化学习路径&#xff0c;并通过结构化笔记方法与典型问题总结&#xff0c;夯实基础、明确方向&#xff0c;逐步掌握…...

编程日记 2025/6/10 0:31:59

【异常】极端事件的概率衰减方式（指数幂律衰减）

在日常事件中，极端事件的概率衰减方式并非单一模式，而是取决于具体情境和数据生成机制。以下是科学依据和不同衰减形式的分析： 1. 指数衰减（Exponential Decay） 典型场景：当事件服从高斯分布（正态分布）或指数分布时，极端事件的概率呈指数衰减。 数学形式：概率密度函数…...

编程日记 2025/6/10 0:30:52

Git 使用大全：从入门到精通

Git 是目前最流行的分布式版本控制系统&#xff0c;被广泛应用于软件开发中。本文将全面介绍 Git 的各种功能和使用方法&#xff0c;包含大量代码示例和实践建议。 文章目录 Git 基础概念版本控制系统Git 的特点Git 的三个区域Git 文件状态 Git 安装与配置安装 GitLinuxmacOSWi…...

编程日记 2025/6/10 0:29:50

奈飞工厂官网，国内Netflix影视在线看|中文网页电脑版入口

奈飞工厂是一个专注于提供免费Netflix影视资源的在线播放平台&#xff0c;致力于为国内用户提供的Netflix热门影视内容。该平台的资源与Netflix官网基本同步&#xff0c;涵盖电影、电视剧、动漫和综艺等多个领域。奈飞工厂的界面简洁流畅&#xff0c;资源分类清晰&#xff0c;方…...

编程日记 2025/6/10 0:28:47

Python基于蒙特卡罗方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融投资中&#xff0c;风险管理是确保资产安全和实现稳健收益的关键环节。随着市场波动性的增加&#xff0c;传统…...

编程日记 2025/6/10 0:27:43

【bat win系统自动运行脚本-双击启动docker及其它】

win系统自动化运行脚本 创建一个 startup.bat右键编辑&#xff0c;输入以下示例 echo off start "" "C:\Program Files\Docker\Docker\Docker Desktop.exe"timeout /t 5docker start your_container_namestart cmd /k "conda activate your_conda_e…...

编程日记 2025/6/10 0:26:41

SpringBoot离线应用的5种实现方式

在当今高度依赖网络的环境中&#xff0c;离线应用的价值日益凸显。无论是在网络不稳定的区域运行的现场系统&#xff0c;还是需要在断网环境下使用的企业内部应用&#xff0c;具备离线工作能力已成为许多应用的必备特性。 本文将介绍基于SpringBoot实现离线应用的5种不同方式。…...

编程日记 2025/6/10 0:25:38

js 比较两个对象的值,不相等就push对象的key

在JavaScript中&#xff0c;比较两个对象&#xff08;object&#xff09;的值并找出不相等的key&#xff0c;可以通过多种方法实现。下面是一些常用的方法&#xff1a; 方法1&#xff1a;使用JSON.stringify 这种方法适用于简单的对象&#xff0c;其中对象的值是基本类型或可…...

编程日记 2025/6/10 0:24:34

SQL 注入开放与修复

开发&#xff1a; SQL 注入是一种数据库攻击手段。攻击者通过向应用程序提交恶意代码来改变原 SQL 语句的含义&#xff0c; 进而执行任意 SQL 命令&#xff0c;达到入侵数据库乃至操作系统的目的。 例如&#xff1a;下面代码片段中&#xff0c;动态构造并执行了一个 SQ…...

编程日记 2025/6/10 0:23:33

【学习记录】Office 和 WPS 文档密码破解实战

文章目录 &#x1f4cc; 引言&#x1f4c1; Office 与 WPS 支持的常见文件格式Microsoft Office 格式WPS Office 格式 &#x1f6e0; 所需工具下载地址&#xff08;Windows 官方编译版&#xff09;&#x1f510; 破解流程详解步骤 1&#xff1a;提取文档的加密哈希值步骤 2&…...

编程日记 2025/6/10 0:22:31

AGV|无人叉车工业语音播报器|预警提示器LBE-LEX系列性能与接线说明

LBE-LEX系列AGV|无人叉车工业语音播报器|预警提示器&#xff0c;涵盖LBE-LEI-M-00、LBE-LESM-00、LBE-LES-M-01、LBE-LEC-M-00、LBE-KEI-M-00、LBE-KES-M-00、LBE-KES-M-01、LBE-KEC-M-00等型号&#xff0c;适用于各种需要语音提示的场景&#xff0c;主要有AGV、AMR机器人、无人…...

编程日记 2025/6/10 0:21:29

【电路笔记】-变压器电压调节

变压器电压调节 文章目录 变压器电压调节1、概述2、变压器电压调节3、变压器电压调节示例14、变压器电压调节示例25、变压器电压调节示例36、总结变压器电压调节是变压器输出端电压因连接负载电流的变化而从其空载值向上或向下变化的比率或百分比值。 1、概述 电压调节是衡量变…...

编程日记 2025/6/10 0:20:28

多层PCB技术解析：从材料选型到制造工艺的深度实践

在电子设备集成度与信号传输要求不断提升的背景下&#xff0c;多层PCB凭借分层布局优势&#xff0c;成为高速通信、汽车电子、工业控制等领域的核心载体。其通过导电层、绝缘层的交替堆叠&#xff0c;实现复杂电路的立体化设计&#xff0c;显著提升空间利用率与信号完整性。 一…...

编程日记 2025/6/10 0:19:26

（33）课54：3 张表的 join-on 连接举例，多表查询总结。数据库编程补述及游标综合例题。静态 sqL与动态sqL（可带参数）

&#xff08;112&#xff09;3 张表的 join-on 连接举例 &#xff1a; &#xff08;113&#xff09; 多表查询总结 &#xff1a; &#xff08;114&#xff09;数据库编程补述 &#xff1a; 综合例题 &#xff1a; 以上没有动手练习&#xff0c;不知道这样的语法是否…...

编程日记 2025/6/10 0:18:24

Vue3 hooks

export default function(){ let name; function getName(){ return name; } return {name,getName} } use it ----------------------------------------------- import useName from hooks/useName const {name,getName} useName(); 这段代码展示了一个自定义 Vue3钩…...

编程日记 2025/6/10 0:16:07

centos挂载目录满但实际未满引发系统宕机

测试服务器应用系统突然挂了&#xff0c;经过排查发现是因为磁盘“满了”导致的&#xff0c;使用df -h查看磁盘使用情况/home目录使用率已经到了100%,但使用du -sh /home查看发现实际磁盘使用还不到1G&#xff0c;推测有进程正在写入或占用已删除的大文件&#xff08;Linux 系统…...

编程日记 2025/6/10 0:15:05

KKCMS部署

目录 账号 网站目录 快看CMS使用手册 http://10.141.19.241/kkcms/install/ 常规思路&#xff1a;页面点点观察url变化&#xff0c;参数 常规思路&#xff1a;点一个功能模块抓包看什么东西&#xff0c;正确是什么样&#xff0c;错误的是什么样&#xff0c;构造参数。 账号…...

编程日记 2025/6/10 0:14:02

NamedParameterJdbcTemplate 使用方法及介绍

NamedParameterJdbcTemplate是 Spring 框架中用于数据库操作的核心类之一&#xff0c;它拓展了JdbcTemplate&#xff0c;通过封装实现命名参数特性&#xff0c;相比传统占位符?&#xff0c;命名参数可读性和维护性更强&#xff0c;能有效避免参数顺序混淆问题。 一、核心支持…...

编程日记 2025/6/10 0:11:44

【web笔记】JavaScript实现有动画效果的进度条

文章目录 1 实现效果2 实现代码 1 实现效果 2 实现代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"utf-8"><style>#progress {width: 300px;height: 20px;border-radius: 0; /* 移除圆角 */-webkit-appearance…...

编程日记 2025/6/10 0:10:37

安装最新elasticsearch-8.18.2

1.环境我的环境是linux麒麟服务器 （安装 es 7.8以上 java环境必须11以上，可以单独配置es的java目录） 2.下载 官网的地址：下载 Elastic 产品 | Elastic Download Elasticsearch | Elastic Elasticsearch 入门 | Elasticsearch 中文文档 文档 3.我下载的是8.18的 Elasti…...

编程日记 2025/6/10 0:09:35