JavaScript DOM 删除子节点

JavaScript 专栏收录该内容
2 篇文章 0 订阅

这些天一直在学习JavaScript,但由于工作繁忙,导致学习的兴致不高,一个对象都看了好几天视频,所以想以写博客的方式督促自己,希望能做到不管什么知识,每日一更。
一个元素有多个子节点,因此删除哪个子节点必须要明确。
【例1】要删除下面的文本节点

<div id="div1">今天又下雨,真的好烦啦!</div>

首先,要获取到id = “div1”元素节点

var mydiv = document.getElementById("div1");

removeChild(childNode)删除子节点;childNode必须是当前元素的子节点,否则没有权利。

mydiv.removeChild(mydiv.firstChild);

【例2】删除ul下面所有的li

<ul id="myul"><li>li-1</li><li>li-2</li><li>li-3</li></ul> 

首先,要获取到id = “myul”的元素节点,

var mydiv = document.getElementById("div1");       

第一种方法,
获取所有子元素

var nodes = myul.childNodes;

获取需要被删除每一个子元素

for(var i = 0; i < nodes.length; i++) {
    var node = nodes[i];
    myul.removeChild(node);
}

但是这种删除有一个问题,不能全部删除,会留下li-2这个文本节点,这是为什么呢?
原来,当i=0,nodes.length = 3;此时会删除li-1这个子节点
i=1时,node.length = 2,li-2就会变成nodes[0]这个节点,其实删除的是li-3
第二种方案
判断是否有子节点,存在返回true,不存在返回false

while(myul.hasChildNodes()) {
    myul.removeChild(myul.firstChild);
}

第三种方案(终极代码)

myul.innerHTML = "";

【例3】删除自己所在节点
DOM中只有删除子节点的方法,没有删除自己的方法

<div id="div2">好好学习,天天向上</div>

因此需要找到父节点(mydiv.parentNode.),删除自己(removeChild)

mydiv.parentNode.removeChild(mydiv);

最后,刚开始写博客,文笔还很生疏,知识点也还在吸取中,虽然很多内容心中能做到大致有数,但还是希望自己能够有所成长,不指望做大神,只是不辜负自己的上进心而已。

  • 4
    点赞
  • 0
    评论
  • 3
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值