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

JavaScript DOM与元素操作

article 2026/2/17 3:53:17

DOM 树、DOM 对象、元素操作

一、DOM 树与 DOM 对象

二、获取 DOM 元素

1. 基础方法

2. 现代方法（ES6+）

三、修改元素内容

四、修改元素常见属性

1. 标准属性

2. 通用方法

五、通过 style 修改样式

六、通过类名修改样式

1. className 属性

2. classList 方法（推荐）

七、获取和设置表单的值

1. 输入框（input、textarea）

2. 单选/复选框（radio、checkbox）

3. 下拉框（select）

八、自定义属性（data-*）

1. 定义与访问

2. 修改自定义属性

示例：全选反选案例

DOM 树、DOM 对象、元素操作

DOM（Document Object Model）是浏览器将 HTML 或 XML 文档解析为 树形结构 的编程接口，开发者可通过 JavaScript 动态操作网页内容、结构和样式。

一、DOM 树与 DOM 对象

DOM 树
- 定义：浏览器将 HTML 文档解析为 树形结构 的层级模型，每个 HTML 标签、属性、文本都对应树中的节点。
- 结构：包含根节点（document）、元素节点、文本节点、属性节点等。
- 作用：提供编程接口，让 JavaScript 动态操作网页内容。
DOM 对象
- 定义：DOM 树中的每个节点都是一个对象，拥有属性和方法。
- 类型：
  - Element：元素节点（如 <div>）。
  - Text：文本节点。
  - Attr：属性节点。
  - Document：整个文档的入口。
DOM 树示例

<!DOCTYPE html>
<html><head><title>DOM 示例</title></head><body><h1>标题</h1><p class="content">段落</p></body>
</html>

document
├── html (元素节点)
│   ├── head (元素节点)
│   │   └── title (元素节点)
│   │       └── "DOM 示例" (文本节点)
│   └── body (元素节点)
│       ├── h1 (元素节点)
│       │   └── "标题" (文本节点)
│       └── p (元素节点)
│           ├── class="content" (属性节点)
│           └── "段落" (文本节点)
└── ...

二、获取 DOM 元素

1. 基础方法

方法	返回类型	示例
`document.getElementById()`	单个元素	`document.getElementById("box")`
`document.getElementsByClassName()`	HTMLCollection（动态）	`document.getElementsByClassName("item")`
`document.getElementsByTagName()`	HTMLCollection（动态）	`document.getElementsByTagName("div")`

2. 现代方法（ES6+）

方法	返回类型	示例
`document.querySelector()`	单个元素	`document.querySelector(".container")`
`document.querySelectorAll()`	NodeList（静态）	`document.querySelectorAll("li")`

区别：

动态集合（如 HTMLCollection）：元素变化时自动更新。

const items = document.getElementsByClassName("item");
console.log(items.length); // 假设初始为 2
document.body.appendChild(document.createElement("div")); // 动态集合长度自动更新
console.log(items.length); // 3

静态集合（如 NodeList）：查询后不再更新。

const list = document.querySelectorAll("li");
console.log(list.length); // 假设初始为 3
document.body.appendChild(document.createElement("li")); 
console.log(list.length); // 仍为 3

三、修改元素内容

属性/方法	说明	示例
`innerHTML`	获取或设置元素的 HTML 内容（解析标签）	`element.innerHTML = "<b>加粗</b>"`
`textContent`	获取或设置元素的文本内容（不解析标签）	`element.textContent = "纯文本"`
`innerText`	获取可见文本（考虑样式，性能较低）	`element.innerText = "可见文本"`

注意：

innerHTML 可能引发 XSS 攻击（避免插入未经验证的用户输入）。
textContent 性能优于 innerText。

四、修改元素常见属性

方法	说明	示例
`getAttribute()`	获取属性值	`element.getAttribute("href")`
`setAttribute()`	设置属性值	`element.setAttribute("class", "active")`
`removeAttribute()`	删除属性	`element.removeAttribute("disabled")`
直接访问属性	通过元素属性名快速访问（部分属性需特殊处理）	`element.id = "newId"`

1. 标准属性

直接通过 DOM 对象属性操作：

element.id = "newId";          // 修改 id
element.className = "active";  // 修改 class（覆盖原有类）
element.href = "https://example.com"; // 修改链接

2. 通用方法

element.setAttribute("属性名", "值");  // 设置属性
element.getAttribute("属性名");       // 获取属性
element.removeAttribute("属性名");    // 删除属性

示例：

const img = document.querySelector("img");
img.setAttribute("src", "new-image.jpg");
img.removeAttribute("alt");

五、通过 `style` 修改样式

方法	说明	示例
`style` 属性	修改内联样式	`element.style.color = "red"`
`classList`	操作类名（添加、删除、切换）	`element.classList.add("active")`
`window.getComputedStyle()`	获取最终计算的样式（包括外部 CSS）	`getComputedStyle(element).fontSize`

直接操作元素的 style 属性（修改内联样式）：

element.style.color = "red";            // 单个样式
element.style.backgroundColor = "#fff"; // 驼峰命名
element.style.cssText = "color: red; font-size: 16px;"; // 批量设置

注意：

修改 style 只影响内联样式，优先级高于外部 CSS。
频繁操作 style 可能触发重绘（性能敏感时需优化）。

六、通过类名修改样式

1. `className` 属性

直接覆盖所有类名：

element.className = "class1 class2"; // 覆盖原有类

2. `classList` 方法（推荐）

精细控制类名：

element.classList.add("new-class");     // 添加类
element.classList.remove("old-class");  // 删除类
element.classList.toggle("active");     // 切换类（存在则删除，否则添加）
element.classList.contains("active");   // 检查是否包含类

优势：

避免覆盖其他类名。
支持链式调用：element.classList.add("a").remove("b")。

七、获取和设置表单的值

1. 输入框（`input`、`textarea`）

const input = document.querySelector("input");
// 获取值
console.log(input.value);
// 设置值
input.value = "新内容";

2. 单选/复选框（`radio`、`checkbox`）

const checkbox = document.querySelector("input[type=checkbox]");
// 获取选中状态
console.log(checkbox.checked); // true/false
// 设置选中状态
checkbox.checked = true;

3. 下拉框（`select`）

const select = document.querySelector("select");
// 获取选中值
console.log(select.value);
// 设置选中值
select.value = "option2";

**八、自定义属性（`data-*`）**

1. 定义与访问

HTML 中定义自定义属性：

<div id="user" data-id="123" data-user-name="Alice"></div>

JavaScript 通过 dataset 访问：

const user = document.getElementById("user");
console.log(user.dataset.id);          // "123"
console.log(user.dataset.userName);    // "Alice"（驼峰命名转换）

2. 修改自定义属性

user.dataset.id = "456";            // 修改 data-id
user.dataset.userRole = "admin";    // 添加 data-user-role
delete user.dataset.userName;       // 删除 data-user-name

注意：

属性名需符合 data-* 格式。
dataset 会自动将短横线命名转为驼峰式（如 data-user-name → userName）。

示例：全选反选案例

<body><table><tr><th class="allCheck"><input type="checkbox" name="" id="checkAll"> <span class="all">全选</span></th><th>商品</th><th>商家</th><th>价格</th></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米手机</td><td>小米</td><td>￥1999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米净水器</td><td>小米</td><td>￥4999</td></tr><tr><td><input type="checkbox" name="check" class="ck"></td><td>小米电视</td><td>小米</td><td>￥5999</td></tr></table><script>const checkAll = document.querySelector('#checkAll')const checks = document.querySelectorAll('.ck')checkAll.addEventListener('click', function () {for (let i = 0; i < checks.length; i++) {checks[i].checked = checkAll.checked}})for (let i = 0; i < checks.length; i++) {checks[i].addEventListener('click', function () {checkAll.checked = document.querySelectorAll('.ck:checked').length === checks.length})}</script>
</body>

JavaScript DOM与元素操作

目录 DOM 树、DOM 对象、元素操作一、DOM 树与 DOM 对象二、获取 DOM 元素 1. 基础方法 2. 现代方法（ES6） 三、修改元素内容四、修改元素常见属性 1. 标准属性 2. 通用方法五、通过 style 修改样式六、通过类名修改样式 1. className 属…...

编程日记 2026/2/15 4:30:54

ARM向量表

向量表作用说明RVBAR在 AArch64 中，重置向量不再是异常向量表的一部分。有复位向量的专用配置输入引脚和寄存器。在 AArch64 中，处理器从 IMPLEMENTAION‑DEFINED 地址开始执行， 该地址由硬件输入引脚RVBARADDR定义， 可以通过 R…...

编程日记 2026/2/12 12:11:32

leetcode刷题日记——除自身以外数组的乘积

[ 题目描述 ]： [ 思路 ]： 题目要求获取数组中每个元素除自己以外的各元素的乘积最简单的方法就是算出数组所有元素的乘积，然后除以自身，即可得到除自身外各元素的乘积但要考虑到其自身为0的情况，即当期自身为0时&am…...

编程日记 2026/2/14 19:37:01

【信奥一本通提高篇】基础算法之贪心算法

原文 https://bbs.fmcraft.top/blog/index.php/archives/22/ 贪心算法概述近年来的信息学竞赛试题，经常出现求一个问题的可行解或最优解的题目。这类问题就是我们通常所说的最优化问题。贪心算法是求解这类问题的一种常用算法。在众多的算法中，贪心…...

编程日记 2026/2/16 23:13:47

PyQt6实例_批量下载pdf工具_批量pdf网址获取

目录前置： 步骤： step one 安装包 step two 获取股票代码 step three 敲代码，实现 step four 网址转pdf网址视频前置： 1 本系列将以 “PyQt6实例_批量下载pdf工具”开头，放在【PyQt6实例】专栏 2 本节讲…...

编程日记 2026/2/17 0:20:18

KMeans算法案例

KMeans算法案例案例介绍已知：客户性别、年龄、年收入、消费指数需求：对客户进行分析，找到业务突破口，寻找黄金客户数据集共包含顾客的数据, 数据共有 4 个特征, 数据共有 200 条。接下来，使用聚类算法对具有相似…...

编程日记 2026/2/15 5:52:06

IDApro直接 debug STM32 MCU

使用IDA pro 逆向分析muc 固件的时候， 难免要进行一些动态的debug，来进一步搞清楚一些内存的数据、算法等，这时候使用远程debug 的方式直接在mcu上进行debug 最合适不过了。不过有个前提条件就是一般来说有的mcu 会被运行中的代码屏蔽 RDP、…...

编程日记 2026/2/15 19:11:28

六十天前端强化训练之第三十六天之E2E测试（Cypress）大师级完整指南

欢迎来到编程星辰海的博客讲解看完可以给一个免费的三连吗，谢谢大佬！ 目录一、知识讲解 1. E2E测试核心概念 2. Cypress框架特性 3. 工作原理 4. 测试金字塔定位二、核心代码示例：用户登录全流程测试三、实现效果展示四、学习要…...

编程日记 2026/2/13 13:57:50

创建和管理Pod

创建和管理Pod 文章目录创建和管理Pod[toc]一、什么是Pod1.Pod 的核心定义2.Pod 的组成与结构3.Pod 的生命周期4.Pod 的使用场景5.高级特性二、Pod与容器1. 为什么使用 Pod 作为 Kubernetes 的最小部署单元？2. 单一容器 Pod3. 多容器 Pod4. 初始化容器&#xff08…...

编程日记 2026/2/15 5:26:34

20250330-傅里叶级数专题之离散傅里叶变换(5/6)

5. 傅里叶级数专题之离散傅里叶变换推荐视频: 工科生以最快的速度理解离散傅立叶变换(DFT) 哔哩哔哩 20250328-傅里叶级数专题之数学基础(0/6)-CSDN博客20250330-傅里叶级数专题之傅里叶级数(1/6)-CSDN博客20250330-傅里叶级数专题之傅里叶变换(2/6)-CSDN博客20250330-傅里叶…...

编程日记 2026/2/16 23:31:04

Android设计模式之代理模式

一、定义： 为其他对象提供一种代理以控制对这个对象的访问。二、角色组成： Subject抽象主题：声明真是主题与代理的共同接口方法，可以是一个抽象类或接口。 RealSubject真实主题：定义了代理表示的真实对象&#xff0c…...

编程日记 2026/2/15 3:48:56

《非暴力沟通》第十二章 “重获生活的热情” 总结

《非暴力沟通》第十二章 “重获生活的热情” 的核心总结： 本章将非暴力沟通的核心理念延伸至生命意义的探索，提出通过觉察与满足内心深处的需要，打破“义务性生存”的桎梏，让生活回归由衷的喜悦与创造。作者强调，当行动…...

编程日记 2025/4/19 0:54:57

3.29:数据结构-绪论线性表-上

一、时间复杂度 1、ADT 2、定义法计算时间复杂度：统计核心语句的总执行次数 （1）例题1，与2022年的真题对比着写此题关键在于求和公式的转化，类型为：线性循环嵌套非线性循环 2022年那道题如果考场上实在脑…...

编程日记 2026/2/11 9:26:23

1.java把项目打包成jar 步骤一、IDEA -> File -> Project Structure -> Artifacts -> -> JAR -> From moduls with dependencies... -> 选择 Module 和 Main Class -> 选择 JAR files from libraries JAR files from libraries 解释 extract to the t…...

编程日记 2026/2/16 20:08:45

【奶茶经济学的符号暴力本质】

金字塔式七层分析框架：奶茶经济学的符号暴力本质第一层：缺货的戏剧经济学结论：13.7%缺货率是精密计算的神经钩机制：喜茶新品首日仅投放86.3%门店，制造"限量焦虑"激活前额叶决策区矛盾验证： …...

编程日记 2026/2/14 14:31:15

Python PDF解析利器：pdfplumber | AI应用开发

Python PDF解析利器：pdfplumber全面指南 1. 简介与安装 1.1 pdfplumber概述 pdfplumber是一个Python库，专门用于从PDF文件中提取文本、表格和其他信息。相比其他PDF处理库，pdfplumber提供了更直观的API和更精确的文本定位能力。主要特点…...

编程日记 2026/2/16 12:11:37

大模型架构记录13【hr agent】

一 Function calling 函数调用 from dotenv import load_dotenv, find_dotenvload_dotenv(find_dotenv())from openai import OpenAI import jsonclient OpenAI()# Example dummy function hard coded to return the same weather # In production, this could be your back…...

编程日记 2026/2/15 16:40:56

conda 清除 tarballs 减少磁盘占用、 conda rename 重命名环境、conda create -n qwen --clone 当前环境

🥇 版权: 本文由【墨理学AI】原创首发、各位读者大大、敬请查阅、感谢三连 🎉 声明: 作为全网 AI 领域干货最多的博主之一，❤️ 不负光阴不负卿 ❤️ 文章目录 conda clean --tarballsconda rename 重命名环境conda create -n qwen --clone …...

编程日记 2026/2/17 3:05:19

Java基础-24-继承-认识继承-权限修饰符-继承的特点

在Java中，继承是面向对象编程（OOP）的一个重要特性。通过继承，一个类可以复用另一个类的属性和方法，从而实现代码的重用性和扩展性。以下是关于继承的一些关键点，包括权限修饰符和继承的特点。 1. 继承的基本…...

编程日记 2026/2/14 15:07:40

Bootstrap 表格：高效布局与动态交互的实践指南

Bootstrap 表格：高效布局与动态交互的实践指南引言 Bootstrap 是一个流行的前端框架，它为开发者提供了丰富的组件和工具，使得构建响应式、美观且功能丰富的网页变得更加简单。表格是网页中常见的元素，用于展示数据。Bootstrap 提供了强大的表格组件，可以帮助开发者轻松…...

编程日记 2026/2/14 4:17:48

pycharm相对路径引用方法

用于打字不方便，以下直接手写放图，直观理解...

编程日记 2026/2/14 12:36:57

新能源智慧灯杆的智能照明系统如何实现节能？

叁仟新能源智慧灯杆的智能照明系统可通过以下多种方式实现节能： 智能调光控制光传感器技术：在灯杆上安装光传感器，实时监测周围环境的光照强度。当环境光线充足时，如白天或有其他强光源时，智能照明系统会自动降低路…...

编程日记 2026/2/15 1:02:25

Jenkins教程(自动化部署)

Jenkins教程(自动化部署) 1. Jenkins是什么？ Jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具，广泛用于项目开发，具有自动化构建、测试和部署等功能。Jenkins用Java语言编写，可在Tomcat等流行的servlet容器中运行&…...

编程日记 2026/2/15 12:49:00

行业智能体大爆发，分布式智能云有解

Manus的一夜爆红，在全球范围内引爆关于AI智能体的讨论。与过去一般的AI助手不同，智能体（AI Agent）并非只是被动响应，而是主动感知、决策并执行的应用。Gartner预测，到2028年，15%的日常工作决策…...

编程日记 2026/2/16 3:13:48

日语Learn,英语再认识（5）

This is a dedicated function — it exists solely to solve this case. This is a dedicated function. It’s a dedicated method for solving this case. 其他备选词（但没dedicated精准）： special → 含糊，有时只是“特别”…...

编程日记 2026/2/13 13:44:16

【区块链安全 | 第十四篇】类型之值类型（一）

文章目录值类型布尔值整数运算符取模运算指数运算定点数地址（Address）类型转换地址的成员balance 和 transfersendcall，delegatecall 和 staticcallcode 和 codehash 合约类型（Contract Types）固定大小字节数组&…...

编程日记 2026/2/16 3:13:23

音视频入门基础：MPEG2-TS专题（25）——通过FFmpeg命令使用UDP发送TS流

一、通过FFmpeg命令使用UDP发送TS流通过以下FFmpeg命令可以将一个mp4文件转换为ts封装，并基于UDP发送（推流）： ffmpeg.exe -re -i input.mp4 -vcodec copy -acodec copy -f mpegts udp://127.0.0.1:1234 其中： “in…...

编程日记 2026/2/15 21:22:32

Error in torch with streamlit

报错信息： This is the error which is a conflict between torch and streamlit: Examining the path of torch.classes raised: Tried to instantiate class path.path’, but it does not exist! Ensure that it is registered via torch::class Steps to reproduce: py…...

编程日记 2026/2/14 15:19:00

网络基础知识介绍

目录一、计算机网络背景与发展 1.1 计算机网络的背景编辑1.2 计算机网络的发展历程二、网络协议 2.1 认识网络协议 2.3 协议分层 2.4 OSI七层模型 2.5 TCP/IP 五层(或四层)模型三、网络传输基本流程 3.1 网络传输流…...

编程日记 2026/2/15 15:03:25

MIPS-32架构(寄存器堆，指令系统，运算器)

文章目录 0 Preview:寄存器32通用0 $zero1 $at2—3 \$v0-$v14—7 \$a0-$a38—15 \$t0-$t716—23 \$s0-$s724—25 \$t8-$t926—27 \$k0-$k128 $gp29 $sp30 $fp 指令系统运算存储器 0 Preview: MIPS架构有32位版本和64位版本，本文介绍32位版本寄存器正如笔者曾说…...

编程日记 2026/2/14 16:05:32

DOM 树、DOM 对象、元素操作

一、DOM 树与 DOM 对象

二、获取 DOM 元素

1. 基础方法

2. 现代方法（ES6+）

三、修改元素内容

四、修改元素常见属性

1. 标准属性

2. 通用方法

五、通过 style 修改样式

六、通过类名修改样式

1. className 属性

2. classList 方法（推荐）

七、获取和设置表单的值

1. 输入框（input、textarea）

2. 单选/复选框（radio、checkbox）

3. 下拉框（select）

八、自定义属性（data-*）

1. 定义与访问

2. 修改自定义属性

示例：全选反选案例

相关文章：

五、通过 `style` 修改样式

1. `className` 属性

2. `classList` 方法（推荐）

1. 输入框（`input`、`textarea`）

2. 单选/复选框（`radio`、`checkbox`）

3. 下拉框（`select`）

**八、自定义属性（`data-*`）**