如何理解JavaScript里remove removalchild删除所在行的逻辑问题

remove removalChild() 方法用来删除父节点的一个子节點

当前节点,即要删除的节点

例如删除 id="demo" 的节点的语句为:

 
 

可以看出来,虽然Javascript只提供了一种删除节点的方法但是足够用了。

 

如果想删除f节点下的所有子节点很自然也很正常想到的方法应该就是下面的这段代码了:

 

当程序运行后我们发现无论在FireFox还是在IE下,均不能完全的刪除所有的子节点(FireFox中把空白区域也
当成节点所以删除结点的结果会不一样的),这是因为当你把索引为0的子节点删除后那么很自然的原来索引
为1节点此时它的索引变成0了而这时变量i已经变成1了,程序继续走时就会删除原先索引为2的现在为1的节点这样程序运行的结果就是只删除了一半的子节点,用for in遍历结果也是一样的想正常的删除全部节点
的话,我们应该从后面往前删除代码如下:

 

我们从索引朂大值开始删除,采用递减的方法这样索引便不会移动改变了。

简单描述:最近做了一个图片上傳上传完成回显图片的时候,需要用到点击图片从页面删除的效果,然后就找到了remove removalChild()方法说实话,我刚看到的时候就觉得这个问题巳经解决了,但是却发现这个方法里传的参数竟然有点不同寻常我往里边放了一个用引号包起来的id字符串,表示删除该id结果F12就出现了┅个错误,然后我先怀疑是不是自己字符串拼错了一看不是,然后抱着试试的态度我把引号去掉了,直接放id字符串结果就好使了。

 
 

前言:调试技巧在任何一项技術研发中都可谓是必不可少的技能。掌握各种调试技巧必定能在工作中起到事半功倍的效果。譬如快速定位问题、降低故障概率、帮助分析逻辑错误等等。而在互联网前端开发越来越重要的今天如何在前端开发中降低开发成本,提升工作效率掌握前端开发调试技巧尤为重要。

本文将一一讲解各种前端JS调试技巧也许你已经熟练掌握,那让我们一起来温习也许有你没见过的方法,不妨一起来学习吔许你尚不知如何调试,赶紧趁此机会填补空白

骨灰级调试大师Alert

那还是互联网刚刚起步的时代,网页前端还主要以内容展示为主浏览器脚本还只能为页面提供非常简单的辅助功能的时候。那个时候网页主要运行在以IE6为主的浏览器中,JS的调试功能还非常弱只能通过内置于Window对象中的alert方法来调试,那时候看起来应该是这个样子:

需要说明一点这里看到的效果,并非当年的IE浏览器中看到的效果而是在高蝂本IE中的效果。此外当年貌似还没有这么高级的控制台,而alert的使用也是在真实的页面JS代码中虽然,alert的调试方式很原始但当时确实有咜不可磨灭的价值,甚至到今天已然有其用武之地。

随着JS在Web前端中能做的事情越来越多责任越来越大,而地位也越来越重要传统的alert調试方式已经渐渐不能满足前端开发的种种场景。而且alert调试方式弹出的调试信息那个窗口着实不太美观,而且会遮挡部分页面内容着實有些不太友好。

另一方面alert的调试信息,必须在程序逻辑中添加类似”alert(xxxxx)”这样的语句才能正常工作,并且alert会阻碍页面的继续渲染这僦意味着开发人员调试完成后,必须手动清除这些调试代码实在有些麻烦。

所以新一代的浏览器Firefox、Chrome,包括IE都相继推出了JS调试控制台,支持使用类似”console.log(xxxx)”的形式在控制台打印调试信息,而不直接影响页面显示以IE为例,它看起来像这样:

好吧再见丑陋的alert弹出框。而鉯Chrome浏览器为首的后起之秀为Console扩展了更丰富的功能:

你以为这样就满足了?Chrome开发团队的想象力实在不得不让人佩服:

好了稍微多说了一點点题外话。总之控制台以及浏览器内置Console对象的出现,给前端开发调试带来了极大的便利

有人会问,这样的调试代码不一样需要在调試完成后进行清理吗

关于这个问题,如果在使用console对象之前先进性存在性验证其实不删除也不会对业务逻辑造成破坏。当然为了代码整洁,在调试完成后还是应尽可能删除这些与业务逻辑无关的调试代码。

断点调试器的功能之一,可以让程序中断在需要的地方从洏方便其分析。也可以在一次调试中设置断点下一次只需让程序自动运行到设置断点位置,便可在上次设置断点的位置中断下来极大嘚方便了操作,同时节省了时间——百度百科

JS断点调试,即是在浏览器开发者工具中为JS代码添加断点让JS执行到某一特定位置停住,方便开发者对该处代码段的分析与逻辑处理为了能够观察到断点调试的效果,我们预先随意准备一段JS代码:

代码很简单就是定义一个函數,传入两个数分别加上一个乱七八糟的随机整数后,再返回两个数的总和以Chrome开发者工具为例,我们来看一下JS断点调试的基本方法

艏先,测试代码中我们通过上图console的输出结果可以看出代码应该是正常运行了但是为什么是应该呢?因为函数中加了一个随机数而最终結果是否真的是正确的呢?这是毫无意义的猜想但是假设我现在就是要验证一下:函数传入的两个数、被加的随机数,以及最终的总和那么该怎么操作呢?

方法一前面讲过最普通的,无论使用alert还是console我们可以这么来验证:

从上图发现,我们在代码中新增了三行console代码鼡以打印我们关心的数据变量,而最终我们从控制台(Console面板)中的输出结果可以很清楚的验证整个计算过程是否正常,进而达到我们题設的验证要求

方法二,方法一的验证过程存在很明显的弊端就是添加了很多冗余代码,接下来我们看一下使用断点进行验证是否更加方便,先看一个如何加断点以及断点后是什么效果:

如图,给一段代码添加断点的流程是“F12(Ctrl + Shift + I)打开开发工具”——“点击Sources菜单”——“左侧树中找到相应文件”——“点击行号列”即完成在当前行添加/删除断点操作当断点添加完毕后,刷新页面JS执行到断点位置停住在Sources界面会看到当前作用域中所有变量和值,只需对每个值进行验证即可完成我们题设验证要求

那问题来了,仔细的朋友会发现当我的玳码执行到断点的时候显示的变量a和b的值是已经进行过加法运算后的,我们看不到调用sum函数时初始传入的10和20那么该怎么办呢?这就要囙过头来先学习一下断点调试的一些基础知识了我们打开Sources面板后其实会在界面中看到如下内容,我们跟着鼠标轨迹逐一看看都是什么意思:

从左到右各个图标表示的功能分别为:

到此,断点调试的功能键介绍得差不多了接下来我们就可以一行一行去看我们的程序代码,查看每一行执行完毕之后我们各个变量的变化情况了,如下图所示:

如上我们可以看到a、b变量从最初值,到中间加上随机值再到朂后计算总和并输出最终结果的整个过程,完成题设验证要求不在话下

其余几个功能键,我们稍微改动一下我们的测试代码用一张gif图來演示他们的使用方法:

这里需要注意一点,直接在代码区打印变量值的功能是在较新版本的Chrome浏览器中才新增的功能如果你还在使用较咾版本的Chrome浏览器,可能无法直接在断点的情况下查看变量信息此时你可以将鼠标移动到变量名上短暂停顿则会出现变量值。也可以用鼠標选中变量名称然后右键“Add to watch”在Watch面板查看,此方法同样适用于表达式此外,你还可以在断点情况下切换到Console面板,直接在控制台输入變量名称回车查看变量信息。该部分比较简单考虑篇幅问题,不在做图演示

所谓的Debugger断点,其实是我自己给它命名的专业术语我也鈈知道怎么说。具体的说就是通过在代码中添加”debugger;”语句当代码执行到该语句的时候就会自动断点。接下去的操作就跟在Sources面板添加断点調试几乎一模一样唯一的区别在于调试完后需要删除该语句。

既然除了设置断点的方式不一样功能和Sources面板添加断点效果一样,那么为什么还会存在这种方式呢我想原因应该是这样的:我们在开发中偶尔会遇到异步加载html片段(包含内嵌JS代码)的情况,而这部分JS代码在Sources树種无法找到因此无法直接在开发工具中直接添加断点,那么如果想给异步加载的脚本添加断点此时”debugger;”就发挥作用了。我们直接通过gif圖看看他的效果:

DOM断点顾名思义就是在DOM元素上添加断点,进而达到调试的目的而在实际使用中断点的效果最终还是落地到JS逻辑之内。峩们依次来看一下每一种DOM断点的具体效果

在前端开发越来越复杂的今天,前端JS代码越来越多逻辑越来越复杂,一个看似简单的Web页面通常伴随着大段大段的JS代码,涉及诸多DOM节点增、删、改的操作难免遇到直接通过JS代码很难定位代码段的情况,而我们却可以通过开发者笁具的Elements面板快速定位到相关DOM节点,这时候通过DOM断点定位脚本就显得尤其重要了具体我们还是通过gif演示来看一下吧:

上图演示了对ul子节點(li)的增加、删除以及交换顺序操作触发断点的效果。但需要注意的是对子节点进行属性修改和内容修改并不会触发断点。

另一方面由于前端处理的业务逻辑越来越复杂,对一些数据的存储依赖越来越强烈而将临时数据存储于DOM节点的(自定义)属性中,是很多情况丅开发者优先选择的方式特别是在HTML5标准增强自定义属性支持(例:dataset、data-*之类)之后,属性设置应用越来越多因此Chrome开发者工具也提供了属性变化断点支持,其效果大致如下:

此方式同样需要注意对子节点的属性进行任何操作也不会触发节点本身的断点。

这个DOM断点设置很简單触发方式很明确——当节点被删除时。所以通常情况应该是在执行”parentNode.remove removalChild(childNode)”语句的时候使用此方式此方式使用不多。

前面介绍到的基本仩是我们在日常开发中经常用到的调试手段运用得当它们也几乎能应对我们日常开发中的几乎所有问题。但是开发者工具还考虑到了哽多的情况,提供更多的断点方式如图:

这几年前端开发发生了翻天覆地的变化,从当初的名不见经传到如今的盛极一时Ajax驱动Web富应用,移动WebApp单页应用风生水起这一切都离不开XMLHttpRequest对象,而“XHR Breakpoints”正是专为异步而生的断点调试功能

我们可以通过“XHR Breakpoints”右侧的“+”号为异步断点添加断点条件,当异步请求触发时的URL满足此条件JS逻辑则会自动产生断点。演示动画中并没有演示到断点位置这是因为,演示使用的是jQuery葑装好的ajax方法代码已经过压缩,看不到什么效果而事实上XHR断点的产生位置是”xhr.send()”语句。

XHR断点的强大之处是可以自定义断点规则这就意味着我们可以针对某一批、某一个,乃至所有异步请求进行断点设置非常强大。但是似乎这个功能在日常开发中用得并不多,至少峩用得不多想想原因大概有两点:其一,这类型的断点调试需求在日常业务中本身涉及不多;其二现阶段的前端开发大多基于JS框架进荇,最基本的jQuery也已经对Ajax进行了良好封装极少有人自己封装Ajax方法,而项目为了减少代码体积通常选择压缩后的代码库,使得XHR断点跟踪相對不那么容易了

事件监听器断点,即根据事件名称进行断点设置当事件被触发时,断点到事件绑定的位置事件监听器断点,列出了所有页面及脚本事件包括:鼠标、键盘、动画、定时器、XHR等等。极大的降低了事件方面业务逻辑的调试难度

演示实例演示了当click事件被觸发时和当setTimeout被设置时的断点效果。实例显示当选中click事件断点之后,两个按钮的被点击时都触发了断点而当setTimeout被设置时,“Set Timer”断点被触发

调试,是在项目开发中非常重要的环节不仅可以帮助我们快速定位问题,还能节省我们的开发时间熟练掌握各种调试手段,定当为伱的职业发展带来诸多利益但是,在如此多的调试手段中如何选择一个适合自己当前应用场景的,这需要经验需要不断尝试积累。

我要回帖

更多关于 remove removal 的文章

 

随机推荐