JavaScript 删除Dom节点

最新推荐文章于 2024-05-14 20:58:30 发布

思诚代码块

最新推荐文章于 2024-05-14 20:58:30 发布

阅读量6.8k

点赞数 2

分类专栏： JavaScript实战笔记+理论文章标签： javascript 前端开发语言删除Dom节点

本文链接：https://blog.csdn.net/weixin_47556601/article/details/122948438

版权

JavaScript实战笔记+理论专栏收录该内容

27 篇文章 2 订阅

订阅专栏

大家好，今天我们来分享一下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节点就到这里了，谢谢大家

思诚代码块

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript 删除Dom节点

大家好，今天我们来分享一下JavaScript 删除Dom节点在JavaScript当中，删除节点的步骤：先获取到父节点，再通过父节点来删除自己（子节点）这里，提醒一下，自己不可以删除自己看源码：```bash<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head&gt
复制链接

扫一扫