浅谈dom操作removechild（）

作为一个从ui设计转向前端的小白，之前一直是在对自己设计的界面写html和css，极少去写js，刚刚把盒子模型和响应式布局这一块的东西有了一点理解，又开始学习起js方面的内容，希望能在实习之前学到更多东西。

刚学习js就对里面的dom操作很感兴趣，在自己编写代码和修改bug过程中，对removechild（）这个dom操作有了更深的理解，比如编写一个表格table，包含多个tr，需要删除某个tr，设计师在tr中添加了一个删除按钮，是个最底层节点，需要删除顶点tr，google之后找到这样几个方法，一个是用@click.prevent遍历后使用display：none改样式（似乎这个方法很万能，使节点消失看不见就可以），但这样写并没有使该节点在节点数中被删除，数据依然在节点树中，只是没有显示给用户看，另一个方法removechild()官方给出的解释是删除一个子元素，（一个子元素？随机的还是连续点击从第一个一次删除），经过测试是可以循环点击删除所有的，好在设计师设计的界面删除按钮在tr中，点击删除时删除所在的一行会直接从节点树中被删除，但同样有个问题是删除是最底部的节点，怎么才能回到最上层tr呢？

这就需要另一个dom操作parentNode，parentNode的官方文档是说返回元素的父节点可以通过不断返回上层，注意需要回到需要删除的tr的上层，也就是tbody部分，因为removechild()的用法是删除子节点，这两个dom操作配合就可以完成某一tr从节点树中删除，经过不断测试和console.log(tr.parentNode)没有发现bug。

写完后发现dom操作确实很神奇，removeChild只是众多dom操作中的一个，多操作的配合可能还会产生更多的效果，对于我这个前端小白来说，js确实很神奇，希望广大前端小白们能够多敲代码，欣赏代码之美，我们一起努力，早日拿到自己心仪公司的offer

浅谈dom操作removechild（）相关推荐

JavaScript 浅谈DOM节点层次：Text /Coment等类型
浅谈DOM其他节点层次:Text .Coment. 一.Text类型--文本 Text类型表示纯文本内容,其特性有 nodeType == 3 ; nodeName == "#text& ...
【浅谈DOM事件的优化】
浅谈DOM事件的优化在 JavaScript 程序的开发中,经常会用到一些频繁触发的 DOM 事件,如 mousemove.resize,还有不是那么常用的鼠标滚轮事件:mousewheel (在 ...
浅谈-LINUX 操作系统启动过程
LINUX 操作系统启动过程通过一段时间的学习已经对linux有了一定的了解,接下来就开始研究一下linux 操作系统的启动过程吧.当然这是为了让大家比较容易发现linux启动过程中容易发生问题的地 ...
浅谈管理系统操作日志设计（附操作日志类）
原文地址:http://www.cnblogs.com/hooray/archive/2012/09/05/2672133.html 相关文章链接:<系统操作日志设计> 在开始做之前,必须 ...
浅谈Vue中的虚拟DOM
Virtual DOM 是JavaScript按照DOM的结构来创建的虚拟树型结构对象,是对DOM的抽象,比DOM更加轻量型为啥要使用Virtual DOM 当然是前端优化方面,避免频繁操作DOM, ...
浅谈无缓存I/O操作和标准I/O文件操作区别（转载）
首先,先稍微了解系统调用的概念: 系统调用,英文名system call,每个操作系统都在内核里有一些内建的函数库,这些函数可以用来完成一些系统系统调用把应用程序的请求传给内核,调用相应的的内核函数完 ...
python中判断列表数据类型_浅谈Python数据类型判断及列表脚本操作
数据类型判断在python(版本3.0以上)使用变量,并进行值比较时.有时候会出现以下错误: TypeError: unorderable types: NoneType() < int() ...
python列表使用判断_浅谈Python数据类型判断及列表脚本操作
数据类型判断在python(版本3.0以上)使用变量,并进行值比较时.有时候会出现以下错误: TypeError: unorderable types: NoneType() < int() ...
java双层list扁平化,浅谈java8 stream flatMap流的扁平化操作
概念: Steam 是Java8 提出的一个新概念,不是输入输出的 Stream 流,而是一种用函数式编程方式在集合类上进行复杂操作的工具.简而言之,是以内部迭代的方式处理集合数据的操作,内部迭代可以 ...

浅谈dom操作removechild（）

浅谈dom操作removechild（）

浅谈dom操作removechild（）相关推荐

最新文章

热门文章