HTML之JavaScript DOM操作元素(2)
HTML之JavaScript DOM操作元素(2)
4.增删元素var element = document.createElement("元素名") 创建新元素父元素.appendChild(子元素) 在父元素中追加子元素父元素.insertBefore(新元素,参照元素) 在特定元素之前新增元素父元素.replaceChild(新元素,被替换元素) 替换特定元素元素.remove() 删除当前元素
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>小标题</title><script>/*步骤:1.获得document DOM树window.document(是window的属性)2.从document中获取要操作的元素1.直接获取var aaa = document.getElementById("username") // 根据元素的id值获取页面上的唯一一个元素,有同名的则返回找到的第一个var bbb = document.getElementsByTagName("input")var ccc = document.getElementsByName("aaa")var ddd = document.getElementsByClassName("a") 2.间接获取var cs = div01.children // 获取全部子元素var firstc = div01.firstElementChild// 通过父元素获取第一个子元素var lastc = div01.lastElementChild // 通过父元素获取最后一个子元素var parentE = mmm.parentElement // 通过子元素获取父元素var brotherPe = nnn.previousElementSibling // 获取前面的第一个元素var brotherNe = nnn.nextElementSibling // 获取后面的第一个元素3.对元素进行操作1.操作元素的属性 元素名.属性名 = ""2.操作元素的样式 元素.style.样式名 = "" 样式名 "-" 要进行驼峰转换3.操作元素的文本 元素名.innerText 只识别文本元素名.innerHTML 识别文本的同时可以识别HTML代码4.增删元素var element = document.createElement("元素名")// <li></li>父元素.appendChild(子元素) 在父元素中追加子元素父元素.insertBefore(新元素,参照元素) 在特定元素之前新增元素父元素.replaceChild(新元素,被替换元素) 替换特定元素元素.remove() 删除当前元素*/// 目标1 追加元素function addCs() {// 1.创建元素var newli = document.createElement("li")// <li></li>// 2.设置元素的属性和文本newli.id = "cs" //<li id = "cs"></li>newli.innerText = "长沙"//<li id = "cs">长沙</li>// 3.将元素作为子元素放入父元素中var parentE = document.getElementById("ul01")parentE.appendChild(newli)// 在父元素中追加子元素}// 目标2 特定位置追加元素function addBefore() {// 1.创建元素var newli = document.createElement("li")// <li></li>// 2.设置元素的属性和文本newli.id = "cs" //<li id = "cs"></li>newli.innerText = "长沙"//<li id = "cs">长沙</li>// 3.将元素作为子元素放入父元素中var parentE = document.getElementById("ul01")var brotherNe = document.getElementById("sz")//parentE.insertBefore(新元素,参照元素) 在特定元素之前新增元素parentE.insertBefore(newli, brotherNe)}// 目标3 替换元素function replaceSz() {// 1.创建元素var newli = document.createElement("li")// <li></li>// 2.设置元素的属性和文本newli.id = "cs" //<li id = "cs"></li>newli.innerText = "长沙"//<li id = "cs">长沙</li>// 3.元素替换var parentE = document.getElementById("ul01")var brotherNe = document.getElementById("sz")//parentE.replaceChild(新元素,被替换元素) 替换特定元素parentE.replaceChild(newli, brotherNe)}// 目标4 移除特定元素function removeSz() {// 哪个元素调用remove 就会执行删除哪个元素var brotherNe = document.getElementById("sz")brotherNe.remove(brotherNe)}// 目标5 清空列表元素function removeAll(){// 思路1 获取父元素,然后根据父元素获取父元素的第一个子元素,循环删除父元素的第一个子元素,直到为null,就相当于链表删除var dom1 = document.getElementById("ul01")var node = dom1.firstChildwhile(node!=null){node.remove()node = dom1.firstChild}// 思路2 要清空列表,就是要清空ul里面的东西,可以用标签中间夹文本的思路,直接清空ul标签中间的东西var dom2 = document.getElementById("ul01")dom2.innerHTML = "" // innerHTML 与 innerText均可}</script>
</head><body><ul id="ul01"><li id="bj">北京</li><li id="sh">上海</li><li id="sz">深圳</li><li id="gz">广州</li></ul><!-- 目标1 在城市列表的最后添加子标签 长沙 --><button id="btn01" onclick="addCs()"> 增加长沙</button><!-- 目标2 在城市列表深圳前增加子标签 长沙 --><button id="btn02" onclick="addBefore()"> 在深圳前增加长沙</button><!-- 目标3 替换目标元素 替换深圳为长沙 --><button id="btn03" onclick="replaceSz()"> 替换深圳为长沙</button><!-- 目标4 删除,删除深圳 --><button id="btn04" onclick="removeSz()"> 移除深圳</button><!-- 目标5 清空列表 --><button id="btn05" onclick="removeAll()"> 清空列表</button>
</body></html>
相关文章:
HTML之JavaScript DOM操作元素(2)
HTML之JavaScript DOM操作元素(2) 4.增删元素var element document.createElement("元素名") 创建新元素父元素.appendChild(子元素) 在父元素中追加子元素父元素.insertBefore(新元素,参照元素) 在特定元素之前新增元…...
智能优化算法:莲花算法(Lotus flower algorithm,LFA)介绍,提供MATLAB代码
一、 莲花算法 1.1 算法原理 莲花算法(Lotus flower algorithm,LFA)是一种受自然启发的优化算法,其灵感来源于莲花的自清洁特性和授粉过程。莲花的自清洁特性,即所谓的“莲花效应”,是由其叶片表面的微纳…...
【复习】计算机网络
网络模型 OSI 应用层:给应用程序提供统一的接口表示层:把数据转换成兼容另一个系统能识别的格式会话层:负责建立、管理、终止表示层实体之间的通信会话传输层:负责端到端的数据传输网络层:负责数据的路由、转发、分片…...
【R语言】读取CSV数据时,显示[1] PK...<0 行> (或0-长度的row.names)
一、问题 当我使用以下代码读取CSV数据后,发现使用head(data)显示[1] PK...<0 行> (或0-长度的row.names),如下截图所示。 # 尝试读取文件 data <- read.csv("C:\\Users\\11300\\Desktop\\test.csv", header TRUE) # 检查数据 hea…...
CentOS环境变量配置+解析
环境变量的作用就是让系统快速通过你的命令找到你的可执行程序,windows系统里也同理,也就是你每次输入个命令,系统就会找环境变量里到底有没有叫这个命令进程的 一、环境变量配置 1.编辑配置文件 vim /etc/profile export PATH$PATH:$JAVA…...
最新版本Exoplayer扩展FFmpeg音频软解码保姆级教程
ExoPlayer 是一个开源的 Android 媒体播放库,由 Google 开发和维护,用于替代 Android 系统自带的 MediaPlayer。它提供了更强大的功能、更好的性能和更高的灵活性,适用于各种复杂的媒体播放场景。所以被广泛用于各种播放器场景。 最近项目中…...
【蓝桥杯集训·每日一题2025】 AcWing 6134. 哞叫时间II python
6134. 哞叫时间II Week 1 2月20日 农夫约翰正在试图向埃尔茜描述他最喜欢的 USACO 竞赛,但她很难理解为什么他这么喜欢它。 他说「竞赛中我最喜欢的部分是贝茜说『现在是哞哞时间』并在整个竞赛中一直哞哞叫」。 埃尔茜仍然不理解,所以农夫约翰将竞赛…...
HTML/CSS中子代选择器
1.作用:选中指定元素中,符合要求的子元素. 子代选择器又称:子元素选择器,子选择器. 2.语法:选择器1>选择器2>选择器3>......选择器n 3.实例 <style>/* div中子代选择器 */div>a{color: red;}</style><div><a href"#">张三</…...
计算机毕业设计SpringBoot+Vue.jst网上购物商城系统(源码+LW文档+PPT+讲解)
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...
EasyRTC:全平台支持与自研算法驱动的智能音视频通讯解决方案
在智能硬件的浪潮中,设备之间的互联互通已成为提升用户体验的核心需求。无论是智能家居、智能办公,还是工业物联网,高效的音视频通讯和交互能力是实现智能化的关键。然而,传统音视频解决方案往往面临平台兼容性差、交互体验不佳以…...
C#: 日志函数
背景: 1.常见的官方日志模块项目过于复杂,且配置过于繁琐,针对这种现象,实现在大型项目中快速定位错误问题; 实现思路: 1.设置当前日志文件路径(获取到当前文件应用程序路径 \ErrorLog) 2.判…...
PyTorch 是如何进行机器学习的
1. 机器学习的核心流程 机器学习的核心是通过数据训练模型,让模型学会从输入数据中提取规律,并对新数据做出预测。整个过程可以分为以下几个步骤: 准备数据:收集并整理数据,分为输入(特征)和输…...
Java中的Stream API:从入门到实战
引言 在现代Java开发中,Stream API 是处理集合数据的强大工具。它不仅让代码更加简洁易读,还能通过并行处理提升性能。本文将带你从基础概念入手,逐步深入Stream API的使用,并通过实战案例展示其强大功能。 1. 什么是Stream API…...
【蓝桥杯单片机】客观题
一、第十三届省赛(一) 二、第十三届省赛(二)...
Spring Boot 中使用 @Transactional 注解配置事务管理
事务管理是应用系统开发中必不可少的一部分。Spring 为事务管理提供了丰富的功能支持。Spring 事务管理分为编程式和声明式的两种方式。编程式事务指的是通过编码方式实现事务;声明式事务基于 AOP,将具体业务逻辑与事务处理解耦。声明式事务管理使业务代码逻辑不受污…...
嵌入式八股文(五)硬件电路篇
一、名词概念 1. 整流和逆变 (1)整流:整流是将交流电(AC)转变为直流电(DC)。常见的整流电路包括单向整流(二极管)、桥式整流等。 半波整流:只使用交流电的正…...
《论多源数据集成及应用》审题技巧 - 系统架构设计师
论多源数据集成及应用写作框架 一、考点概述 本论题“论多源数据集成及应用”主要考察的是计算机软件测试工程师在数据管理和集成方面的专业知识与实践能力。论题聚焦于信息爆炸时代企业、组织和个人所面临的数据挑战,特别是如何有效地收集、整理和清洗来自不同渠…...
怎么在Github上readme文件里面怎么插入图片?
环境: Github 问题描述: 怎么在Github上readme文件里面怎么插入图片? https://github.com/latiaoge/AI-Sphere-Butler/tree/master 解决方案: 1.相对路径引用 上传图片到仓库 将图片文件(如 .png/.jpgÿ…...
【NLP 31、预训练模型的发展过程】
人的行为,究竟是人所带来的思维方式不同还是与机器一样,刻在脑海里的公式呢? 只是因为不同的人公式不同,所以人的行为才不同,可这又真的是人引以为傲的意识吗? 人脑只是相当于一个大型、驳杂的处理器&#…...
【计算机网络】传输层TCP协议
传输层 - layer4 - TCP协议 传输层:位于ISO模型的第四层 ——>L4 tcp协议意为传输控制协议(Transmission Control Protocol) 提供端到端的连接 端口号范围:0-65535 (2^16次方) 一个应用程序(服务)会占用…...
vscode settings(二):文件资源管理器编辑功能主题快捷键
参考资料 Visual Studio Code权威指南 by 韩骏 一. 文件资源管理器 1.1 文件资源管理器隐藏文件夹 默认情况下,Visual Studio Code会在文件资源管理器中隐藏一些文件夹(如.git文件夹)。可以通过files.exclude来配置要被隐藏的文件和文件…...
halcon机器视觉深度学习对象检测,物体检测
目录 效果图操作步骤软件版本halcon参考代码本地函数 get_distinct_colors()本地函数 make_neighboring_colors_distinguishable() 效果图 操作步骤 首先要在Deep Learning Tool工具里面把图片打上标注文本, 然后训练模型,导出模型文件 这个是模型 mod…...
go 反射 interface{} 判断类型 获取值 设置值 指针才可以设置值
内容包括 1. 用interface{}接收值 2. 判断interface{}的类型 switch 3. 打印interface{}的类型 4. 通过字符串对结构体,interface{}等进行设置值、获取值处理 示例代码 package mainimport ("fmt""log""reflect" )type Student…...
单臂路由
单臂路由(Router on a Stick)是一种网络配置方式,主要用于在单个物理接口上实现多个VLAN之间的路由。它通常用于交换机与路由器之间的连接,适用于VLAN间通信需求较小的情况。 工作原理 VLAN划分:交换机上配置多个VLAN…...
SpringBoot【实用篇】- 测试
文章目录 目标: 1.加载测试专用属性3.Web环境模拟测试2.加载测试专用配置4.数据层测试回滚5.测试用例数据设定 目标: 加载测试专用属性加载测试专用配置Web环境模拟测试数据层测试回滚测试用例数据设定 1.加载测试专用属性 我们在前面讲配置高级的…...
NutUI内网离线部署
文章目录 官网拉取源代码到本地仓库修改源代码打包构建nginx反向代理部署访问内网离线地址 在网上找了一圈没有写NutUI内网离线部署的文档,花了1天时间研究下,终于解决了。 对于有在内网离线使用的小伙伴就可以参考使用了 如果还是不会联系UP主:QQ:10927…...
【深度学习】Adam和AdamW优化器有什么区别,以及为什么Adam会被自适应学习率影响
Adam 和 AdamW 的主要区别在于 权重衰减(Weight Decay) 的实现方式,具体如下: 1. 权重衰减(Weight Decay)处理方式 Adam:采用 L2 正则化,通过在梯度更新时手动添加 weight_decay 项…...
Pytorch的F.cross_entropy交叉熵函数
参考笔记:pytorch的F.cross_entropy交叉熵函数和标签平滑函数_怎么给crossentropyloss添加标签平滑-CSDN博客 先来讲下基本的交叉熵cross_entropy,官网如下:torch.nn.functional.cross_entropy — PyTorch 1.12 documentation torch.nn.fun…...
一文讲解Redis为什么读写性能高以及I/O复用相关知识点
Redis为什么读写性能高呢? Redis 的速度⾮常快,单机的 Redis 就可以⽀撑每秒十几万的并发,性能是 MySQL 的⼏⼗倍。原因主要有⼏点: ①、基于内存的数据存储,Redis 将数据存储在内存当中,使得数据的读写操…...
[特殊字符] Elasticsearch 双剑合璧:HTTP API 与 Java API 实战整合指南
🚀 Elasticsearch 双剑合璧:HTTP API 与 Java API 实战整合指南 一、HTTP API 定义与用途 Elasticsearch 的 HTTP API 是基于 RESTful 接口设计的核心交互方式,支持通过 URL 和 JSON 数据直接操作索引、文档、集群等资源。适用于快速调试、…...
某手sig3-ios算法 Chomper黑盒调用
Chomper-iOS界的Unidbg 最近在学习中发现一个Chomper框架,Chomper 是一个模拟执行iOS可执行文件的框架,类似于安卓端大名鼎鼎的Unidbg。 这篇文章使用Chomper模拟执行某手的sig3算法,初步熟悉该框架。这里只熟悉模拟执行步骤以及一些常见的…...
蓝桥杯之阶段考核
📖 Day 7:阶段考核 - 蓝桥杯官方模拟赛(限时 4 小时) 📖 一、如何高效完成模拟赛? 模拟赛是一种接近真实竞赛的训练方式。要高效完成模拟赛,需要掌握以下策略: 1. 赛前准备 ✅ 环…...
DeepSeek掘金——VSCode 接入DeepSeek V3大模型,附使用说明
VSCode 接入DeepSeek V3大模型,附使用说明 由于近期 DeepSeek 使用人数激增,服务器压力较大,官网已 暂停充值入口 ,且接口响应也开始不稳定,建议使用第三方部署的 DeepSeek,如 硅基流动 或者使用其他模型/插件,如 豆包免费AI插件 MarsCode、阿里免费AI插件 TONGYI Lin…...
华为昇腾服务器(固件版本查询、驱动版本查询、CANN版本查询)
文章目录 1. **查看固件和驱动版本**2. **查看CANN版本**3. **其他辅助方法**注意事项 在华为昇腾服务器上查看固件、驱动和CANN版本的常用方法如下: 1. 查看固件和驱动版本 通过命令行工具 npu-smi 执行以下命令查看当前设备的固件(Firmware࿰…...
红帽7基于kickstart搭建PXE环境
Kickstart 文件是一种配置文件,用于定义 Linux 系统安装过程中的各种参数,如分区、网络配置、软件包选择等。system-config-kickstart 提供了一个图形界面,方便用户快速生成这些配置文件。 用户可以通过图形界面进行系统安装的详细配置&…...
【Python爬虫(58)】从0到1:Scrapy实战爬取大型新闻网站
【Python爬虫】专栏简介:本专栏是 Python 爬虫领域的集大成之作,共 100 章节。从 Python 基础语法、爬虫入门知识讲起,深入探讨反爬虫、多线程、分布式等进阶技术。以大量实例为支撑,覆盖网页、图片、音频等各类数据爬取ÿ…...
DeepSeek使用从入门到精通
1. DeepSeek概述 - DeepSeek是国产大模型,提供网页版和App版。因其强大功能,遭受网络攻击,但国内用户可直接使用。 2. 入门技巧 - 忘掉复杂提示词:用简洁明了的需求指令,AI能自我思考并生成优质内容 - 明确需求&#…...
【分布式数据一致性算法】Gossip协议详解
在分布式系统中,多个节点同时提供服务时,数据一致性是核心挑战。在多个节点中,若其中一个节点的数据发生了修改,其他节点的数据都要进行同步。 一种比较简单粗暴的方法就是 集中式发散消息,简单来说就是一个主节点同时…...
一、初始爬虫
1.爬虫的相关概念 1.1 什么是爬虫 网络爬虫(又被称为网页蜘蛛,网络机器人)就是模拟浏览器发送网络请求,接收请求响应,一种按照一定的规则,自动地爬取互联网信息的程序。 原则上,只要是浏览器…...
C语言番外篇(3)------------>break、continue
看到我的封面图的时候,部分读者可能认为这和编程有什么关系呢? 实际上这个三个人指的是本篇文章有三个部分组成。 在之前的博客中我们提及到了while循环和for循环,在这里面我们学习了它们的基本语法。今天我们要提及的是关于while循环和for…...
ipad连接电脑断断续续,不断弹窗的解决办法
因为ipad air 屏幕摔坏,换了一个内外屏,想用爱思检验一下屏幕真伪, 连接电脑时,断断续续,连上几秒钟然后就断开,然后又连上 然后又断开,不断地弹出信任的弹窗。 刚开始以为是数据线问题&#x…...
dockerfile构建haproxy
1. 结构目录 [rootlocalhost ~]# tree haproxy/ haproxy/ ├── dockerfile └── files├── haproxy-2.5.0.tar.gz├── haproxy.cfg├── install.sh└── start.sh1 directory, 5 files [rootlocalhost ~]# [rootlocalhost ~]# cd haproxy/ [rootlocalhost haproxy]…...
创建第一个 Maven 项目(一)
一、引言 在 Java 开发的广袤天地中,Maven 宛如一位全能的管家,发挥着举足轻重的作用。它是一个基于项目对象模型(POM)的项目管理和构建自动化工具,极大地简化了 Java 项目的开发流程。 Maven 的核心优势之一在于其强…...
深度学习pytorch之19种优化算法(optimizer)解析
提示:有谬误请指正 摘要 本博客详细介绍了多种常见的深度学习优化算法,包括经典的LBFGS 、Rprop 、Adagrad、RMSprop 、Adadelta 、ASGD 、Adamax、Adam、AdamW、NAdam、RAdam以及SparseAdam等,通过对这些算法的公式和参数说明进行详细解析…...
C#贪心算法
贪心算法:生活与代码中的 “最优选择大师” 在生活里,我们常常面临各种选择,都希望能做出最有利的决策。比如在超市大促销时,面对琳琅满目的商品,你总想用有限的预算买到价值最高的东西。贪心算法,就像是一…...
SSH无密登录配置
SSH无密登录配置 1、在用户目录下创建.ssh目录 mkdir /home/atguigu/.ssh2、在.ssh目录下生成ssh秘钥(需要切换到Hadoop集群使用的用户,再运行命令) ssh-keygen -t rsa然后敲(三个回车),就会生成两个文件…...
Rust并发编程实践:10分钟入门系统级编程
目录 学前一问:Rust为何而出现? 摘要 引言 正文解析: 一、Rust中的并发编程基础 1.1 线程 1.2 协程 二、Rust并发编程的高级特性 2.1 通道 2.2 原子操作 2.3 锁 三、实例展示:优化并发编程性能 1. 并行计算 2. 异步…...
Linux 命令大全完整版(06)
2. 系统设置命令 pwunconv 功能说明:关闭用户的投影密码。语法:pwunconv补充说明:执行 pwunconv 指令可以关闭用户投影密码,它会把密码从 shadow 文件内,重回存到 passwd 文件里。 rdate(receive date) 功能说明&a…...
VSCode 中设置 Git 忽略仅因时间戳修改导致的文件变更【使用deepseek生成的一篇文章】
在 VSCode 中设置 Git 忽略仅因时间戳修改导致的文件变更,可通过以下步骤实现: 确认是否为纯时间戳修改 首先确认文件的修改是否仅涉及时间戳,使用终端运行: git diff -- <file>若输出为空但 Git 仍提示修改,可…...
echarts找不到了?echarts社区最新地址
前言:在之前使用echarts的时候,还可以通过上边的导航栏找到echarts社区,但是如今的echarts变更之后,就找不到echarts社区了。 ✨✨✨这里是秋刀鱼不做梦的BLOG ✨✨✨想要了解更多内容可以访问我的主页秋刀鱼不做梦-CSDN博客 如今…...