并不是所有节点类型都受到Web浏览器的支持，最常用的就是元素、文本、文档节点（下面数值常量中的1、3和9），我们只要关注这三种就可以了。 我们先看下所有的节点类型。...节点类型 js 中所有节点类型都继承自Node类型，因此都共享着相同的基本属性和方法。 每个节点都有nodeType属性，用于表明节点的类型。 nodeType有12个数值常量，任何类型必居其一。...各节点类型可能的子节点类型 通过比较上面这些常量，可以确定节点类型： if (someNode.nodeType == 1) { alert("Node is an element."); }...2、插入节点 如果要把节点插入到 childNodes 列表中某个特定的位置上，用insertBefore(要插入的节点，作为参照的节点)。...5、其他方法 cloneNode()，接受一个布尔值参数，表示是否执行深复制。 true, 执行深复制，也就是复制节点及其整个子节点数。 false, 执行浅复制，即只复制节点本身。
{}, ‘item 2’), ); 是不是看起来有点熟悉？...如果我们已知父元素(通过参数传递)，我们就能调用 $parent.removeChild(…) 方法把变化映射到真实的 DOM 上。...== typeof node2 || typeof node1 === ‘string’ && node1 !== node2 || node1.type !...$el; } function changed(node1, node2) { return typeof node1 !...== typeof node2 || typeof node1 === 'string' && node1 !== node2 || node1.type !
, ‘item 2’),); 是不是看起来有点熟悉？...如果我们已知父元素(通过参数传递)，我们就能调用 $parent.removeChild(…) 方法把变化映射到真实的 DOM 上。...还有需要考虑这个节点可以是元素或是文本节点: function changed(node1, node2) { return typeof node1 !...== typeof node2 || typeof node1 === ‘string’ && node1 !== node2 || node1.type !...== typeof node2 || (typeof node1 === "string" && node1 !== node2) || node1.type !
以下常用的几种结点类型 元素类似 节点类型 元素 1 属性 2 文本 3 注释 8 文档 9 访问子结点childNodes 访问选定元素节点下的所有子节点的列表，返回的值可以看作是一个数组，他具有length...语法： node.lastChild 说明： 与elementNode.childNodes[elementNode.childNodes.length-1]是同样的效果。...语法: insertBefore(newnode,node); 参数: newnode: 要插入的新节点。 node: 指定此节点前插入节点。...语法: nodeObject.removeChild(node) 参数: node ：必需，指定需要删除的节点。 我们来看看下面代码，删除子点。 ?...语法： node.replaceChild (newnode,oldnew ) 参数： newnode : 必需，用于替换 oldnew 的对象。
{}, ‘item 2’), ); 是不是看起来有点熟悉？...如果我们已知父元素(通过参数传递)，我们就能调用 parent.removeChild(…) 方法把变化映射到真实的 DOM 上。...== typeof node2 || typeof node1 === ‘string’ && node1 !== node2 || node1.type !...$el; } function changed(node1, node2) { return typeof node1 !...== typeof node2 || typeof node1 === 'string' && node1 !== node2 || node1.type !
= { count: 0, }; handleClick = () => { this.setState({ count: this.state.count + 1,...handleClick = () => { console.log('事件触发'); // this.setState({ // count: this.state.count + 1,...// }); }; 可以看到事件回调已经被执行，一个简单的事件就支持好了。...const prevNode = prevComponent.getHostNode(); prevComponent.unmount(); this.node.replaceChild...，递归receive，类型不同，销毁重建，replaceChild） 旧节点删除 最后是文本叶子节点的实现，可以直接替换文本内容： receive(nextElement) { this.text
特定的Element子类型为其元素定义了特定的属性。 举个栗子 <!.../image/1.png" 数据集属性 可以在元素上添加属性，然后能通过js读取其数据 h5在Elemnent对象上定义了dataset属性，该属性指代一个对象，它的各个属性对于去掉前缀的data-属性...jqueryTest 下面生成一个火花线 html如下所示 1 1 1 2 2 3 4 5...Node类型定义了attributes属性。针对非Element对象任何节点。该属性为null。...>元素替换n节点，并使n成为该元素的子节点 function embolden(n) { // 根据参数为字符串而不是节点，将其当做元素的id,进行查询得到节点,如果传入的是节点，直接进行下一步 if
判断节点类型 节点类型 nodeName nodeType nodeValue Document文档节点 #document 9 null Element元素节点 元素节点的元素名 1 null Attr...referenceElement参数表示指定节点的某个子节点 newElement 表示插入的节点 <!...(newChild, oldChild) 复制节点 克隆一个元素节点会拷贝它所有的属性以及属性值，当然也就包括了属性上绑定的事件，但不会拷贝那些使用...var dupNode = node.cloneNode(deep) node表示被克隆的节点。返回值dupNode 表示克隆后的新节点。...参数deep表示是否进行深度克隆 true：深度克隆，所有后代节点也都会被克隆 false：默认值。
# 虚拟 DOM 之 Diff 算法 上一节讲了虚拟 DOM，但是虚拟 DOM 是如何更新的？新旧节点的 path 又是如何进行的？这都需要一个 Diff 来完成。...# Diff 逻辑 diff 的作用也了解了，他就是通过对比新老 Node，从而得到最后的 Patch 接受两个参数 newNode 和 oldNode // diff.js function diff..., newProps) { let patch = {}; // 1....节点不存在时：REMOVE 文本的变化：TEXT 节点类型相同，属性不同时：ATTR 接点类型不同，使用替换：REPLACE # Patch 逻辑 其实就是元素去打补丁，通过 type 然后执行不同的操作如新增...render(newNode) : document.createTextNode(newNode); node.parentNode.replaceChild(
其一，name属性值 不是必须唯一，多个元素可能有同样的名称；其二，name属性只在少数HTML元素中有效，包括表单、表单元素、iframe 及 img 元素。...var previous = node.previousSibling; 查看示例程序 3.1.7 节点类型-nodeType 返回节点类型的数字表示。...因为文档片段存在于内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流（对元素位置和几何上的计算）。...查看示例程序 8 删除和替换 8.1 删除子节点-removeChild 在父节点上调用 参数是待删除的节点 parent.removeChild(h2); 查看示例程序 8.2 替换子节点-replaceChild...在父节点上调用 第一个参数是新节点 第二个参数是需要替换的节点 parent.replaceChild(h2n , h2); 查看示例程序 9 结尾 9.1 结语 本人知识水平有限，在汇编的过程中时有错误发生
（Text）：标记中的文本 属性节点（Attr）：代表一个属性，元素才有属性 DOM节点类型 NodeType属性来表明节点类型，下面列举12中节点类型 节点类型 描述 1 Element 代表元素...DOM节点关系 nodeType 返回节点类型的数字值（1~12） nodeName 元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document nodeValue...里的，它的nodeType是1 parentElement匹配的是parent为element的情况，而parentNode匹配的则是parent为node的情况。...当父节点的nodeType不是1，即不是element节点的话，它的parentElement就会是null Document文档对象元素查找 BOM核心为window，DOM核心为document(文档对象...：要插入的节点和参照节点 insertAfter() 参照节点之后插入节点，两个参数：要插入的节点和参照节点 replaceChild() 替换节点，两个参数：要插入的节点和要替换的节点(被移除) removeChild
DOM Node对象代表了这些节点，是一个抽象的概念，用于表示文档中的层次结构。 Node对象有不同的类型，包括元素节点、属性节点、文本节点等，每种类型的节点在DOM中扮演着不同的角色。...1. 元素节点（Element Node） 元素节点代表HTML文档中的元素，例如、、等标签。元素节点可以包含其他节点，因此它们构成了DOM树的分支。 2....访问和操作DOM Node 1. 访问子节点 在DOM中，节点可以包含子节点，可以使用以下属性来访问和操作子节点： childNodes：获取包含元素的所有子节点的NodeList。...replaceChild(newNode, oldNode)：用一个新节点替换另一个节点。 removeChild(node)：从父节点中删除指定的子节点。...这篇博客深入介绍了JavaScript DOM Node对象，包括不同类型的节点（元素节点、文本节点、属性节点、注释节点和文档节点）以及如何访问、创建、添加、删除和替换节点。
Node对象 Node是一个接口，各种类型的DOM API对象会从这个接口继承，其允许我们使用相似的方式对待这些不同类型的对象。...Node.prototype.isConnected: 只读，返回一个布尔值用来检测该节点是否已连接(直接或者间接)到一个上下文对象上，比如通常DOM情况下的Document对象，或者在shadow DOM...Node.prototype.parentElement: 只读，返回一个当前节点的父节点Element。如果当前节点没有父节点或者说父节点不是一个元素Element, 这个属性返回null。...Node.prototype.isDefaultNamespace(): 返回一个Boolean类型值，接受一个命名空间URI作为参数，当参数所指代的命名空间是默认命名空间时返回true，否则返回false...Node.prototype.replaceChild(): 对选定的节点，替换一个子节点Node为另外一个节点。
非组件节点的diff分析 diff的流程，我们从简单到复杂进行分析 通过前面几篇文章的源码阅读，我们也大概清楚了diff函数参数的定义和component各参数的作用 /** * @param dom...2、html的标签类型 - 如果vnode的标签对比dom发生了改变（例如原来是span，后来是div），则新建一个div节点，然后把span的子元素都添加到新的div节点上，把新的div节点替换掉旧的...isNamedNode(dom, vnodeName)) { // isNamedNode方法就是比较dom和vnode的标签类型是不是一样 out = createNode...,// 用来存储旧dom中，没有提供key属性的dom node keyed = {},// 用来存旧dom中有key的dom node， 首先，第一步的操作就是对旧的dom node进行分类...然后执行idiff函数 child = idiff(child, vchild, context, mountAll);。
p2">新位置 // demo 下 id=p1节点 node = document.getElementById('p1'); demo2...= document.getElementById('demo2'); // div 添加子节点 demo2.appendChild(node); ...语法 node.insertBefore(newnode,existingnode) 参数 类型 描述 newnode 节点对象 必须。要插入的节点对象 existingnode 节点对象 必须。...)); 如果第二个参数传null，跟 appendChild() 方法实现效果一样，在div后面加子元素 div.insertBefore(btn, null); removeChild...)); 移除后效果 replaceChild replaceChild 替换父元素下的子节点 这是文本内容
前言在前端工程上，日益复杂的今天，性能优化已经成为必不可少的环境。前端需要从每一个细节的问题去优化。那么如何更优，当然与他的如何怎么实现的有关。比如key为什么不能使用index呢？...num += 1; } } reloadDom( item, patchs ); last = item; })}//执行每个dom...node.parentNode.replaceChild( change.node.create() , node ); break; case stateType.Move...formClone = fromNode.cloneNode(true); let toClone = toNode.cloneNode(true); node.replaceChild...( fromNode, toClone ) ; node.replaceChild( toNode, formClone ) ; break;
), h(‘li’, {}, ‘item 2’), ); 看起来清晰多了，是不是？...Babel：嘿，用 h 而不是 React.createElement 来编译 jsx。...基本上我们要写个算法，比较两棵新旧树的差异，并对真实 DOM 做最少必要的更新。 如何比较树的差异？...我们应该考虑到元素和文本节点： function changed(node1, node2) { return typeof node1 !...== typeof node2 || typeof node1 === ‘string’ && node1 !== node2 || node1.type !
前言 在前端工程上，日益复杂的今天，性能优化已经成为必不可少的环境。前端需要从每一个细节的问题去优化。那么如何更优，当然与他的如何怎么实现的有关。比如key为什么不能使用index呢？.../执行每个dom的变化 function changeDom( node, changes ){ changes && changes.forEach( change => {...&& node.parentNode.replaceChild( change.node.create() , node ); break; case...let toClone = toNode.cloneNode(true); node.replaceChild( fromNode, toClone ) ;...node.replaceChild( toNode, formClone ) ; break; case stateType.Add:
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
