JavaScript管理HTMLDOM元素(增删改查)
本文主要讲解JavaScript如何通过管理HTML上的DOM元素,其中包括如何查询、创建、修改以及删除具体功能和源码讲解。
增加
首先我们准备一个HTML框架和简单CSS样式,我对其中元素作用和关系进行一个简单说明。
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.container{width:200px;height:200px;border:1px solid gray;}</style></head><body><div id="a" class="container"><div id="b">1</div></div><button onclick="create()">点击创建一个元素</button><button onclick="del()">点击删除一个元素</button><button onclick="upd()">点击修改一个元素</button><button onclick="select()">点击查询a元素是否存在</button></body><script>function create(){let element=document.createElement('div')document.getElementById('a').insertAdjacentHTML('afterbegin','<span>新增成功</span>')}function del(){let element=document.getElementById('b')element.parentNode.removeChild(element)}function upd(){document.getElementById('b').innerHTML='2'}function select(){if(document.getElementById('b')){alert('b元素依然存在')}else{alert('b元素已被删除')}}</script>
</html>
在上述代码中可以看到,我们有一个div、一个span子元素和四个按钮,这四个按钮分别是增删改查功能。
新增功能主要是通过,createElement关键词实现的,这个关键词用于创建元素。创建后还可以新增一些属性值和方法、样式等,需要用到setAttribute、value等等特性进行添加。这里就不赘述了,赋值给element后,用insertadjactHTML关键词对在id为a的父节点中新增,除了这个方法外还可以用appendChild方法来进行新增,就可以实现创建DOM元素在HTML中。实现效果图:
新增前:

新增后:
删除
删除方法:要删除元素ID.parendNode.removeChild(要删除元素ID)
在上述代码中,我们可以看到id为a的div是id为b的div的父节点,当我们想删除id为b的DOM时,就可以通过document,getElementById(‘id值’).parentNode来调用它的父节点,父节点中有个方法是removeChild(),就是移除它的某个子DOM元素。然后就可以删除了。
删除前:

删除后:

可以发现1消失了,1是id为b的HTML内容。这也就说明它被清理了。
修改
这里主要做了一个简单的修改,也就是如何修改DOM元素中的内容,这里我用的是innerHTML元素,也就是修改div中的内容,这里我是把1修改成2.
修改前:

修改后:

查询
可以通过以下三种方式查询DOM元素,分别是
document.getElementById(‘元素ID’):通过DOM元素ID查询
document.getElementsByClassName():通过DOM元素类名查询
document.getElementsByTagName():通过DOM元素标签名查询
用ID查询的多,因为ID查询自带的方法较多。
以上就是我们本文要讲解的全部内容。
相关文章:
JavaScript管理HTMLDOM元素(增删改查)
本文主要讲解JavaScript如何通过管理HTML上的DOM元素,其中包括如何查询、创建、修改以及删除具体功能和源码讲解。 增加 首先我们准备一个HTML框架和简单CSS样式,我对其中元素作用和关系进行一个简单说明。 <!DOCTYPE html> <html><he…...
RE2文本匹配实战
引言 今天我们来实现RE2进行文本匹配,模型实现参考了官方代码https://github.com/alibaba-edu/simple-effective-text-matching-pytorch。 模型实现 RE2模型架构如上图所示。它的输入是两个文本片段,所有组件参数除了预测层和对齐层外都是共享的。上图…...
实在智能携手中国电信翼支付,全球首款Agent智能体亮相2023数字科技生态大会
11月10日-13日,中国电信与广东省人民政府联合主办的“2023数字科技生态大会”在广州隆重举行。本届大会以“数字科技焕新启航”为主题,邀请众多生态合作伙伴全方位展示数字科技新成果,包括数字新消费、产业数字化、智能电子、人工智能大模型等…...
安全框架springSecurity+Jwt+Vue-1(vue环境搭建、动态路由、动态标签页)
一、安装vue环境,并新建Vue项目 ①:安装node.js 官网(https://nodejs.org/zh-cn/) 2.安装完成之后检查下版本信息: ②:创建vue项目 1.接下来,我们安装vue的环境 # 安装淘宝npm npm install -g cnpm --registryhttps:/…...
React整理总结(三)
1.props和state的更新 父组件重新render时,所有的子组件也会调用render()函数。shouldComponentUpdate(nextProp, nextState) shouldComponentUpdate(nextProps, nextState) {if (equal(nextProps, this.props) && equa…...
天气这么好,都外出了。顺便了解一下漏桶算法
看到标题,你想到了些什么呢? 又是一个阳光明媚的周末,大家都外出了,路上到处堵车,尤其是各桥梁、隧道入口处,很多车排队等着进入,而出口处就像一个漏桶一样,一辆车接着一辆车有序且…...
【FPGA】Verilog:实现 RS 触发器 | Flip-Flop | 使用 NOR 的 RS 触发器 | 使用 NAND 的 RS 触发器
目录 0x00 RS 触发器(RS Flip-Flop) 0x01 实现 RS 触发器 0x02 使用 NOR 的 RS 触发器 0x03 使用 NAND 的 RS 触发器 0x00 RS 触发器(RS Flip-Flop) 触发器(Flip-Flop)是一种带有时钟的二进制存储设备…...
【技术追踪】SAM(Segment Anything Model)代码解析与结构绘制之Mask Decoder
论文:Segment Anything 代码:https://github.com/facebookresearch/segment-anything 系列篇: (1)【技术追踪】SAM(Segment Anything Model)代码解析与结构绘制之Image Encoder &am…...
认识Tomcat
文章目录 什么是tomcat?tomcat的使用tomcat的下载tomcat的目录结构tomcat的启动在tomcat上部署页面通过浏览器访问部署的页面 学习servlet的原因 什么是tomcat? 盖棺定论:Tomcat是一个HTTP服务器。 我们接下来要长期学习的东西都是关于前后…...
c语言通信之串口通信
在C语言中,可以使用串口通信、网络通信等多种方式实现计算机之间的通信。其中,串口通信通常用于近距离、低速率的通信,而网络通信则适用于远距离、高速率的通信。 下面以串口通信为例,介绍在C语言中如何实现串口通信。 1.打开串…...
软考-高级-系统架构设计师教程(清华第2版)【第16章 嵌入式系统架构设计理论与实践(P555~613)-思维导图】
软考-高级-系统架构设计师教程(清华第2版)【第16章 嵌入式系统架构设计理论与实践(P555~613)-思维导图】 课本里章节里所有蓝色字体的思维导图...
2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-B卷
2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-B卷 2024年山东省职业院校技能大赛中职组 “网络安全”赛项竞赛试题-B卷A模块基础设施设置/安全加固(200分)A-1:登录安全加固(Windows, Linux)A-2&#…...
【Python数据结构与算法】——(线性结构)精选好题分享,不挂科必看系列
🌈个人主页: Aileen_0v0🔥系列专栏:<<Python数据结构与算法专栏>>💫个人格言:"没有罗马,那就自己创造罗马~" 时间复杂度大小比较 1.time complexity of algorithm A is O(n^3) while algorithm B is O(2^n). Which o…...
大数据-之LibrA数据库系统告警处理(ALM-12054 证书文件失效)
告警解释 系统在每天二十三点检查当前系统中的证书文件是否失效(即当前集群中的证书文件是否过期,或者尚未生效)。如果证书文件失效,产生该告警。 当重新导入一个正常证书,并且状态不为失效状态,该告警恢…...
Linux 之 journalctl 查看系统与 kernel 日志
目录 1. Linux 之 journalctl 查看系统与 kernel 日志 1. Linux 之 journalctl 查看系统与 kernel 日志 1 概述 日志管理工具 journalctl 是 centos7 上专有的日志管理工具, 该工具是从 message 这个文件里读取信息。Systemd 统一管理所有 Unit 的启动日志。带来的好处就是, …...
【PTA题目】7-3 冰雹猜想。 分数 10
7-3 冰雹猜想。 分数 10 全屏浏览题目 切换布局 作者 赵静静 单位 浙江工贸职业技术学院 冰雹猜想的内容是:任何一个大于1的整数n,按照n为偶数则除等2,n为奇数则乘3后再加1的规则不断变化,最终都可以变化为1。 例如ÿ…...
springBoot 配置druid多数据源 MySQL+SQLSERVER
1:pom 文件引入数据 <dependency> <groupId>com.alibaba</groupId> <artifactId>druid-spring-boot-starter</artifactId> <version>1.1.0</version> </dependency>…...
二叉树的创建与遍历
目录 前言: 二叉树的概念与结构 二叉树的链式存储 二叉树的创建 二叉树的销毁 二叉树结点个数计算 二叉树叶子结点个数计算 二叉树第k层节点个数的计算 二叉树高度的计算 二叉树查找值为x的结点 二叉树的遍历 二叉树的前序遍历 二叉树的中序遍历 二叉树…...
Mysql相关操作命令合集
参考文档:2021-06-25MySQL8.0创建用户和权限控制 - 简书 mysql登陆命令: mysql -u用户名 -p密码; 若遇到复杂密码,包含特殊字符,则需要做转义(以下密码为:rootry?elyl!): mysql…...
前端开发学习 (一) 搭建Vue基础环境
一、环境搭建 1、安装nodejs #下载地址 https://nodejs.org/dist/v20.9.0/node-v20.9.0-x64.msi 2、配置环境变量 上面下载完安装包后自行安装,安装完成后安装下图操作添加环境变量 #查看版本 node --version v20.9.0# npm --version 10.1.03、配置npm加速源 np…...
后进先出(LIFO)详解
LIFO 是 Last In, First Out 的缩写,中文译为后进先出。这是一种数据结构的工作原则,类似于一摞盘子或一叠书本: 最后放进去的元素最先出来 -想象往筒状容器里放盘子: (1)你放进的最后一个盘子(…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候,遇到了一些问题,记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)
宇树机器人多姿态起立控制强化学习框架论文解析 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一) 论文解读:交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
R语言速释制剂QBD解决方案之三
本文是《Quality by Design for ANDAs: An Example for Immediate-Release Dosage Forms》第一个处方的R语言解决方案。 第一个处方研究评估原料药粒径分布、MCC/Lactose比例、崩解剂用量对制剂CQAs的影响。 第二处方研究用于理解颗粒外加硬脂酸镁和滑石粉对片剂质量和可生产…...
深度学习之模型压缩三驾马车:模型剪枝、模型量化、知识蒸馏
一、引言 在深度学习中,我们训练出的神经网络往往非常庞大(比如像 ResNet、YOLOv8、Vision Transformer),虽然精度很高,但“太重”了,运行起来很慢,占用内存大,不适合部署到手机、摄…...
【java】【服务器】线程上下文丢失 是指什么
目录 ■前言 ■正文开始 线程上下文的核心组成部分 为什么会出现上下文丢失? 直观示例说明 为什么上下文如此重要? 解决上下文丢失的关键 总结 ■如果我想在servlet中使用线程,代码应该如何实现 推荐方案:使用 ManagedE…...
无需布线的革命:电力载波技术赋能楼宇自控系统-亚川科技
无需布线的革命:电力载波技术赋能楼宇自控系统 在楼宇自动化领域,传统控制系统依赖复杂的专用通信线路,不仅施工成本高昂,后期维护和扩展也极为不便。电力载波技术(PLC)的突破性应用,彻底改变了…...
