JS记坑 ----- 在父节点中添加删除子节点

场景：通过javascript为ul标签内动态增删li标签，我通过 liArr = ul.children; 获取了ul的存有所有子元素的类数组，但是在 appendChild()、insert()和removeChild() 的过程中，发现这个 liArr 数组在动态变化，但是每次增删子元素的时候代码中并没有更新 liArr 的数据。

自己的理解：在增删修改子元素的时候，其对应的类数组 (ul.children) 会随之动态变化，不用自己来更新数组的数据，好像仔细想想确实是这么回事，因为 liArr 引用始终指向的是 ul.children 所占用的堆内存空间，在增删改ul的子元素的时候，这个堆内存空间的存放数据会随之动态变化，那么导致 liArr 类数组也会随之变化。

代码：

<script>var ul;var liArr;var input;var btn1, btn2, btn3;var check;initNode();// 清空城市myClick(btn3, function () {var n = liArr.length;// 遍历li，把除了内容为北京、上海、重庆的标签全删除for (var i = 0; i < n; i++) {if (liArr[0].innerText != "重庆" && liArr[0].innerText != "北京" && liArr[0].innerText != "上海") {ul.removeChild(liArr[0]);}}// 不能用下面代码来清空标签，因为liArr数组在ul对象移除子节点的时候会动态变化(????????不知道为什么会变化)/*for (var i = 0; i < liArr.length; i++) {if (liArr[i].innerText != "重庆" && liArr[i].innerText != "北京" && liArr[i].innerText != "上海") {ul.removeChild(liArr[i]);}}*/});// 添加城市myClick(btn1, function () {// 获取input输入的框的值用其创建一个文本节点var textNode = document.createTextNode(input.value);// 创建一个li元素节点对象var li = document.createElement("li");// 设置li元素节点对象的子节点为文本节点li.appendChild(textNode);// 获取checkbox状态var isAppend = check.checked;if (isAppend) {// 判断添加的城市是否存在if (isExisted(li)) {input.value = "";alert("请忽重复添加城市");} else {input.value = "";// 将li元素节点对象往后添加到ul元素节点中ul.appendChild(li);}} else {if (isExisted(li)) {input.value = "";alert("请忽重复添加城市");} else {// 在ul的第一个li前面插入新的liinput.value = "";ul.insertBefore(li, ul.firstElementChild);}}});function isExisted(element) {// 获取所有的livar liArr = document.getElementsByTagName("li");for (var i = 0; i < liArr.length; i++) {if (liArr[i].innerText == element.innerText) return true;}return false;}function initNode() {ul = document.querySelector("ul");liArr = ul.children;input = document.getElementById("input-city");btn1 = document.querySelector(".add");btn2 = document.querySelector(".delete");btn3 = document.querySelector(".clear");check = document.getElementById("isAppend");}function myClick(btn, fun) {btn.onclick = fun;}
</script>

JS记坑 ----- 在父节点中添加删除子节点相关推荐

redis cluster中添加删除重分配节点例子
redis cluster中添加删除重分配节点例子作者:用户来源:互联网时间:2016-05-05 10:22:27 摘要: 本文讲的是redis cluster中添加删除重分配节点例子, re ...
js添加多个子节点_javascript如何创建子节点
学习完HTM年据业会效近轻业务进果近轻业务进果近轻业L+css后,我并没有直接去学习HTML5和css3,而是开始学习JavaScript,现在就是jQuery基础也懂一点,js也懂一点,css3也懂 ...
vue ui无效_vue开发中，父组件添加scoped之后。解决在父组件中无法修改子组件样式问题。...
在vue的开发中,我们需要引用子组件,包括ui组件(element.iview).但是在父组件中添加scoped之后,在父组件中书写子组件的样式是无效果的.去掉scoped之后,样式可以覆盖.但这样会 ...
android js变量定义数组长度,js 声明数组和向数组中添加对象变量的简单实例
数组有四种定义的方式使用构造函数: var a = new Array(); var b = new Array(10); var c = new Array("first", ...
js添加多个子节点_JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
本文实例讲述了JS实现DOM节点插入操作之子节点与兄弟节点插入操作.分享给大家供大家参考,具体如下: www.jb51.net JS节点插入 function showinsert(){ //添加子节 ...
android js变量定义数组,js 声明数组和向数组中添加对象变量的简单实例
数组有四种定义的方式使用构造函数: var a = new Array(); var b = new Array(10); var c = new Array("first", ...
html数组添加对象的方法,js声明数组和向数组中添加对象变量的简单实例
数组有四种定义的方式使用构造函数: var a = new Array(); var b = new Array(10); var c = new Array("first", ...
vue组件中的样式属性：scoped，解决在父组件中无法修改子组件样式问题
Scoped CSS规范是Web组件产生不污染其他组件,也不被其他组件污染的CSS规范. vue组件中的style标签标有scoped属性时表明style里的css样式只适用于当前组件元素,它是通过使 ...
CDATA C#操作XML（无命名空间），添加/删除/编辑节点
xml文件<?xml version="1.0" encoding="utf-8"?> <Books> <Book ID=&quo ...

JS记坑 ----- 在父节点中添加删除子节点

JS记坑 ----- 在父节点中添加删除子节点相关推荐

最新文章

热门文章