解密jQuery内核 DOM操做的核心函数domManip

domManip是什么

dom即Dom元素，Manip是Manipulate的缩写，连在一块儿就是Dom操做的意思。

.domManip()是jQuery DOM操做的核心函数

对封装的节点操做作了参数上的校订支持，与对应处理的调用

append、prepend、before、after、replaceWith

appendTo、prependTo、insertBefore、insertAfter、replaceAll

 

---

为何须要用这个domManip函数呢？

咱们知道节点操做浏览器提供的接口无非就是那么几个

appendChild()

经过把一个节点增长到当前节点的childNodes[]组，给文档树增长节点。

cloneNode()

复制当前节点，或者复制当前节点以及它的全部子孙节点。

hasChildNodes()

若是当前节点拥有子节点，则将返回true。

insertBefore()

给文档树插入一个节点，位置在当前节点的指定子节点以前。若是该节点已经存在，则删除之再插入到它的位置。

removeChild()

从文档树中删除并返回指定的子节点。

replaceChild()

从文档树中删除并返回指定的子节点，用另外一个节点替换它。

以上接口都有一个特性，传入的是一个节点元素

若是咱们传递不是一个dom节点元素，若是是一个字符串，一个函数或者其余呢，因此针对全部接口的操做，jQuery会抽象出一种参数的处理方案

也就是domManip存在的意义了，针对不少相似接口的参数抽象jQuery内部有不少这样的函数了，如以前属性操做中的jQuery.access

 

---

jQuery支持的参数传递

jquery对接点才操做封装出了一系列的接口，能够接受HTML字符串，DOM 元素，元素数组，或者jQuery对象，用来插在集合中每一个匹配元素的不一样位置

例如

HTML结构

$('.inner').after('<p>Test</p>');

$对象

$('.container').after($('h2'));

回调函数

一个返回HTML字符串，DOM 元素， 或者 jQuery 对象的函数，插在每一个匹配元素的后面。接收元素在集合中的索引位置做为参数。在函数中this指向元素集合中的当前元素

$('p').after(function() {
  return '<div>' + this.className + '</div>';
});

 

---

domManip源码

针对节点的操做有几个重点的细节

1. 保证最终操做的永远是dom元素，浏览器的最终API只认识那么几个接口，因此若是传递是字符串或者其余的，固然须要转换
2. 针对节点的大量操做，咱们确定是须要引入文档碎片作优化的，这个必不可少

 

domManip的结构

传递的参数， 对应的处理回调，节点是否替换

domManip: function( args, callback, allowIntersection ) {

 

---

参数初始化

iNoClone = l - 1,  是否为克隆节点，根据后面的大意，若是当前的jQuery对象是一个合集对象花

那么意味着经过文档碎片构件出来的dom，只能是副本克隆到每个合集对象中

value 是第一个元素，后边只针对args[0]进行检测，意味着args中的元素必须是统一类型；

 

---

WebKit checked属性

若是是回调函数，或者跳过WebKit checked属性

在WebKit中，不能克隆包含了已选中多选按钮的文档碎片，这有什么问题？以后在测

 

---

文档碎片

将html转化成dom

其实最终是经过jQuery.buildFragment方法构件出文档碎片

文档碎片的好处就不用多说了，多个绘制操做的时候合并必备

 

---

插入页面

这里就用了到iNoClone了

一看代码就很明显 修正了node节点， 为何要修正？

由于经过文档碎片构建出来的只同样个dom，可是jQuery是一个合集对象，因此都须要用到这个碎片了，因此你把args append到第一个元素上了，jQuery实例的第二个元素他怎么办啊？他没有能够append的了？！因此，上来要判断一下实例的长度是否是大于1，大于1就须要cloneNode。

callback就是对应了全部api须要执行的操做方法了

 

---

jQuery2X是高级版本，因此不兼容IE6等低级浏览器了，天然在IE6中插入tr，若是漏掉tbody的问题也就不须要修复了

domManip其实就只作了2事件

第一个就是判断3种传递参数所映射的对应操做

第二个就是经过调用jQuery.buildFragment生成文档碎片

DocumentFragment碎片是你们容易忽略的东西，下一章就详细学习下~