js浏览器操作DOM之删除DOM

最新推荐文章于 2024-04-17 08:48:05 发布
最新推荐文章于 2024-04-17 08:48:05 发布
阅读量388 收藏
点赞数
文章标签： java python
原文链接：http://www.cnblogs.com/ocean-boy/p/7382543.html
版权

删除一个DOM节点就比插入要容易得多。

要删除一个节点，首先要获得该节点本身以及它的父节点，然后调用父节点的removechild把自己删掉即可：

<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>
<script>
'use strict';
//获取需要删除的节点
var self = document.getElementById('java');
//获取需要删除节点的父节点
var parent = self.parentElement;
//进行删除操作
//var removed = parent.removeChild(self);
parent.removeChild(self);
</script>
</body>
</html>

 

结果：

删除的节点虽然不在文档树中了，但其实它还是在内存中保留的，可以随时再次被添加到别的位置

!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<div id="list">
    <p id="java">Java</p>
    <p id="python">Python</p>
    <p id="scheme">Scheme</p>
</div>
<script>
'use strict';
//获取需要删除的节点
var self = document.getElementById('java');
//获取需要删除节点的父节点
var parent = self.parentElement;
//进行删除操作
//var removed = parent.removeChild(self);
var removed = parent.removeChild(self);
console.log(removed === self);
</script>
</body>
</html>

 

结果：

当我们遍历一个父节点的子节点并进行删除操作时，要注意，children属性是一个只读属性，并且在子节点变化时会实时更新。

如下面的例子：

<div id="parent">
    <p>First</p>
    <p>Second</p>
</div>

当我们用如下代码删除子节点时：

 

var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 浏览器报错

 

 

浏览器报错：parent.children[1]不是一个有效的节点。原因就在于，当<p>First</p>节点被删除后，parent.children的节点数量已经从2变为了1，索引[1]已经不存在了。

因此，删除多个节点时，要注意children属性时刻都在变化。

转载于:https://www.cnblogs.com/ocean-boy/p/7382543.html

weixin_34391854
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js 刷新后js内容没有变。
PrimaryColor
11-30 391
如果刷新后没有改变，可以鼠标右击刷新按钮，然后选择“清空缓存并硬件重新加载”。 经常这样操作很麻烦，可以把控制台下“Network”的“Disable cache”勾上。
js浏览器操作DOM之插入DOM
weixin_34205826的博客
08-16 614
当我们获得了某个DOM节点，想在这个DOM节点内插入新的DOM，应该如何做？ 如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。 如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替...
JS删除DOM元素的两种方法
热门推荐
小龙在线
10-13 15万+
删除子节点 var box=document.getElementById("box"); box.parentNode.removeChild(box); 删除自身 var box=document.getElementById("box"); box.removeNode(true); 参考：https://blog.csdn.net/staywithc/article/details/3...
Javascript 在浏览器环境中 (四) DOM节点的创建,修改与删除
xiayuanfeng的专栏
02-12 329
修改节点 上面一篇我们学习了DOM节点的访问，下面来看看DOM节点的修改。 先获取要改变的节点。 var my = document.getElementById('closer'); 非常容易更改这个元素的属性。我们可以更改innerHTML. my.innerHTML = 'final';//final 因为innerHTML可以写入html，所以我们来修改html。 my.innerHT...
JavaScript：js删除dom节点或div的2种常见方式，附例子和运行效果
最新发布
m0_60607562的博客
04-17 1387
前端框架太多了，真的学不动了，别慌，其实对于前端的三大马车，Angular、React、Vue 只要把其中一种框架学明白，底层原理实现，其他两个学起来不会很吃力，这也取决于你以后就职的公司要求你会哪一个框架了，当然，会的越多越好，但是往往每个人的时间是有限的，对于自学的学生，或者即将面试找工作的人，当然要选择一门框架深挖原理。JS 内容涉及到的知识点较多，看到网上有很多人建议你从头到尾抱着那本《JavaScript高级程序设计》学，我是不建议的，毕竟刚接触 JS 谁能看得下去，当时我也不能，也没那样做。
【DOM】DOM操作之如何添加、删除、替换元素_04
青春木鱼的博客
05-19 6921
本文将详细介绍如何使用DOM操作添加、删除、替换元素。我们使用document.createElement("标签名")来创建元素，使用父元素.removeChild(子元素)来删除子元素。另外，用createElement创建的新元素对象，暂时是游离在内存中，并没有被加入到DOM树。而浏览器显示哪些元素，完全依照DOM树的内容来生成。所以，新元素不会被浏览器加载到页面上，用户暂时是看不到的！因此，今后只要创建新元素，最后一步都是将新元素添加到DOM树上指定的父元素下。
移除DOM元素
iteye_19776的博客
09-09 1065
下面是移除DOM元素的几种方法： [code="html"] Hello how are you? Call remove() on paragraphs [/code] （1）.empty() 从DOM中移除集合中匹配元素的所有子节点。 [code="js"] $("p").empty() [/code] 会移除Hello和you?但节点不会被删...
Js操作DOM元素及获取浏览器高宽的简单方法
11-22
JavaScript中的DOM操作是Web开发中的核心技能之一，它允许开发者动态地操纵网页内容。DOM（Document Object Model）是一个树状结构，将HTML或XML文档解析为一系列可编程的对象。通过DOM，JavaScript可以轻松地找到、...
JS实现DOM删除节点操作示例
11-29
在JavaScript中，DOM...总结，JavaScript的DOM操作是网页动态效果和交互实现的关键，而`removeChild()`方法则是删除文档中特定节点的重要工具。通过熟练掌握这一方法，开发者可以创建出更加丰富和灵活的用户界面。
javascript DOM 操作.doc
01-15
javascript DOM 操作 javascript DOM 操作是指在客户端使用javascript语言来操作文档对象模型...javascript DOM 操作可以在客户端动态地更改网页的内容和结构，但是在不同的浏览器中需要使用不同的方法和属性来实现。
JavaScript学习笔记之DOM操作实例分析
12-12
本文实例讲述了JavaScript学习笔记之DOM操作。分享给大家供大家参考，具体如下： 一、DOM概念 1. “D”:Docment,指的是文档 2. “O”：Object，指的是对象，在javascript有三种对象：用户定义对象、内建对象...
dom节点的添加与删除
04-01
dom节点的添加与删除适合初级阅读，有解说
基于DOM节点删除之empty和remove的区别(详解)
12-29
要移除页面上节点是开发者常见的操作，jQuery提供了几种不同的方法用来处理这个问题，这里我们开仔细了解下empty和remove方法 empty 顾名思义，清空方法，但是与删除又有点不一样，因为它只移除了 指定元素中的所有子节点。 这个方法不仅移除子元素（和其他后代元素），同样移除元素里的文本。因为，根据说明，元素里任何文本字符串都被看做是该元素的子节点。请看下面的HTML： <div class=hello><p>这是p标签</p></div> 如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中 //通过empty处理 $('
删除DOM节点 删除DOM节点
06-06
删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点删除DOM节点
DOM 操作——添加、移除、移动、复制、创建和查找节点。
weixin_43627806的博客
05-06 464
1. 创建新节点 createDocumentFragment() // 创建一个 DOM 片段 createElement() // 创建一个具体的元素 createTextNode() // 创建一个文本节点 2. 添加、移除、替换、插入 appendChild() removeChild() replaceChild() insertBefore() // 在已有的子节点前插入一个新的子节点...
JS——删除DOM元素的两种方法
mkijnbgt的博客
04-27 2983
【代码】JS删除DOM元素的两种方法。
JavaScript--删除DOM
天行健 君子以自强不息，地势坤 君子以厚德载物。
07-15 1万+
1. 删除DOM 删除一个DOM节点就比插入要容易得多。插入DOM 要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的 removeChild 把自己删掉： <!-- HTML结构 --> <div id="list"> <p id="java">Java</p> <p id="python">Python</p> <p id="scheme">Scheme</p>
【JavaScript】DOM元素操作节点增删改查
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
03-30 1678
文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言（HTML或XML）的标准编程接口。通过这些DOM接口可以改变网页的内容、结构和样式。网页中的所有内容都是节点（标签、属性、文本、注释等等），在DOM中，节点使用Node来表示。HTML DOM树中的所有节点均可通过JavaScript进行访问，所有HTML元素（节点）均可被修改，也可以创建或删除。
JavaScript 删除Dom节点
weixin_47556601的博客
02-15 6838
大家好，今天我们来分享一下JavaScript 删除Dom节点 在JavaScript当中，删除节点的步骤： 先获取到父节点，再通过父节点来删除自己（子节点） 这里，提醒一下，自己不可以删除自己 看源码： ```bash <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head&gt
JavaScript中DOM详解.docx
01-13
理解和掌握JavaScript中的DOM操作以及跨浏览器兼容性问题对前端开发者至关重要。在实际开发中，需要进行充分的测试以确保代码在各种环境下都能正常工作，并且应遵循最佳实践来优化代码性能和可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值