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

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

news 文章来源：https://blog.csdn.net/weixin_64178283/article/details/143392485 2025/5/17 22:56:44

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

Linux 服务器使用指南：从入门到登录

🌟快来参与讨论💬，点赞👍、收藏⭐、分享📤，共创活力社区。 🌟 🚩博主致力于用通俗易懂且不失专业性的文字，讲解计算机领域那些看似枯燥的知识点🚩 目录一…...

编程日记 2024/11/6 3:18:36

QT 如何使QLabel的文字垂直显示

想要实现QLabel文字的垂直显示，可以通过使用“文字分割填充换行符”的方式来实现QLabel文字垂直显示的效果，下面是效果图： 具体实现代码： #include "mainwindow.h" #include "ui_mainwindow.h"MainWindow:…...

编程日记 2024/11/6 3:17:35

蓬勃发展：移动开发——关于软件开发你需要知道些什么

一、前言移动开发一直都是软件开发领域中最有趣的领域之一，这是因为： 1、移动开发为“只有一个人”的开发团队提供了一个非常独特的机会，让他可以在相对较短的时间内建立一个实际的、可用的、有意义的应用程序； 2、移动开发也代…...

编程日记 2024/11/6 3:16:34

1095. 山脉数组中查找目标值

目录题目解法lambda在这是怎么用的？ 题目 （这是一个交互式问题 ） 你可以将一个数组 arr 称为山脉数组当且仅当： arr.length > 3 存在一些 0 < i < arr.length - 1 的 i 使得： arr[0] < arr[1] <…...

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

【深度学习】InstantIR：图片高清化修复

InstantIR——借助即时生成参考的盲图像修复新方法作者：Jen-Yuan Huang 等近年来，随着深度学习和计算机视觉技术的飞速发展，图像修复技术取得了令人瞩目的进步。然而，对于未知或复杂退化的图像进行修复，仍然是一个充满挑战的任务。针对这一难题，研究者们提出了 Insta…...

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

推荐一款PowerPoint转Flash工具：iSpring Suite

iSpring Suite是一款PowerPoint转Flash工具，使用iSpring Suite 8可以轻松的将PPT演示文档转换为对Web友好的Flash影片格式。软件界面简洁，使用方便。为什么要转换成flash格式呢?Flash格式的最大特点是体积小巧、易于分发，兼容所有的操作系统…...

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

如何搭建汽车行业AI知识库：定义+好处+方法步骤

在汽车行业，大型车企面临着员工众多、价值链长、技术密集和知识传播难等挑战。如何通过有效的知识沉淀与应用，提升各部门协同效率，快速响应客户咨询，降低销售成本，并开启体系化、可持续性的知识管理建设，成…...

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

创新材料科技：铜冷却壁助力高炉节能降耗

高炉用铜冷却壁是高炉内部的一种构件，通常用于高炉的炉身部分。它的主要功能是在高炉冶炼过程中冷却炉壁，以防止炉壁过热。铜冷却壁通常由铜制成，因为铜具有良好的导热性和耐腐蚀性，能够有效地将热量从高炉内部传导到外部&#xf…...

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

Proteus中单片机IO口外接LED输出低电平时，引脚却一直保持高电平的问题（已解决）

文章目录前言解决方法后记前言一个排阻接八个 LED，方便又省事，但出现了P1端口输出低电平后，仿真引脚却一直显示红色保持高电平不变，用电压表测量显示 2V 左右。这是仿真的问题，在用开发板时是不会遇到的&#xff…...

编程日记 2024/11/6 3:09:25

Obsidian vs Typora

引言近来几日，自己也算是用了一段时间的Obsidian了，也是有资格来说一下使用感受了。当前感觉是自己未来很长一段时间将会一直使用Obsidian了。 Typora vs Obsidian Typora 优点整体好看，简洁，所见即所得缺点：…...

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