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 相关文章推荐
JQuery 解析多维的Json数据格式
Nov 02 Javascript
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
autoIMG 基于jquery的图片自适应插件代码
Mar 12 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
一段非常简单的js判断浏览器的内核
Aug 17 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
jQuery Ajax 全局调用封装实例代码详解
Jun 02 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
Vue实现美团app的影院推荐选座功能【推荐】
Aug 29 Javascript
实例分析javascript中的异步
Jun 02 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 Javascript
vue项目两种方式实现竖向表格的思路分析
Apr 28 Vue.js
关于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+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
php mssql 数据库分页SQL语句
2008/12/16 PHP
CI框架中zip类应用示例
2014/06/17 PHP
php获取ajax的headers方法与内容实例
2017/12/27 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
如何判断图片地址是否失效
2007/02/02 Javascript
javaScript 计算两个日期的天数相差(示例代码)
2013/12/27 Javascript
AngularJS入门教程之Hello World!
2014/12/06 Javascript
浅谈javascript实现八大排序
2015/04/27 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
Vue的生命周期操作示例
2019/09/17 Javascript
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
angular inputNumber指令输入框只能输入数字的实现
2019/12/03 Javascript
javascript+Canvas实现画板功能
2020/06/23 Javascript
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
Python操作mongodb数据库进行模糊查询操作示例
2018/06/09 Python
python flask实现分页的示例代码
2018/08/02 Python
python set内置函数的具体使用
2019/07/02 Python
Anaconda3+tensorflow2.0.0+PyCharm安装与环境搭建(图文)
2020/02/18 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
美国第一香水网站:Perfume.com
2017/01/23 全球购物
戴尔英国官网:Dell英国
2017/05/27 全球购物
方法名是否可以与构造器的名字相同
2012/06/04 面试题
构造器Constructor是否可被override?
2013/08/06 面试题
排序都有哪几种方法?请列举。用JAVA实现一个快速排序
2014/02/16 面试题
教师研修随笔感言
2014/01/23 职场文书
销售岗位职责范本
2014/06/12 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
结婚当天新郎保证书
2015/05/08 职场文书
golang特有程序结构入门教程
2021/06/02 Python
基于CSS制作创意端午节专属加载特效
2022/06/01 HTML / CSS