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

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

news 2025/9/18 8:45:41

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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑：陈萍萍的公主一点人工一点智能未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战，在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2025/9/17 11:41:11

OpenLayers 可视化之热力图

注：当前使用的是 ol 5.3.0 版本，天地图使用的key请到天地图官网申请，并替换为自己的key 热力图（Heatmap）又叫热点图，是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

编程新知 2025/7/6 21:38:30

超短脉冲激光自聚焦效应

前言与目录强激光引起自聚焦效应机理超短脉冲激光在脆性材料内部加工时引起的自聚焦效应，这是一种非线性光学现象，主要涉及光学克尔效应和材料的非线性光学特性。自聚焦效应可以产生局部的强光场，对材料产生非线性响应，可能…...

编程新知 2025/9/15 5:16:46

Java如何权衡是使用无序的数组还是有序的数组

在 Java 中，选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南： ⚖️ 核心权衡维度维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...

编程新知 2025/8/3 11:17:37