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

JavaScript HTML DOM 元素 (节点)

news 2026/2/6 1:20:39

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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2026/2/5 15:43:28

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

编程新知 2025/11/5 13:03:58

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/12/20 7:42:02

UE5 学习系列（三）创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

编程新知 2026/1/24 10:00:31

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

编程新知 2025/8/27 14:38:58

Mac软件卸载指南，简单易懂！

刚和Adobe分手&#xff0c;它却总在Library里给你写"回忆录"&#xff1f;卸载的Final Cut Pro像电子幽灵般阴魂不散&#xff1f;总是会有残留文件&#xff0c;别慌&#xff01;这份Mac软件卸载指南&#xff0c;将用最硬核的方式教你"数字分手术"&#xff0…...

编程新知 2026/1/30 4:16:04

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

编程新知 2025/10/24 12:31:26

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/1/29 16:47:31

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2026/1/29 14:27:00

以光量子为例，详解量子获取方式

光量子技术获取量子比特可在室温下进行。该方式有望通过与名为硅光子学&#xff08;silicon photonics&#xff09;的光波导&#xff08;optical waveguide&#xff09;芯片制造技术和光纤等光通信技术相结合来实现量子计算机。量子力学中&#xff0c;光既是波又是粒子。光子本…...

编程新知 2026/1/30 10:30:45