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关键词实现的,这个关键词用于创建元素。创建后还可以新增一些属性值和方法、样式等,需要用到setAttributevalue等等特性进行添加。这里就不赘述了,赋值给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查询自带的方法较多。

以上就是我们本文要讲解的全部内容。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/162312.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

2023年道路运输企业主要负责人证考试题库及道路运输企业主要负责人试题解析

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年道路运输企业主要负责人证考试题库及道路运输企业主要负责人试题解析是安全生产模拟考试一点通结合&#xff08;安监局&#xff09;特种作业人员操作证考试大纲和&#xff08;质检局&#xff09;特种设备作业人…

C#特性(Attribute)

C#特性&#xff08;Attribute&#xff09;是一种在程序中添加元数据的机制&#xff0c;它可以为代码提供额外的信息和指示。通过使用特性&#xff0c;我们可以为类、方法、属性等元素添加标记&#xff0c;以便在运行时进行更多的操作和决策。 C#特性是一种声明式编程的工具&…

计算机网络的体系结构

目录 一. 计算机体系结构的形成二. 协议与层次划分2.1 数据传输过程2.2 什么是网络协议2.3 网络协议的三要素2.4 协议有两种形式2.4 各层协议2.5 什么是复用和分用 \quad 一. 计算机体系结构的形成 \quad 计算机网络是一个非常复杂的系统, 相互通信的两个计算机系统必须高度协调…

二叉树中的深搜之二叉树的所有路径

257. 二叉树的所有路径 - 力扣&#xff08;LeetCode&#xff09; 对于二叉树的深度搜索&#xff0c;要学会从以下三个角度来去看待问题&#xff1a; 1. 全局变量&#xff0c;有时候全局变量会减少参数的个数&#xff0c;简化很多流程&#xff1b; 这道题目&#xff0c;要返回根…

linux配置固定ip(两种方法)

首先刚下载的vm&#xff0c;刚创建的虚拟机&#xff0c;肯定是需要配置ip的 其次以前我的每次都是设置自动ip&#xff0c;这样每次登录都会自动获取ip地址&#xff0c;并且每次的ip都不相同。 ~方法&#xff1a; 开机登陆后 1)Cd /etc/sysconfig/network-scripts 2)Vi ifcf…

vue3的Watch使用详解

vue官网提到&#xff1a; watch 的第一个参数可以是不同形式的“数据源”&#xff1a;它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组&#xff1a; 1.监听单个Ref 2.监听一个getter函数 当然只修x或者y其中一个的值&#xff0c;…

LeetCode - 26. 删除有序数组中的重复项 (C语言,快慢指针,配图)

力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 思路一&#xff1a;快慢指针 在数组中&#xff0c;快慢指针就是两个整数下标&#xff0c;定义 fast 和 slow 这里我们从下标1开始&#xff08;下标0的数据就1个&#xff0c;没有重复项&#xff09;&…

Java Web 实战 19 - What‘s HTTP ?

Whats HTTP ? 一 . HTTP 是什么 ?1.1 理解 HTTP 协议的工作过程1.2 HTTP 的报文格式1.2.1 准备工作1.2.2 认识 HTTP 协议的报文详情请求报文请求响应 二 . HTTP 请求报文2.1 URLURL 的 encode 2.2 HTTP 协议中的方法GETPOST常见面试题 : GET 和 POST 之间的区别 2.3 认识请求…

Java Web——JavaScript基础

1. 引入方式 JavaScript程序不能独立运行&#xff0c;它需要被嵌入HTML中&#xff0c;然后浏览器才能执行 JavaScript 代码。 通过 script 标签将 JavaScript 代码引入到 HTML 中&#xff0c;有3种方式&#xff1a; 1.1. 内嵌式(嵌入式) 直接写在html文件里&#xff0c;用s…

继承语法详解

继承语法详解 一:继承1&#xff1a;什么是继承 二&#xff1a;访问成员变量三&#xff1a;访问成员方法四&#xff1a;访问父类的成员变量和成员方法super关键字super和this关键字的区别 五&#xff1a;子类的构造方法六&#xff1a;代码块七&#xff1a;final关键字八&#xf…

Vulhub靶场-KIOPTRIX: LEVEL 1

目录 环境配置 端口扫描 漏洞发现 mod_ssl漏洞利用 Samba远程代码执行漏洞利用 环境配置 首先去官网下载靶场导入到虚拟机中 下载地址&#xff1a;Kioptrix: Level 1 (#1) ~ VulnHub 下载完成之后导入到vmware中 这里需要改nat&#xff0c;桥接模式的靶机拿不到IP&…

kubenetes-pod高可用

一、概述 实现pod层面的高可用&#xff0c;需要避免容器进程被终止避免Pod被驱逐&#xff1a; 设置合理的resources.memory limits 防止容器进程被 OOMKill&#xff0c;防止Pod被驱逐&#xff1b;设置合理的emptydir.sizeLimit 并且确保数据写入不超过emptyDir的限制&#xf…

【LeetCode刷题-双指针】--977.有序数组的平方

977.有序数组的平方 方法&#xff1a;双指针 由于数组是升序排序的&#xff0c;如果所有的数都是非负的&#xff0c;那么数组平方后&#xff0c;仍然保持升序&#xff0c;但数组中有负数&#xff0c;将每个数平方后&#xff0c;数组就会降序 需要找到数组中负数与非负数的分界…

Lec14 File systems 笔记

文件系统中核心的数据结构就是inode和file descriptor 分层的文件系统&#xff1a; 在最底层是磁盘&#xff0c;也就是一些实际保存数据的存储设备&#xff0c;正是这些设备提供了持久化存储。在这之上是buffer cache或者说block cache&#xff0c;这些cache可以避免频繁的读…

springboot321基于java的校园服务平台设计与开发

交流学习&#xff1a; 更多项目&#xff1a; 全网最全的Java成品项目列表 https://docs.qq.com/doc/DUXdsVlhIdVlsemdX 演示 项目功能演示&#xff1a; ————————————————

前端实现界面切换主题

✨ 目录 ▷ 样式切换主题▷ 变量设置主题 ▷ 样式切换主题 常用的主题切换实现方式之一&#xff0c;就是通过 link 标签的 rel 属性来实现的当 rel 标签的值是 alternate&#xff0c;就代表该样式是可以替换的title 属性要加就全加上或者全不加&#xff0c;因为 title 会导致系…

重生之我是一名程序员 34

哈喽啊大家晚上好&#xff01; 今天给大家带来的知识是——库函数qsort。首先&#xff0c;给大家介绍一下qsort函数&#xff0c; qsort函数是C标准库中的一种排序函数&#xff0c;用于对数组中的元素进行快速排序。它接受四个参数&#xff1a;待排序数组的基地址&#xff0c;数…

搭建 AI 图像生成器 (SAAS) php laravel

今天来搭一套&#xff0c;AI 图像生成器 是基于 Openai DALLE 2 和 Openai DALLE 3 以及 Stability AI 和稳定扩散 API 构建的脚本&#xff0c;为用户提供了使用简单的提示和大小生成独特自定义图像的可能性。在这个平台上&#xff0c;创意得以快速、高效地实现&#xff0c;借助…

Go vs Rust:文件上传性能比较

在本文中&#xff0c;主要测试并比较了Go—Gin和Rust—Actix之间的多部分文件上传性能。 设置 所有测试都在配备16G内存的 MacBook Pro M1 上执行。 软件版本为&#xff1a; Go v1.20.5Rust v1.70.0 测试工具是一个基于 libcurl 并使用标准线程的自定义工具&#xff0c;能…

Java Web——JavaScript运算符与流程语句

1. 运算符 1.1. 算数运算符 数字是用来计算的&#xff0c;比如&#xff1a;乘法 * 、除法 / 、加法 、减法 - 等等&#xff0c;所以经常和算术运算符一起。 算术运算符&#xff1a;也叫数学运算符&#xff0c;主要包括加、减、乘、除、取余&#xff08;求模&#xff09;等 …