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

JavaScript HTML DOM 元素 (节点)

news 2026/5/29 23:19:20

HTML DOM 是指 HTML 文档对象模型，它是一种用于创建和处理 HTML 页面的标准 API。在 JavaScript 中，HTML DOM 可以被用来操作和修改网页的内容和结构。在本篇文章中，我们将详细探讨 JavaScript HTML DOM 元素 (节点)的作用以及在实际工作中的用途。

HTML DOM 元素 (节点) 的基础知识

HTML DOM 中的元素是指网页中的标签，如 <p>、<div>、<img> 等。在 HTML DOM 中，每个元素都可以作为一个节点进行处理。这些节点可以被 JavaScript 用来读取和修改网页的内容和结构。

在 HTML DOM 中，每个节点都有其自己的属性和方法。以下是一些常用的属性和方法：

  • innerHTML：获取或设置节点的 HTML 内容
  • textContent：获取或设置节点的文本内容
  • getAttribute：获取节点的属性值
  • setAttribute：设置节点的属性值
  • appendChild：在节点的末尾添加一个新的子节点
  • removeChild：从节点中删除一个子节点
  • parentNode：获取节点的父节点
  • childNodes：获取节点的所有子节点

下面是一个简单的示例代码，它演示了如何使用 JavaScript HTML DOM 元素 (节点) 来读取和修改一个网页的内容：

<!DOCTYPE html>
<html>
<head><title>DOM Elements</title>
</head>
<body><h1>My Heading</h1><p>My paragraph.</p><script>// 获取 h1 元素的文本内容var heading = document.getElementsByTagName("h1")[0].textContent;console.log(heading);// 修改 p 元素的 HTML 内容document.getElementsByTagName("p")[0].innerHTML = "My new paragraph.";</script>
</body>
</html>

在上面的代码中，我们使用了 getElementsByTagName 方法来获取网页中的 <h1> 和 <p> 元素。然后我们使用 textContent 和 innerHTML 属性来读取和修改元素的内容。

HTML DOM 元素 (节点) 的用途

HTML DOM 元素 (节点) 在 JavaScript 中有着广泛的应用。下面是一些常见的用途：

动态修改网页的内容和结构

使用 HTML DOM 元素 (节点)，我们可以动态地修改网页的内容和结构。例如，在一个网页上，我们可能需要根据用户的输入来动态地添加或删除一些元素。以下是一个简单的示例代码，它演示了如何使用 JavaScript HTML DOM 元素 (节点) 来添加和删除一个网页元素：

<!DOCTYPE html>
<html>
<head><title>DOM Elements</title>
</head>
<body><div id="myDiv"><p>My paragraph.</p></div><button onclick="add()">Add Element</button><button onclick="remove()">Remove Element</button><script>// 添加一个新的子元素function add() {var div = document.getElementById("myDiv");var p = document.createElement("p");var text = document.createTextNode("My new paragraph.");p.appendChild(text);div.appendChild(p);}// 删除子元素function remove() {var div = document.getElementById("myDiv");var p = div.getElementsByTagName("p")[0];div.removeChild(p);}</script>
</body>
</html>

在上面的代码中，我们使用了 createElement 和 createTextNode 方法来创建一个新的 <p> 元素和其文本内容。然后我们使用 appendChild 方法将这个新的元素添加到 myDiv 元素中。最后，我们使用 removeChild 方法来删除 myDiv 元素中的第一个 <p> 子元素。

动态处理网页事件

HTML DOM 元素 (节点) 也可以用来处理网页上的事件，例如单击、鼠标移动、键盘输入等事件。我们可以使用 JavaScript 的事件监听器来监听这些事件，并在事件触发时执行相应的操作。以下是一个简单的示例代码，它演示了如何使用 JavaScript HTML DOM 元素 (节点) 来处理单击事件：

<!DOCTYPE html>
<html>
<head><title>DOM Elements</title>
</head>
<body><button id="myButton">Click me</button><script>// 获取按钮元素var button = document.getElementById("myButton");// 添加单击事件监听器button.addEventListener("click", function() {alert("Button clicked!");});</script>
</body>
</html>

在上面的代码中，我们使用了 addEventListener 方法来监听按钮元素的单击事件。当按钮被单击时，将弹出一个警告框来显示一个消息。

在本文中，我们学习了 HTML DOM 元素 (节点) 的基本知识，包括如何使用 JavaScript 代码来动态创建、访问和操作 HTML 元素。我们还介绍了 HTML DOM 元素 (节点) 的一些实际用途，例如动态更新网页内容、处理网页事件、创建和操作表格等。

HTML DOM 元素 (节点) 是 Web 开发中非常重要的一个概念。了解 HTML DOM 元素 (节点) 可以让我们更加灵活地控制网页的结构和内容，从而提高 Web 应用程序的交互性和动态性。

相关文章：

JavaScript HTML DOM 元素 (节点)

HTML DOM 是指 HTML 文档对象模型&#xff0c;它是一种用于创建和处理 HTML 页面的标准 API。在 JavaScript 中&#xff0c;HTML DOM 可以被用来操作和修改网页的内容和结构。在本篇文章中&#xff0c;我们将详细探讨 JavaScript HTML DOM 元素 (节点)的作用以及在实际工作中的…...

编程日记 2023/2/15 11:15:01

mybatis-plus ---2

mybatis-plus插件 官网地址 分页插件 MyBatis Plus自带分页插件&#xff0c;只要简单的配置即可实现分页功能 配置并使用自带分页插件 Configuration MapperScan("com.itzhh.mapper")//可以将主类中的注解移到此处 public class MybatisPlusConfig {Beanpublic …...

编程日记 2023/2/15 11:13:52

如何在Qt中设置背景图片，且不覆盖其它控件

正常情况&#xff0c;我们直接通过在样式表里设置背景图片会出现背景图片覆盖其它控件的情况&#xff0c;比如下面操作&#xff1a; 首先右击空白处&#xff0c;点击改变样式表。 然后选择background-image 然后点击铅笔图标 之后我们要先添加前缀&#xff0c;也就是我们…...

编程日记 2023/2/15 11:12:42

PMP考前冲刺2.14 | 2023新征程，一举拿证

承载2023新一年的好运让我们迈向PMP终点一起冲刺&#xff01;一起拿证&#xff01;每日5道PMP习题助大家上岸PMP&#xff01;&#xff01;&#xff01;PMP项目管理题目1-2&#xff1a;1.公司了解到一个项目机会&#xff0c;领导让之前做过类似项目的项目经理报告一个粗略的成本…...

编程日记 2023/2/15 11:11:31

feign进行文件上传报错解决方案及有多个入参时的注意事项

一、情景回顾1、简单的文件上传的接口/*** 文件上传MultipartFile格式** param multipartFile 源文件* param filename 自定义文件名称&#xff0c;允许为空&#xff0c;为空时直接从源文件中拿* return*/RequestMapping("/uploadFileForMultipartFile")LogModuleAnn…...

编程日记 2023/2/15 11:10:21

java 枚举类型enum的用法详解

Java Enum原理 public enum Size{ SMALL, MEDIUM, LARGE, EXTRA_LARGE }; 实际上&#xff0c;这个声明定义的类型是一个类&#xff0c;它刚好有四个实例&#xff0c;在此尽量不要构造新对象。 因此&#xff0c;在比较两个枚举类型的值时&#xff0c;永远不需要调用equals方法…...

编程日记 2023/2/15 11:09:13

Java 基础面试题——关键字

目录1.Java 中的关键字是指什么&#xff1f;有哪些关键字&#xff1f;2.instanceof 关键字的作用是什么&#xff1f;3.访问修饰符 public、private、protected、以及不写&#xff08;default&#xff09;时的区别&#xff1f;4.Java 中有没有 goto 关键字?5.在 Java 中&#x…...

编程日记 2023/2/15 11:08:05

C++——运算符重载

1、运算符重载的概念 运算符重载&#xff0c;就是对已有的运算符重新进行定义&#xff0c;赋予其另一种功能&#xff0c;以适应不同的数据类型。运算符重载的目的是让语法更加简洁运算符重载不能改变本来寓意&#xff0c;不能改变基础类型寓意运算符重载的本质是另一种函数调用…...

编程日记 2023/2/15 11:06:56

前端食堂技术周刊第 70 期：Volar 的新开端、Lighthouse 10、良好的组件设计、React 纪录片、2022 大前端总结

美味值&#xff1a;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f;&#x1f31f; 口味&#xff1a;黑巧克力 食堂技术周刊仓库地址&#xff1a;https://github.com/Geekhyt/weekly 本期摘要 Volar 的新开端Chrome 110 的新功能Lighthouse 10Nuxt v3.2.0加速 JavaSc…...

编程日记 2023/2/15 11:05:49

react路由详解

在学习react路由之前&#xff0c;我们肯定需要安装路由。大家先运行如下命令安装路由。安装之后随我一起探索react路由。 安装 版本v6 npm i react-router-dom -S 页面准备 创建两个文件夹 pages和 router pages文件夹里面放的是页面 router文件夹里面是进行路由配置 路由…...

编程日记 2023/2/15 11:04:41

mysql数据库完全备份和增量备份与恢复

mysql数据备份&#xff1a; 数据备份方式 物理备份&#xff1a; 冷备&#xff1a;.冷备份指在数据库关闭后,进行备份,适用于所有模式的数据库热备&#xff1a;一般用于保证服务正常不间断运行&#xff0c;用两台机器作为服务机器&#xff0c;一台用于实际数据库操作应用,另外…...

编程日记 2023/2/15 11:03:35

CF1667E Centroid Probabilities

题目描述 对于所有点数为 nnn 的树&#xff0c;如果其满足 对于所有 i∈[2,n]i\in [2,n]i∈[2,n]&#xff0c;与 iii 相连的 jjj 中有且只有一个点 jjj 满足 j<ij<ij<i &#xff0c;那么我们称其为好树 对于 1∼n1\sim n1∼n 每个点求出来有多少好树满足重心为 iii …...

编程日记 2023/2/15 11:02:27

全网详细总结com.alibaba.fastjson.JSONException: syntax error, position at xxx常见错误方式

文章目录1. 复现问题2. 分析问题3. 解决问题4. 该错误的其他解决方法5. 重要补充1. 复现问题 今天在JSONObject.parse(json)这个方法时&#xff0c;却报出如下错误&#xff1a; com.alibaba.fastjson.JSONException: syntax error, position at 0, name usernameat com.aliba…...

编程日记 2023/2/15 11:01:20

快速部署个人导航页：美好的一天从井然有序开始

很多人都习惯使用浏览器自带的收藏夹来管理自己的书签&#xff0c;然而收藏夹存在着一些问题。 经过长时间的累积&#xff0c;一些高频使用的重要网站和偶尔信手收藏的链接混在了一起&#xff0c;收藏夹因为内容过多而显得杂乱无章&#xff1b;收藏夹没有什么美观可言&#xf…...

编程日记 2023/2/15 11:00:15

【Python】如何在 Python 中使用“柯里化”编写干净且可重用的代码

对于中级Python开发者来说&#xff0c;了解了Python的基础语法、库、方法&#xff0c;能够实现一些功能之后&#xff0c;进一步追求的就应该是写出优雅的代码了。 这里介绍一个很有趣的概念“柯里化”。 所谓柯里化&#xff08;Currying&#xff09;是把接受多个参数的函数变换…...

编程日记 2023/2/15 10:59:11

ROS笔记（4）——发布者Publisher与订阅者Subscribe的编程实现

发布者 以小海龟的话题消息为例,编程实现发布者通过/turtle1/cmd_vel 话题向 turtlesim节点发送消息&#xff0c;流程如图 步骤一 创建功能包&#xff08;工作空间为~/catkin_ws/src&#xff09; $ cd ~/catkin_ws/src $ catkin_create_pkg learning_topic roscpp rospy s…...

编程日记 2023/2/15 10:58:04

Linux进程概念（一）

文章目录Linux进程概念&#xff08;一&#xff09;1. 冯诺依曼体系结构2. 操作系统(Operator System)2.1 考虑2.2 如何理解操作系统对硬件做管理&#xff1f;2.3 操作系统为什么要对软硬件资源做管理呢&#xff1f;2.4 系统调用和库函数概念2.5 计算机体系结构3. 进程的初步理解…...

编程日记 2023/2/15 10:56:58

Leetcode.1124 表现良好的最长时间段

题目链接 Leetcode.1124 表现良好的最长时间段 Rating &#xff1a; 1908 题目描述 我们认为当员工一天中的工作小时数大于 8 小时的时候&#xff0c;那么这一天就是「劳累的一天」。 所谓「表现良好的时间段」&#xff0c;意味在这段时间内&#xff0c;「劳累的天数」是严格…...

编程日记 2023/2/15 10:55:53

达梦数据库会话、事务阻塞排查步骤

查询阻塞的事务IDselect * from v$trxwait order by wait_time desc;--单机select * from v$dsc_trxwait order by wait_time desc;–DSC集群查询阻塞事务的会话信息select sf_get_session_sql(sess_id),* from v$sessions where trx_id69667;--单机select sf_get_session_sql(…...

编程日记 2023/2/15 10:54:45

sqlServer 2019 开发版(Developer)下载及安装

下载软件 官网只有2022的&#xff0c;2019使用百度网盘进行下载 安装下崽器 选择自定义安装 选择语言、以及安装位置 点击“安装” 安装 SQL Server 可能的故障 以上步骤安装后会弹出以上界面&#xff0c;如果未弹出&#xff0c;手动去安装目录下点击 SETUP.EXE 文件…...

编程日记 2023/2/15 10:53:34

机器学习结合基因无关通路映射：从临床数据挖掘新药靶点

1. 项目概述&#xff1a;当机器学习遇见代谢通路&#xff0c;如何从数据中“挖”出新药靶点&#xff1f;在生物医学研究的前沿&#xff0c;我们正面临一个核心矛盾&#xff1a;一方面&#xff0c;我们拥有海量的临床数据&#xff0c;比如血糖、血压、BMI等指标&#xff1b;另一…...

编程新知 2026/5/26 3:22:05

Android 11开发避坑：为什么你的App获取的Wifi MAC地址总是变？手把手教你配置固定MAC

Android 11开发实战&#xff1a;彻底解决Wifi MAC地址随机化问题最近在开发一个设备管理系统时&#xff0c;遇到了一个棘手的问题&#xff1a;我们的App在Android 11设备上获取的Wifi MAC地址每次都不一样&#xff0c;导致基于MAC地址的设备识别功能完全失效。经过一周的深入研…...

编程新知 2026/5/26 3:11:57

政企数据安全：危机与出路

随着数字化转型的浪潮席卷全球&#xff0c;公共部门积累的数据量呈爆炸式增长。从公民个人信息到公共服务记录&#xff0c;从财政预算到基础设施管理数据——这些宝贵资源在提升政府治理效率的同时&#xff0c;也悄然成为网络犯罪分子的“新猎物”。当公共数据逐渐成为数字时代…...

编程新知 2026/5/26 1:39:10

2026年一键生成论文工具对比实测：5款神器从选题到格式全流程护航

写论文的焦虑&#xff0c;是每个科研人和学生都心照不宣的“隐形压力”。选题无从下手&#xff0c;文献检索耗时费力&#xff0c;逻辑框架反复推翻&#xff0c;格式排版让人抓狂&#xff0c;查重降重更是像在和系统玩“猫鼠游戏”。2026年的AI工具早已不是过去那种“打字机”&a…...

编程新知 2026/5/25 23:31:29

AI圈神秘领袖Ilya一幅画引爆全网，OpenAI三件大事暗示AGI时代将至？

AI圈神秘精神领袖Ilya在Instagram上传一幅画引发疯狂解读&#xff0c;与此同时&#xff0c;OpenAI连续公布数学成果、升级Codex、筹备IPO&#xff0c;释放AGI到来的强烈信号。Ilya画作引猜测Ilya上传的画中&#xff0c;罗丹的「思考者」踩在芯片Die Shot上&#xff0c;右下角签…...

编程新知 2026/5/25 23:25:13

Postgresql基础实践教程（九）

⭐️⭐️⭐️⭐️⭐️ 完整数据详见 练习数据免费 ⭐️⭐️⭐️⭐️⭐️ 七十二、WITH查询&#xff08;公用表表达式CTE&#xff09; 1. SELECT 中的 WITH 2. 递归查询 3. 公用表表达式的物化 4. WITH中的数据修改语句 WITH提供了一种在主查询中写辅助语句的方法。这些语…...

编程新知 2026/5/25 22:50:43

武汉国电华美串联谐振试验装置，现场用着心里有底

在高压试验现场干了这么多年&#xff0c;这位老师傅常说&#xff0c;一台好的串联谐振装置&#xff0c;就是试验人员的胆。面对GIS、大型变压器、超高压电缆这些大电容试品&#xff0c;没有趁手的谐振设备&#xff0c;交流耐压试验根本没法干。16875kVA/225kV这个规格&#xff…...

编程新知 2026/5/25 22:06:17

保姆级教程：在Ubuntu上配置Frida环境，搞定Android App的IO重定向与签名绕过

在Ubuntu上构建Android逆向工程环境&#xff1a;Frida实战与IO重定向技术解析 对于习惯Linux环境的安全研究人员而言&#xff0c;Windows-centric的逆向工具链往往带来诸多不便。本文将系统性地介绍如何在Ubuntu上搭建完整的Android逆向环境&#xff0c;并深入探讨如何利用Frid…...

编程新知 2026/5/25 20:53:12

鸿蒙HarmonyOS 5与Unity跨运行时通信实战指南

1. 这不是“调个API”那么简单&#xff1a;为什么鸿蒙Unity通信总在临门一脚卡住我第一次把Unity打包的AR模块塞进HarmonyOS 5 App里时&#xff0c;信心满满——毕竟文档里写着“支持JS/ArkTS调用Native能力”&#xff0c;Unity也标榜“跨平台通用”。结果呢&#xff1f;App一启…...

编程新知 2026/5/25 16:19:41

每日一书㉗ | 刻意练习：为什么有些人努力一辈子还是平庸？

“本文来自「乐想屋」公众号&#xff0c;系列更新[每日一书]&#xff0c;每次5分钟&#xff0c;帮你把书读薄&#xff0c;把知识用活”先问你一个问题。你身边有没有这样的人&#xff1a;入行时间比你短&#xff0c;但能力已经甩你好几条街。他们好像没有特别刻苦&#xff0c;但…...

编程新知 2026/5/25 15:26:07