刪除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元素集合的位置,刪除完第一個元素后,后面的元素會向前移動,也就是說第二個元素變成了第一個元素,依次類推。所以前面的錯誤循環只刪除了一半,后面的一半向前移動填補了刪除的空缺,就相當于只有一半的刪除效果。