js removeChild 方法深入理解


Posted in Javascript onAugust 16, 2016

1. 概述

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

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

// 拿到待删除节点:
var self = document.getElementById('to-be-removed');
// 拿到父节点:
var parent = self.parentElement;
// 删除:
var removed = parent.removeChild(self);
removed === self; // true

2. example

<!DOCTYPE html>
<html>
<head>
</script>
</head>
<body>
<ul id="test-list">
  <li>JavaScript</li>
  <li>Swift</li>
  <li>HTML</li>
  <li>ANSI C</li>
  <li>CSS</li>
  <li>DirectX</li>
</ul>
<script>
var p= document.getElementById('test-list');
var length = p.children.length;
var i=0;
for(; i<length; ){
  var li = p.children[i];
  var text = li.innerText;
  if(text!=='JavaScript' && text!=='HTML' && text!=='CSS'){

    p.removeChild(li);
    alert(p.children.toString());
    length--;
  }else{
    i++;
  }
}
// 测试:
;(function () {
  var
    arr, i,
    t = document.getElementById('test-list');
  if (t && t.children && t.children.length === 3) {
    arr = [];
    for (i = 0; i < t.children.length; i ++) {
      arr.push(t.children[i].innerText);
    }
    if (arr.toString() === ['JavaScript', 'HTML', 'CSS'].toString()) {
      alert('测试通过!');
    }
    else {
      alert('测试失败: ' + arr.toString());
    }
  }
  else {
    alert('测试失败!');
  }
})();
</script>
</body>
</html>

以上这篇js removeChild 方法深入理解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 图片预览效果 推荐
Dec 22 Javascript
artDialog双击会关闭对话框的修改过程分享
Aug 05 Javascript
javascript常用方法汇总
Dec 02 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
JavaScript数组操作详解
Feb 04 Javascript
AngularJS表格样式简单设置方法示例
Mar 03 Javascript
使用yeoman构建angular应用的方法
Aug 14 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
Node 自动化部署的方法
Oct 17 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
Oct 30 Javascript
微信小程序自定义可滑动日历界面
Dec 28 Javascript
Seajs源码详解分析
Apr 02 Javascript
关于javascript中限定时间内防止按钮重复点击的思路详解
Aug 16 #Javascript
总结Node.js中的一些错误类型
Aug 15 #Javascript
自动化测试读写64位操作系统的注册表
Aug 15 #Javascript
Wireshark基本介绍和学习TCP三次握手
Aug 15 #Javascript
JavaScript中removeChild 方法开发示例代码
Aug 15 #Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
Aug 15 #Javascript
Web安全测试之XSS实例讲解
Aug 15 #Javascript
You might like
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
php实现的Captcha验证码类实例
2014/09/22 PHP
PHP错误机制知识汇总
2016/03/24 PHP
PHP模板引擎Smarty中变量的使用方法示例
2016/04/11 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
PHP DB 数据库连接类定义与用法示例
2019/03/11 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
在VS2008中使用jQuery智能感应的方法
2010/12/30 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
jquery.validate使用详解
2016/06/02 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
VUE 动态组件的应用案例分析
2019/12/02 Javascript
Python中list初始化方法示例
2016/09/18 Python
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
在pandas中遍历DataFrame行的实现方法
2019/10/23 Python
NumPy中的维度Axis详解
2019/11/26 Python
Django中的AutoField字段使用
2020/05/18 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
Html5 语法与规则简要概述
2014/07/29 HTML / CSS
日本PLST在线商店:日本时尚杂志刊载的人气服装
2016/12/10 全球购物
迪卡侬中国官网:Decathlon中国
2020/08/10 全球购物
音乐学个人的自荐书范文
2013/11/26 职场文书
运动会100米解说词
2014/01/23 职场文书
优秀食品类广告词
2014/03/19 职场文书
企业环保标语
2014/06/10 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
2015年艾滋病防治工作总结
2015/05/22 职场文书
2015年教师节主持词
2015/07/03 职场文书
导游词之江西赣州
2019/10/15 职场文书
CSS实现切角+边框+投影+内容背景色渐变效果
2021/11/01 HTML / CSS
mysql的单列多值存储实例详解
2022/04/05 MySQL