DOM节点(二)：操作节点

Winer 发布于2019-08-22 16:01 / 1210人阅读

摘要：如果传入的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置这个方法接受两个参数要插入到节点和作为参照的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时要插入的节点占据其位置。

appendChild()

用于向childNodes列表的末尾添加一个节点。

var returnedNode = someNode.appendChild(newNode);

如果传入的节点已经是文档的一部分了，那结果就是将该节点从原来的位置转移到新位置

insertBefore()

这个方法接受两个参数：要插入到节点和作为参照的节点。插入节点后，被插入的节点会变成参照节点的前一个同胞节点(previousSibing)

//插入到最后一个子节点的前面
returnedNode = someNode.insertBefore(newNode, someNode.lastChild);

replaceChild()

这个方法接受两个参数：要插入的节点和要替换的节点。要替换的节点将由这个方法返回并从文档树中被移除，同时要插入的节点占据其位置。
var returnedNode = someNode.replaceChild(newNode, someNode.firstChild);

removeChild()

这个方法接受一个参数，即要移除的节点。被移除的节点将成为方法的返回值

var formerFirstChild = someNode.removeChild(someNode.firstChild);

cloneNode()

用于创建调用这个方法的节点完全相同的副本。cloneNode()方法接受一个布尔值参数，表示是否执行深复制。在参数为true的情况下，执行深复制，
也就是复制节点及其整个子节点树；在参数为false的情况下，执行浅复制，即只复制节点本身

myList:

    item 1
    item 2
    item 3


var deepList = myList.cloneNode(true);
console.log(deepList.childNodes.length); //3

var shallowList = myList.cloneNode(false);
console.log(shallowList.childNodes.length); //0

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93974.html

虚拟Dom详解 - (二)

摘要：第一篇文章中主要讲解了虚拟基本实现，简单的回顾一下，虚拟是使用数据描述的一段虚拟节点树，通过函数生成其真实节点。并添加到其对应的元素容器中。在创建真实节点的同时并为其注册事件并添加一些附属属性。第一篇文章中主要讲解了虚拟DOM基本实现，简单的回顾一下，虚拟DOM是使用json数据描述的一段虚拟Node节点树，通过render函数生成其真实DOM节点。并添加到其对应的元素容器中。在创建...

sevi_stuo 2019-08-26 10:46 评论0 收藏0
jQuery入门笔记之（二）文档对象模型

摘要：删除指定的属性，这个方法就不可以使用匿名函数，传递和均无效。遍历对象数组索引，鍵，属性名属性值，值相当于遍历原生对象数组时，为元素。在使用使用时，可以使用传入匿名函数的方法，实现由默认到几个之间的切换。转自个人博客基础 DOM 和和 CSS 一. 设置元素及内容我们通过前面所学习的各种选择器、过滤器来得到我们想要操作的元素。这个时候，我们就可以对这些元素进行 DOM 的操作。...

FleyX 2019-08-19 17:17 评论0 收藏0
学习Virtual Dom笔记

摘要：通过深度优先遍历两棵树，每层节点进行对比，记录下每个节点的差异。所以可以对那棵树也进行深度优先遍历，遍历的时候从步骤二生成的对象中找出当前遍历的节点差异，然后进行操作。实现虚拟(Virtual) Dom 把一个div元素的属性打印出来，如下： showImg(https://segmentfault.com/img/bVbnPe1?w=1239&h=336); 可以看到仅仅是第一层，...

DobbyKim 2019-08-26 13:28 评论0 收藏0
react diff算法

摘要：算法的本质是对传统遍历算法的优化策略用三大策略将复杂度转化为复杂度策略一中节点跨层级的移动操作特别少，可以忽略不计。当节点处于同一层级时，提供三种节点操作删除插入移动。在旧的节点中的，它的，不满足的条件，因此不做移动操作。一、react diff算法 diff算法的作用计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。传统di...

imccl 2019-08-23 18:13 评论0 收藏0
帮你读懂preact源码（二）

摘要：最后删除新的树中不存在的节点。而中会记录对其做了相应的优化，节点的的情况下，不做移动操作。这种情况，在中得到了优化，通过四个指针，在每次循环中先处理特殊情况，并通过缩小指针范围，获得性能上的提升。上篇文章已经介绍过idff的处理逻辑主要分为三块，处理textNode，element及component，但具体怎么处理component还没有详细介绍，接下来讲一下preact是如何处理...

Warren 2019-08-22 17:24 评论0 收藏0