alias_neo3443231
2017-06-20 16:52
测试删除节点时,用了点ES6语法:
function clearText() { var content=document.getElementById("content"); // 在此完成该函数 var childs = content.childNodes; console.log(childs); for(child of childs){ content.removeChild(child); } }
实际执行时诡异的事情出现了,点一次没反应,点两次消除三行,点三次消除剩下的两行....
于是我用console.log把子节点列表返回到控制台,
结果发现是一个长度11的数组,再然后特么这个数组对象居然还有五个字面量属性,控制台输出如下:
[text, h1, text, h1, text, h1, text, h1, text, h1, text] 0:h1 1:h1 2:h1 3:h1 4:h1 length:5 __proto__:NodeList
说明第一次删除了所有的text,第二次部分删除了h1,第三次删干净了...
可是我在for循环中,console.log(child)得到了全部的节点列表。。。为啥不能一次删完?
[text, h1, text, h1, text, h1, text, h1, text, h1, text] #text <h1>html</h1> #text <h1>php</h1> text <h1>javascript</h1> #text <h1>jquery</h1> #text <h1>java</h1> #text
不知道我这样写有没有什么问题,如果你能发现问题的话请告诉我一下哈,谢谢!
<script type="text/javascript"> function clearText() { var content=document.getElementById("content"); // 在此完成该函数 var x = content.children; for(let i = x.length - 1 ;i >=0 ;i--){ content.removeChild(x[i]); } } </script>
我已经搞懂了,自问自答,也算做个记录,并给后来学习的猿友提供点经验。
function clearText() { var content=document.getElementById("content"); // 在此完成该函数 var childs = content.childNodes; console.log(childs); for(child of childs){ content.removeChild(child); } }
这段函数的问题在于,for of循环中,of后面跟的变量长度始终在变化,所以递归无法得到正确结果。
那么很简单的方法是直接获取childs长度然后进行for循环,然而存在浏览器兼容性问题,因为列表长度不一致。
于是换个思路,如果我把取到的childNode存起来呢?这样:
function clearText() { let content=document.getElementById("content"); let childs = content.childNodes; let buffers = childs; // 在此完成该函数 for(let buffer of buffers){ content.removeChild(buffer); } }
运行结果没有变化,可见childNodes存储的是一个指针列表,buffer指向的对象依然是原始目标,导致content的删除子节点影响buffers存储空间。
那好,再变...
function clearText() { let content=document.getElementById("content"); let childs = content.childNodes; let buffers = Array.from(childs); // 在此完成该函数 for(let buffer of buffers){ content.removeChild(buffer); } }
这次运用了一个Array.from函数,这是es6新增函数,将对象存成数组。
这次buffers彻底变成了数组,console.log可以看到,原型不再是NodeList而是Array。
于是通关....
发现我js基础不是一般的差>_<。泪
JavaScript进阶篇
468194 学习 · 21891 问题
相似问题