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

【JavaScript】之文档对象模型（DOM）详解

news 2026/3/31 5:12:06

JavaScript 的强大之处在于它能够与 HTML 和 CSS 交互，动态地修改网页内容和样式。而实现这一功能的核心就是 DOM（文档对象模型）。

一、什么是 DOM？

DOM 是文档对象模型（Document Object Model）的缩写。它将 HTML 或 XML 文档转换成一个树形结构，JavaScript 可以访问和操作这棵树上的每一个节点，从而实现对网页的动态控制。

二、DOM 树的结构

DOM 树的结构是层级的，每个节点都有其父节点、子节点和兄弟节点。

父节点 (Parent Node): 包含当前节点的节点。
子节点 (Child Node): 被当前节点包含的节点。
兄弟节点 (Sibling Node): 与当前节点拥有相同父节点的节点。

三、如何使用 JavaScript 操作 DOM？

1. 获取元素:

getElementById(): 通过 ID 获取元素。

let element = document.getElementById("myElement");
console.log(element); // 输出 id 为 "myElement" 的元素

getElementsByTagName(): 通过标签名获取元素集合 (HTMLCollection)。

let paragraphs = document.getElementsByTagName("p");
for (let i = 0; i < paragraphs.length; i++) {console.log(paragraphs[i]); // 输出所有 p 元素
}

getElementsByClassName(): 通过类名获取元素集合 (HTMLCollection)。

let elements = document.getElementsByClassName("myClass");
for (let i = 0; i < elements.length; i++) {console.log(elements[i]); // 输出所有 class 包含 "myClass" 的元素
}

querySelector(): 通过 CSS 选择器获取第一个匹配的元素。

let element = document.querySelector("#myElement > p");
console.log(element); // 输出 id 为 "myElement" 元素下的第一个 p 元素

querySelectorAll(): 通过 CSS 选择器获取所有匹配的元素集合 (NodeList)。

let elements = document.querySelectorAll(".myClass");
elements.forEach(element => console.log(element)); // 输出所有 class 包含 "myClass" 的元素

2. 修改元素内容:

textContent: 获取或设置元素的文本内容。

let element = document.getElementById("myElement");
element.textContent = "新的文本内容"; // 设置文本内容
console.log(element.textContent); // 输出 "新的文本内容"

innerHTML: 获取或设置元素的 HTML 内容 (慎用，可能存在安全风险)。

let element = document.getElementById("myElement");
element.innerHTML = "<p>新的 HTML 内容</p>"; // 设置 HTML 内容

3. 修改元素属性:

getAttribute(): 获取元素的属性值。

let element = document.getElementById("myElement");
let src = element.getAttribute("src");
console.log(src); // 输出 src 属性的值

setAttribute(): 设置元素的属性值。

let element = document.getElementById("myElement");
element.setAttribute("src", "new_image.jpg"); // 设置 src 属性的值

removeAttribute(): 移除元素的属性。

let element = document.getElementById("myElement");
element.removeAttribute("src"); // 移除 src 属性

4. 修改元素样式:

style 属性: 直接访问和修改元素的内联样式。

let element = document.getElementById("myElement");
element.style.color = "red"; // 设置颜色为红色
element.style.fontSize = "20px"; // 设置字体大小

5. 创建和添加元素:

createElement(): 创建新的 HTML 元素。

let newParagraph = document.createElement("p");

appendChild(): 将新元素添加到父元素的子节点列表末尾。

let element = document.getElementById("myElement");
element.appendChild(newParagraph); // 将 newParagraph 添加到 myElement 的末尾

insertBefore(): 将新元素添加到父元素的指定子节点之前。

let existingElement = document.getElementById("existingElement");
element.insertBefore(newParagraph, existingElement); // 将 newParagraph 添加到 existingElement 之前

6. 删除元素:

removeChild(): 从父元素中删除指定的子元素。

let element = document.getElementById("myElement");
let childToRemove = document.getElementById("childToRemove");
element.removeChild(childToRemove); // 从 myElement 中删除 childToRemove

7. 事件处理:

let element = document.getElementById("myElement");
element.addEventListener('click', function() {alert("元素被点击了！");
});

四、一些重要的 DOM 属性和方法 (附带示例):

document.documentElement: 获取 <html> 元素。 console.log(document.documentElement);
document.body: 获取 <body> 元素。 console.log(document.body);
parentNode: 获取元素的父节点。 console.log(element.parentNode);
childNodes: 获取元素的所有子节点 (NodeList)。 console.log(element.childNodes);
firstChild: 获取元素的第一个子节点。 console.log(element.firstChild);
lastChild: 获取元素的最后一个子节点。 console.log(element.lastChild);
nextSibling: 获取元素的下一个兄弟节点。 console.log(element.nextSibling);
previousSibling: 获取元素的上一个兄弟节点。 console.log(element.previousSibling);

五、避免常见错误:

操作未加载的 DOM: 确保 DOM 完全加载后再执行 JavaScript 代码，可以使用 DOMContentLoaded 事件。
innerHTML 的安全风险: 使用 innerHTML 容易受到 XSS 攻击，需要谨慎使用，并进行必要的安全过滤。
性能优化: 频繁操作 DOM 会影响性能，尽量减少不必要的 DOM 操作，可以使用文档片段 (DocumentFragment) 来批量更新 DOM。

六、DOM案例

HTML 页面：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>DOM 操作示例</title>
</head>
<body><h1 id="header">欢迎来到 DOM 操作示例</h1>
<button onclick="changeText()">点击改变标题文字</button>
<div id="content"><p>这是一个段落。</p><ul><li>列表项 1</li><li>列表项 2</li><li>列表项 3</li></ul>
</div><script>
function changeText() {var header = document.getElementById("header");header.innerHTML = "DOM 文档对象模型示例";
}window.onload = function() {var listItems = document.querySelectorAll('#content ul li');for (var i = 0; i < listItems.length; i++) {(function(index) {listItems[index].onclick = function() {alert('点击了第 ' + (index + 1) + ' 个列表项');};})(i);}
};
</script></body>
</html>

解释：

HTML 部分:
- <h1> 标签用于创建一个标题。
- <button> 标签用于创建一个按钮，当用户点击该按钮时，将调用 changeText 函数。
- <div> 包含了一个段落和一个无序列表。
JavaScript 部分:
- changeText 函数通过获取具有 id="header" 的元素，并修改其 innerHTML 属性来改变标题的文本内容。
- window.onload 事件处理器在页面加载完成后执行。它首先通过 querySelectorAll 获取所有的列表项，并为每个列表项添加点击事件处理程序。当列表项被点击时，会弹出一个警告框显示点击的是哪个列表项。

这个例子展示了如何使用 JavaScript 操作 HTML DOM（文档对象模型）中的元素，包括选择元素、修改元素内容以及响应用户的交互动作。

运行：

七、总结

DOM 是 JavaScript 操作网页的关键。通过本文的介绍和示例，希望你对 JavaScript DOM 有了更深入的了解，并能够在实际开发中灵活运用。

【JavaScript】之文档对象模型（DOM）详解

JavaScript 的强大之处在于它能够与 HTML 和 CSS 交互，动态地修改网页内容和样式。而实现这一功能的核心就是 DOM（文档对象模型）。一、什么是 DOM？ DOM 是文档对象模型（Document Object Model）的缩写。它…...

编程日记 2024/11/6 3:58:19

速盾：cdn域名与ip区别

CDN（内容分发网络）是一种通过在全球多个服务器上缓存和分发静态资源的网络服务，可以提高网站的访问速度和性能。在使用CDN时，域名与IP地址是两个关键的概念。本文将介绍CDN域名与IP地址的区别和作用。首先，CDN域名是…...

编程日记 2024/11/6 3:54:15

如何优雅的在页面上嵌入AI-Agent人工智能

前言 IDEA启动！大模型的title想必不用我多说了，多少公司想要搭上时代前言技术的快车，感受科技的魅力。现在大模型作为降本增效的强大工具，基本上公司大多人都想要部署开发一把，更多的想要利用到这些模型放到生产中来提…...

编程日记 2024/11/6 3:53:14

如何对LabVIEW软件进行性能评估？

对LabVIEW软件进行性能评估，可以从以下几个方面着手，通过定量与定性分析，全面了解软件在实际应用中的表现。这些评估方法适用于确保LabVIEW程序的运行效率、稳定性和可维护性。一、响应时间和执行效率时间戳测量：使用LabVIEW的时…...

编程日记 2024/11/6 3:51:12

动态规划 —— dp问题-按摩师

1. 按摩师题目链接： 面试题 17.16. 按摩师 - 力扣（LeetCode）https://leetcode.cn/problems/the-masseuse-lcci/description/ 2. 算法原理状态表示：以某一个位置为结尾或者以某一个位置为起点 dp[i]表示：选择到i位置…...

编程日记 2024/11/6 3:50:11

SQL 语法学习

在当今数字化的时代，数据的管理和分析变得至关重要。而 SQL（Structured Query Language），即结构化查询语言，作为一种用于管理关系型数据库的强大工具，掌握它对于从事数据相关工作的人来说是一项必备技能。在…...

编程日记 2024/11/6 3:49:10

MYSQL---TEST5(Trigger触发器Procedure存储过程综合练习)

触发器Trigger 数据库mydb16_trigger创建表的创建 goods create table goods( gid char(8) primary key, #商品号 name varchar(10), #商品名 price decimal(8,2), #价格 num int；） #数量orders create tabl…...

编程日记 2024/11/6 3:46:07

题目代码 #include <stdio.h> #include <string.h> #include <vector> #include <algorithm> #include <iostream> using namespace std; struct node{ int a,b; }; vector<node> q; bool cmp(node x,node y){ return x.b <…...

编程日记 2024/11/6 3:45:05

Nginx 报错400 Request Header Or Cookie Too Large

错误的原因： 1、可能是你的网络DNS配置错误。 2、由request header过大所引起，request过大，通常是由于cookie中写入了较大的值所引起的。 3、访问太频繁，浏览器的缓存量太大，产生错误。解决办法： 1、清…...

编程日记 2024/11/6 3:44:05

【Redis】一种常见的Redis分布式锁原理简述

本文主要简述一下基于set命令的Redis分布式锁的原理。一，a线程持有的锁不要被b线程同时持有→setnx 抢锁的时候，最核心的就是，a线程持有的锁不要被b线程同时持有，放在基于set命令的redis分布式锁中来看，就是“如果锁…...

编程日记 2024/11/6 3:43:04

HOT100_最大子数组和

class Solution {public int maxSubArray(int[] nums) {int[] dp new int[nums.length];int res nums[0];dp[0] nums[0];for(int i 1; i< nums.length; i){dp[i] Math.max(nums[i] ,dp[i-1] nums[i]);res Math.max(res, dp[i]);}return res;} }...

编程日记 2024/11/6 3:42:03

DiskGenius工具扩容Mac OS X Apple APFS分区

DiskGenius是一款功能强大的磁盘分区工具，它支持Windows和Mac OS X系统，可以用于管理硬盘分区，包括扩容Mac OS X的Apple APFS分区。然而，直接使用DiskGenius来扩容Mac OS X的APFS分区可能存在一定的风险，因为不是专门为…...

编程日记 2024/11/6 3:41:01

从零开始的LeetCode刷题日记：70. 爬楼梯

一.相关链接题目链接：70. 爬楼梯二.心得体会这道题还是动规五部曲。 1.首先是dp数组及其下标的含义，dp记录了每层楼梯对应的爬的方法，每个下标存储每个对应楼层。 2.然后是递归公式，其实每一层楼都是可以从下面一层和下面…...

编程日记 2024/11/6 3:40:00

Unity照片墙效果

Unity照片墙效果，如下效果展示。工程源码...

编程日记 2024/11/6 3:37:57

【自动化利器】12个评估大语言模型（LLM）质量的自动化框架

LLM评估是指在人工智能系统中评估和改进语言和语言模型的过程。在人工智能领域，特别是在自然语言处理（NLP）及相关领域，LLM评估具有至高无上的地位。通过评估语言生成和理解模型，LLM评估有助于细化人工智能驱动的语言相…...

编程日记 2024/11/6 3:33:54

【1】基础概念

文章目录一、特点二、基础语法注意三、官方编程指南四、go 语言标准库 API 一、特点 golang 一个 go 文件都要归属到一个包，需要进行申明。天然的并发：golang 从语言层面支持大并发。每个 go 文件都必须要归属到一个包中。执行 go 文件：go …...

编程日记 2024/11/6 3:24:44

HTML 文档规范与解析模式：DOCTYPE、＜html＞标签以及结构化页面

文章目录 `<!DOCTYPE html>` 文档类型声明标准模式与怪异模式HTML5 的简化声明`<html>` 标签`<head>` 标签`<body>` 标签小结<!DOCTYPE html> 文档类型声明在 HTML 文档中，<!DOCTYPE html> 是一个重要的文档类型声明，主要用于告知浏览…...

编程日记 2024/11/6 3:23:44

大模型微调技术 --＞脉络

Step1:脉络微调技术从最早期的全模型微调演变成如今的各种参数高效微调(PEFT)方法，背后是为了应对大模型中的计算、存储和数据适应性的挑战 1.为什么有微调？ 深度学习模型越来越大，尤其是 NLP 中的预训练语言模型(BERT, GPT)系列。如果从…...

编程日记 2024/11/6 3:21:40

不要只知道deepl翻译，这里有10个专业好用的翻译工具等着你。

deepl翻译的优点还是有很多的，比如翻译的准确性很高，支持翻译的语言有很多，并且支持翻译文件和文本。但是现在翻译工具那么多，大家需要翻译的场景也有很多，怎么能只拥有一个翻译工具呢。所以在这里我帮助大家寻找了一波…...

编程日记 2024/11/6 3:20:38

第二节管道符、重定向与环境变量

1.重定向技术的 5 种模式 （1）标准覆盖输出重定向 （2）标准追加输出重定向 （3）错误覆盖输出重定向 （4）错误追加输出重定向 （5）输入重定向2.输入输出重定向输入…...

编程日记 2024/11/6 3:19:38

别再只用scatter了！用Matlab绘制密度散点图，让你的数据分布一目了然（附TheColor配色方案）

突破数据可视化瓶颈：Matlab密度散点图实战指南当你面对数十万个数据点时，传统的散点图往往会变成一团模糊的噪点，重要分布特征完全被掩盖。这种场景下，密度散点图就像给你的数据装上了X光机，让隐藏的模式和结构清晰可…...

编程新知 2026/3/31 4:41:27

嵌入式SD卡文件处理轻量级工具库LC_SDTools

1. LC_SDTools 库概述LC_SDTools 是一个面向嵌入式 SD 卡文件系统应用的轻量级工具库，专为解决裸机或 RTOS 环境下 SD 卡文件操作中高频缺失的基础能力而设计。其核心定位并非替代 FatFs、LittleFS 或 ChibiOS FAT 模块等完整文件系统栈，而是作为上层应用…...

编程新知 2026/3/31 3:04:13

深入解析dlopen：动态库加载的机制与实践

1. 动态库加载的两种方式在C/C开发中，动态库（Dynamic Library）的使用是提升代码复用性和灵活性的重要手段。动态库加载主要分为隐式链接和显式链接两种方式，它们各有特点，适用于不同场景。隐式链接是最常见的方式&am…...

编程新知 2026/3/31 2:56:11

Windows系统下Neo4j社区版手动安装与配置指南（非Docker方案）

1. 环境准备：JDK安装与验证在Windows系统下手动安装Neo4j社区版，第一步就是搞定Java环境。我见过太多新手卡在这一步，其实只要注意几个关键点就能轻松过关。Neo4j作为基于Java开发的图数据库，必须依赖JDK才能运行，但不…...

编程新知 2026/3/31 2:50:09

MCP服务器开发踩坑实录，深度解析asyncio+FastAPI+MCPv0.5兼容性难题及热修复方案

第一章：MCP服务器开发踩坑实录，深度解析asyncioFastAPIMCPv0.5兼容性难题及热修复方案在基于MCP（Model Context Protocol）v0.5规范构建异步AI服务代理时，我们发现FastAPI 0.115 与标准asyncio事件循环存在隐式冲突&…...

编程新知 2026/3/31 1:59:21

嵌入式开发中回调函数的解耦实践与高级应用

1. 回调函数在嵌入式开发中的解耦实践在嵌入式系统开发中，模块间的耦合度直接影响着代码的可维护性和可扩展性。最近我在重构一个智能家居项目时，就遇到了模块间强耦合导致修改困难的问题。通过引入回调函数机制，成功将原本紧密交织的代码逻辑…...

编程新知 2026/3/31 1:29:11

利用爱毕业aibiye等智能软件，论文写作与编程工作流程得到革新，AI为学术研究提供新思路

文章总结表格（工具排名对比） 工具名称核心优势 aibiye 精准降AIGC率检测，适配知网/维普等平台 aicheck 专注文本AI痕迹识别，优化人类表达风格 askpaper 快速降AI痕迹，保留学术规范秒篇高效处理混AIGC内容&…...

编程新知 2026/3/31 1:05:00

Atmosphere系统功能扩展指南：从基础配置到高级应用的完整学习路径

Atmosphere系统功能扩展指南：从基础配置到高级应用的完整学习路径【免费下载链接】Atmosphere-stable 大气层整合包系统稳定版项目地址: https://gitcode.com/gh_mirrors/at/Atmosphere-stable 问题导入：为什么需要自定义系统想象一下&#x…...

编程新知 2026/3/30 22:21:46

FastAPI类型提示：Self的终极指南：提升代码可读性与维护性的完整教程

FastAPI类型提示：Self的终极指南：提升代码可读性与维护性的完整教程【免费下载链接】fastapi FastAPI framework, high performance, easy to learn, fast to code, ready for production 项目地址: https://gitcode.com/GitHub_Trending/fa/fastapi …...

编程新知 2026/3/30 22:17:44

导师推荐！盘点2026年好评如潮的AI论文平台

一天写完毕业论文在2026年已不再是天方夜谭。2026年最炸裂、实测能大幅提速的AI论文平台正在席卷学术圈，覆盖选题构思、文献综述、内容生成、降重润色与格式排版全流程，真正帮你高效搞定论文写作。一、全流程王者：一站式搞定论文全链路&…...

编程新知 2026/3/30 22:05:35