DOM操作---删除元素,删除指定的元素,循环删除元素

删除DOM元素

remove()方法可以删除自身节点,要注意一个元素被删除时,它的子元素也会跟着全部删除

let bt = document.getElementById("bt");
bt.remove();

removeChild ()方法可以删除指定的子元素

let bt = document.getElementById("bt");//bt是body的子元素
document.body.removeChild(bt);

DOM删除问题

        在实现展示图片的功能时遇到一个问题,有一个页面有很多的img标签,然后要去删除掉这些img,但是发现for循环不能一次删除全部的标签

 let oldImgArr = document.getElementsByTagName("img");// 页面上的所有imgfor(let i = 0;i<oldImgArr.length;i++){oldImgArr[0].remove();}

每次执行删除后,会剩下一半,并不能全部删除,

解决方法

直接看代码,这里可以一次删除所有的img元素,

let oldImgArr = document.getElementsByTagName("img");
while(oldImgArr.length>0){// 如果长度大于0oldImgArr[0].remove();
}

        这里的原理是,在DOM树中,已经删除的DOM元素不会占用DOM元素集合的位置,删除完第一个元素后,后面的元素会向前移动,也就是说第二个元素变成了第一个元素,依次类推。所以前面的错误循环只删除了一半,后面的一半向前移动填补了删除的空缺,就相当于只有一半的删除效果。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Git 仓库的常用命令 远程仓库 本地仓库

初始化仓库&#xff1a; git init克隆&#xff08;Clone&#xff09;一个远程仓库到本地&#xff1a; git clone <远程仓库地址>添加&#xff08;Add&#xff09;文件到暂存区&#xff1a; git add <文件名>提交&#xff08;Commit&#xff09;文件到本地仓库&a…

589.N叉树的前序遍历

刷算法题&#xff1a; 第一遍&#xff1a;1.看5分钟&#xff0c;没思路看题解 2.通过题解改进自己的解法&#xff0c;并且要写每行的注释以及自己的思路。 3.思考自己做到了题解的哪一步&#xff0c;下次怎么才能做对(总结方法) 4.整理到自己的自媒体平台。 5.再刷重复的类…

【C++风云录】提升设计效率:建筑工程与结构优化

优化你的工程设计&#xff1a;全面解析六大软件库 前言 本文将对六种广泛使用于建筑工程设计的软件工具进行深入探讨&#xff0c;这些工具各自都有独特的特性和应用场景。我们将详细介绍并比较这些工具的设计流程&#xff0c;还将通过实例分析来进一步解释它们在现实世界中的…

C++类与对象的两个案例

1.立方体 #include <iostream> using namespace std;//立方体类设计 //1.创建立方体类 //2.设计属性 //3.设计行为 获取立方体面积和体积 //4.分别利用全局函数和成员函数 判断两个立方体是否相等class Cube { public:int getL(){return m_L;}void setL(int L){m_L L;}…

2024OD机试卷-找朋友 (java\python\c++)

题目:找朋友 题目描述 在学校中,N个小朋友站成一队, 第i个小朋友的身高为height[i], 第i个小朋友可以看到的第一个比自己身高更高的小朋友j,那么j是i的好朋友(要求j > i)。 请重新生成一个列表,对应位置的输出是每个小朋友的好朋友位置,如果没有看到好朋友,请在该…

达梦sql中参数个数太多导致出现SOH等特殊字符报错无效的序列号是不是达梦的bug

mybatis的Mapper.xml中如下&#xff1a; in中的参数大概有1万6千多个&#xff0c;分成每1000个一组拼接成sql&#xff0c;然而在达梦中执行时报如下: Caused by: dm.jdbc.driver.DMException: Invalid sequence noat dm.jdbc.driver.DBError.throwException(DBError.java:710)…

【风变】Python爬虫精进复习-20240430

参考笔记 下面给出一个巨佬学习风变pyhton基础语法和爬虫精进的笔记&#xff08;链接&#xff09; 风变编程笔记(一)-Python基础语法 风变编程笔记(二)-Python爬虫精进 技术总结 request BeautifulSoup selenium BeautifulSoup 练习0-1&#xff1a;文章下载 import requ…

舜山木业有限公司现已加入2024长三角快递物流供应链与技术装备展览会

参展企业介绍 绍兴舜山木业有限公司是中华人民共和国出境木质包装定点企业、浙江省林业重点龙头企业。2011年起全面导入和开发应用符合木包装企业生产特点的ERP管理系统&#xff0c;顺利通过国家三级安全生产标准化验收&#xff0c;取得欧标托盘在中国大陆区的生产商执照资格。…

九、e2studio VS STM32CubeIDE之const修饰BSP函数的形参

目录 一、概述/目的 二、通过串口发送函数对比 2.1 stm32 hal库 VS renesas FSP 2.2 const修改函数形参的作用 2.2.1 值传递-副本 2.2.2 指针传递&#xff08;就近原则&#xff09; 2.2.2.1 const修饰&#xff1a;*P 2.2.2.2 const修饰&#xff1a;指针变量P 2.2.2.3 …

手撸XXL-JOB(二)——定时任务管理

在上一节中&#xff0c;我们介绍了SpringBoot中关于定时任务的执行方式&#xff0c;以及ScheduledExecutorService接口提供的定时任务执行方法。假设我们现在要写类似XXL-JOB这样的任务调度平台&#xff0c;那么&#xff0c;对于任务的管理&#xff0c;是尤为重要的。接下来我们…

最新Linux Debian12安装和使用ImageMagick图像处理工具 常见图片png、jpg格式转webp格式

在Linux系统中&#xff0c;使用ImageMagick可以图片格式转换&#xff0c;其中最常用的是通过命令行工具进行。 ImageMagick是一个非常强大的图像处理工具集&#xff0c;它包含了许多用于图像转换的命令。 一、安装ImageMagick&#xff08;如果尚未安装&#xff09;&#xff1…

在线音乐系统

文章目录 在线音乐系统一、项目演示二、项目介绍三、部分功能截图四、部分代码展示五、底部获取项目&#xff08;9.9&#xffe5;带走&#xff09; 在线音乐系统 一、项目演示 音乐网站 二、项目介绍 基于springbootvue的前后端分离在线音乐系统 登录角色 : 用户、管理员 用…

外文文献查找以及下载渠道

寻找外文文献的渠道有很多种&#xff1a; 学术数据库和期刊网站&#xff1a;像PubMed、IEEE Xplore、ScienceDirect等学术数据库和期刊网站是获取外文文献的主要渠道之一。这些平台通常提供了广泛的学术资源&#xff0c;包括期刊文章、会议论文等。 学术搜索引擎&#xff1a;…

Git 的原理与使用(中)

Git 的原理与使用&#xff08;上&#xff09;中介绍了Git初识&#xff0c;Git的安装与初始化以及工作区、暂存区、版本库相关的概念与操作&#xff0c;本文接着上篇的内容&#xff0c;继续深入介绍Git在的分支管理与远程操作方面的应用。 目录 五、分支管理 1.理解分支 2.创…

java约拍摄影小程序

获取源码配套资料论文等、问题解答&#xff0c;可以加华神扣扣&#xff1a;3753599439 扣扣&#xff1a;1590404240 叩叩&#xff1a;1306749621

Java窗口函数框架JDFrame

1、简介 在上一节中已经介绍过 JDFrame&#xff0c;文章链接stream流太难用了看看JDFrame 没看过的朋友可以先看看&#xff0c; 这次主要讲讲窗口函数相关API的使用 在各种数据库mysql&#xff0c; hive、spark中都有非常好用的开窗函数使用&#xff0c; 但是java却没好用的J…

数据结构与算法学习笔记十---链队列的表示和实现(C语言)

目录 前言 1.什么是链队 2.链队的表示和实现 1.定义 2.初始化 3.销毁 4.清空 5.空队列 6.队列长度 7.获取队头 8.入队 9.出队 10.遍历队列 11.完整代码 前言 本篇博客介绍链栈队列的表示和实现。 1.什么是链队 链队是采用链式存储结构实现的队列。通常链队使用单…

【知识拓展】大白话说清楚:IP地址、子网掩码、网关、DNS等

前言 工作中常听别人说的本地网络是什么意思&#xff1f;同一网段又是什么意思&#xff1f;它俩有关系吗&#xff1f; 在工作中内经常会遇到相关的网络问题&#xff0c;涉及网络通信中一些常见的词汇&#xff0c;如IP地址、子网掩码、网关和DNS等。具体一点&#xff1a;经常会…

申请免费的必应搜索API

申请免费的必应搜索API 文章目录 申请免费的必应搜索API前言一、原理1.1 登录1.2 进入1.3 获取密钥1.4 申请VISA信用卡1.5 创建必应自定义搜索资源 二、创建成功 前言 准备条件&#xff1a; 1、outlook邮箱 2、招商银行全币种VISA信用卡【建议之前就有一张招商银行信用卡&…

【opencv】图像拼接实验

实验环境&#xff1a;anaconda、jupyter notebook 实验用到的包&#xff1a;opencv、matplotlib、numpy 注&#xff1a;opencv在3.4.2之后sift就不是免费的了 我用的是3.4.1.15版本 实验使用到的图片 一、sift函数获取特征值 读入图片 book cv2.imread(book.png, cv2.IMRE…