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

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

news 2025/7/10 12:53:33

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 交互&#xff0c;动态地修改网页内容和样式。而实现这一功能的核心就是 DOM&#xff08;文档对象模型&#xff09;。 一、什么是 DOM&#xff1f; DOM 是文档对象模型&#xff08;Document Object Model&#xff09;的缩写。它…...

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

速盾：cdn域名与ip区别

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

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

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

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

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

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

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

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

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

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

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

SQL 语法学习

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

编程日记 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&#xff1b;&#xff09; #数量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

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

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

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

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

编程日记 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是一款功能强大的磁盘分区工具&#xff0c;它支持Windows和Mac OS X系统&#xff0c;可以用于管理硬盘分区&#xff0c;包括扩容Mac OS X的Apple APFS分区。然而&#xff0c;直接使用DiskGenius来扩容Mac OS X的APFS分区可能存在一定的风险&#xff0c;因为不是专门为…...

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

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

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

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

Unity照片墙效果

Unity照片墙效果&#xff0c;如下效果展示 。 工程源码...

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

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

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

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

【1】基础概念

文章目录 一、特点二、基础语法注意三、官方编程指南四、go 语言标准库 API 一、特点 golang 一个 go 文件都要归属到一个包&#xff0c;需要进行申明。天然的并发&#xff1a;golang 从语言层面支持大并发。每个 go 文件都必须要归属到一个包中。执行 go 文件&#xff1a;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)方法&#xff0c;背后是为了应对大模型中的计算、存储和数据适应性的挑战 1.为什么有微调&#xff1f; 深度学习模型越来越大&#xff0c;尤其是 NLP 中的预训练语言模型(BERT, GPT)系列。如果从…...

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

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

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

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

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

1.重定向技术的 5 种模式 &#xff08;1&#xff09;标准覆盖输出重定向 &#xff08;2&#xff09;标准追加输出重定向 &#xff08;3&#xff09;错误覆盖输出重定向 &#xff08;4&#xff09;错误追加输出重定向 &#xff08;5&#xff09;输入重定向2.输入输出重定向 输入…...

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

手游刚开服就被攻击怎么办？如何防御DDoS？

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

编程新知 2025/7/7 12:11:39

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning（提示调优） 核心思想：固定预训练模型参数，仅学习额外的连续提示向量（通常是嵌入层的一部分）。实现方式：在输入文本前添加可训练的连续向量（软提示），模型只更新这些提示参数。优势：参数量少（仅提…...

编程新知 2025/7/10 2:35:35

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销&#xff0c;平衡网络负载&#xff0c;延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/7/10 2:44:05

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/7/8 3:06:16

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/7/5 0:21:39

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/7/9 12:29:39

React19源码系列之 事件插件系统

事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...

编程新知 2025/7/7 0:36:41

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2025/7/9 12:41:02

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

编程新知 2025/7/9 4:32:09

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2025/7/5 19:39:42