0
点赞
收藏
分享

微信扫一扫

JavaScript 删除Dom节点

大家好,今天我们来分享一下JavaScript 删除Dom节点

在JavaScript当中,删除节点的步骤:

先获取到父节点,再通过父节点来删除自己(子节点)

这里,提醒一下,自己不可以删除自己

看源码:


```bash
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="father">
<h1>标题1</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
    var  h1= document.getElementsByClassName('h1');
    var  p1= document.getElementById('p1');
    var  p2= document.getElementsByClassName('p2');
    var father =document.getElementById('father');
    var childrens =father.children;    //获取父节点下的所有子节点
   // father.firstChild
   // father.lastChild

</script>
</body>
</html>

这是我们上次的源码,在这里要将p1 节点删除,我们可以看见,p1是h1的子节点

这是它的网页执行结果:

在这里插入图片描述
删除子节点:

在这里插入图片描述
看现在的网页:

在这里插入图片描述

看p1的父节点

在这里插入图片描述

看父级节点的所有子节点

在这里插入图片描述

根据下标查找子节点:

截图:

在这里插入图片描述

根据下标删除子节点:

在这里插入图片描述

这样会报错

这是删除是一个动态的过程,我们第一次根据下标删除子节点,原先的数列就会发生变化

在这里插入图片描述
也就是说,删除的过程当中,children会变化的

好了,有关于JavaScript 删除Dom节点就到这里了,谢谢大家

举报

相关推荐

DOM删除指定节点 removeChild()

0 条评论