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 相关文章推荐
百度 popup.js 完美修正版非常的不错 脚本之家推荐
Apr 17 Javascript
JS window对象的top、parent、opener含义介绍
Dec 03 Javascript
js中replace的用法总结
Dec 27 Javascript
不想让浏览器运行javascript脚本的方法
Nov 20 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
Bootstrap源码学习笔记之bootstrap进度条
Dec 24 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 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
一个简单的php路由类
2016/05/29 PHP
php版微信公众平台回复中文出现乱码问题的解决方法
2016/09/22 PHP
web页面数据展示新想法(json)
2010/06/08 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
2013/02/02 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
基于jQuery实现复选框是否选中进行答题提示
2015/12/10 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
JavaScript如何实现跨域请求
2016/08/05 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
Web开发使用Angular实现用户密码强度判别的方法
2017/09/27 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
node.js使用redis储存session的方法
2018/09/26 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
python同时给两个收件人发送邮件的方法
2015/04/30 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
Centos下实现安装Python3.6和Python2共存
2018/08/15 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Trunki英国官网:儿童坐骑式行李箱
2017/05/30 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
送给程序员的20个Java集合面试问题
2014/08/06 面试题
夜大自我鉴定
2013/10/31 职场文书
秋季运动会表扬稿
2014/01/16 职场文书
初中三年毕业生的自我评价分享
2014/02/14 职场文书
教师远程培训感言
2014/03/06 职场文书
学校门卫岗位职责
2014/03/16 职场文书
关于运动会的口号
2014/06/07 职场文书