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的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
JS匀速运动演示示例代码
Nov 26 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
javascript中parseInt()函数的定义和用法分析
Dec 20 Javascript
简单实现限制uploadify上传个数
Nov 16 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
vue+elementUI 复杂表单的验证、数据提交方案问题
Jun 24 Javascript
原生js+css调节音量滑块
Jan 15 Javascript
JS中this的4种绑定规则详解
Feb 04 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调用Google translate_tts api实现代码
2013/08/07 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
php生成与读取excel文件
2016/10/14 PHP
javascript实现的listview效果
2007/04/28 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
json数据与字符串的相互转化示例
2013/09/18 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
jquery通过扩展select控件实现支持enter或focus选择的方法
2015/11/19 Javascript
jQuery实现的导航下拉菜单效果
2016/07/04 Javascript
整理一下常见的IE错误
2016/11/18 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
2016/12/14 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
浅谈一种让小程序支持JSX语法的新思路
2019/06/16 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
javascript实现异形滚动轮播
2019/11/28 Javascript
[04:54]DOTA2-DPC中国联赛1月31日Recap集锦
2021/03/11 DOTA
python轻松实现代码编码格式转换
2015/03/26 Python
python实现查找两个字符串中相同字符并输出的方法
2015/07/11 Python
python基础教程之Filter使用方法
2017/01/17 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
2014/05/03 HTML / CSS
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
智能电子秤、手表和健康监测仪:Withings(之前为诺基亚健康)
2018/10/30 全球购物
建筑专业自我鉴定
2013/10/22 职场文书
机电一体化专业应届生求职信
2013/11/27 职场文书
光盘行动倡议书
2014/02/02 职场文书
详解JavaScript中的执行上下文及调用堆栈
2021/04/29 Javascript
判断Python中的Nonetype类型
2021/05/25 Python
MySQL串行化隔离级别(间隙锁实现)
2022/06/16 MySQL
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL