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.pswp.cn/diannao/12373.shtml
繁體地址,請注明出處:http://hk.pswp.cn/diannao/12373.shtml
英文地址,請注明出處:http://en.pswp.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…