Jquery-1.9.1源码分析系列（十一）之DOM操作

2024-03-25 09:28:03 24

DOM操作包括append、prepend、before、after、replaceWith、appendTo、prependTo、insertBefore、insertAfter、replaceAll。其核心处理函数是domManip。

DOM操作函数中后五种方法使用的依然是前面五种方法，源码

jQuery.each({
appendTo:"append",
prependTo:"prepend",
insertBefore:"before",
insertAfter:"after",
replaceAll:"replaceWith"
},function(name,original){
jQuery.fn[name]=function(selector){
varelems,
i=0,
ret=[],
insert=jQuery(selector),
last=insert.length-1;
for(;i<=last;i++){
elems=i===last?this:this.clone(true);
jQuery(insert[i])[original](elems);
//现代浏览器调用apply会把jQuery对象当如数组，但是老版本ie需要使用.get()
core_push.apply(ret,elems.get());
}
returnthis.pushStack(ret);
};
});

浏览器原生的插入节点的方法有两个：appendChild和inserBefore，jQuery利用这两个方法拓展了如下方法

jQuery.fn.append使用this.appendChild(elem)

jQuery.fn.prepend使用this.insertBefore(elem,this.firstChild)

jQuery.fn.before使用this.parentNode.insertBefore(elem,this);

jQuery.fn.after使用this.parentNode.insertBefore(elem,this.nextSibling);

jQuery.fn.replaceWith使用this.parentNode.insertBefore(elem,this.nextSibling);

看一个例子的源码(jQuery.fn.append)

append:function(){
returnthis.domManip(arguments,true,function(elem){
if(this.nodeType===1||this.nodeType===11||this.nodeType===9){
this.appendChild(elem);
}
});
}

根据上面的源码。猜测domManip的作用是遍历当前jQuery对象所匹配的元素，然后每个元素调用传入的回调，并将要插入的节点（如果是字符串那么需要创建文档碎片节点）作为传入的回调的参数；并执行传入的回调。

接下来分析domManip,看猜测是否正确。dom即Dom元素，Manip是Manipulate的缩写，连在一起的字面意思就是就是Dom操作。

a.domManip:function(args,table,callback)解析

args待插入的DOM元素或HTML代码

table是否需要修正tbody，这个变量是优化的结果

callback回调函数，执行格式为callback.call(目标元素即上下文,待插入文档碎片/单个DOM元素)

先看流程，再看细节

第一步，变量初始化。其中iNoClone在后面会用到，如果当前的jQuery对象所匹配的元素不止一个（n>1）的话，意味着构建出来的文档碎片需要被n用到，则需要被克隆（n-1）次，加上碎片文档本身才够n次使用；value是第一个参数args的第一个元素，后面会对value是函数做特殊处理；

varfirst,node,hasScripts,
scripts,doc,fragment,
i=0,
l=this.length,
set=this,
iNoClone=l-1,
value=args[0],
isFunction=jQuery.isFunction(value);

第二步，处理特殊下要将当前jQuery对象所匹配的元素一一调用domManip。这种特殊情况有两种：第一种，如果传入的节点是函数（即value是函数）则需要当前jQuery对象所匹配的每个元素都将函数计算出的值作为节点代入domManip中处理。第二种，webkit下，我们不能克隆文含有checked的文档碎片；克隆的文档不能重复使用，那么只能是当前jQuery对象所匹配的每个元素都调用一次domManip处理。

//webkit下，我们不能克隆文含有checked的档碎片
if(isFunction||!(l<=1||typeofvalue!=="string"||jQuery.support.checkClone||!rchecked.test(value))){
returnthis.each(function(index){
varself=set.eq(index);
//如果args[0]是函数，则执行函数返回结果替换原来的args[0]
if(isFunction){
args[0]=value.call(this,index,table?self.html():undefined);
}
self.domManip(args,table,callback);
});
}

第三步，处理正常情况，使用传入的节点构建文档碎片，并插入文档中。这里面构建的文档碎片就需要重复使用，区别于第二步的处理。这里面需要注意的是如果是script节点需要在加载完成后执行。顺着源码顺序看一下过程

构建文档碎片

fragment=jQuery.buildFragment(args,this[0].ownerDocument,false,this);
first=fragment.firstChild;
if(fragment.childNodes.length===1){
fragment=first;
}

分离出其中的script，这其中有一个函数disableScript更改了script标签的type值以确保安全，原来的type值是"text/javascript"，改成了"true/text/javascript"或"false/text/javascript"

scripts=jQuery.map(getAll(fragment,"script"),disableScript);
hasScripts=scripts.length;

文档碎片插入页面

for(;i<l;i++){
node=fragment;
if(i!==iNoClone){
node=jQuery.clone(node,true,true);
//Keepreferencestoclonedscriptsforlaterrestoration
if(hasScripts){
jQuery.merge(scripts,getAll(node,"script"));
}
}
callback.call(
table&&jQuery.nodeName(this[i],"table")?
findOrAppend(this[i],"tbody"):
this[i],
node,
i
);
}

执行script，分两种情况，远程的使用ajax来处理，本地的直接执行。

if(hasScripts){
doc=scripts[scripts.length-1].ownerDocument;
//Reenablescripts
jQuery.map(scripts,restoreScript);
//在第一个文档插入使执行可执行脚本
for(i=0;i<hasScripts;i++){
node=scripts[i];
if(rscriptType.test(node.type||"")&&
!jQuery._data(node,"globalEval")&&jQuery.contains(doc,node)){
if(node.src){
//Hopeajaxisavailable...
jQuery.ajax({
url:node.src,
type:"GET",
dataType:"script",
async:false,
global:false,
"throws":true
});
}else{
jQuery.globalEval((node.text||node.textContent||node.innerHTML||"").replace(rcleanScript,""));
}
}
}
}

b.dom操作拓展

jQuery.fn.text

jQuery.fn.text:function(value){
returnjQuery.access(this,function(value){
returnvalue===undefined?
jQuery.text(this):
this.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(value));
},null,value,arguments.length);
}

最终执行value===undefined?jQuery.text(this):this.empty().append((this[0]&&this[0].ownerDocument||document).createTextNode(value));

其中jQuery.text=Sizzle.getText;

jQuery.fn.html

函数使用jQuery.access来处理

jQuery.fn.html:function(value){
returnjQuery.access(this,function(value){...},null,value,arguments.length);
}

如果没有参数表示是取值

if(value===undefined){
returnelem.nodeType===1?
elem.innerHTML.replace(rinlinejQuery,""):
undefined;
}

否则看是否能用innerHTML添加内容。点击参考兼容问题

//看看我们是否可以走了一条捷径，只需使用的innerHTML
//需要执行的代码script|style|link等不能使用innerHTML
//htmlSerialize:确保link节点能使用innerHTML正确序列化,这就需要在IE浏览器的包装元素
//leadingWhitespace:IEstrips使用.innerHTML需要以空白开头
//不是需要额外添加结束标签或外围包装标签的元素
if(typeofvalue==="string"&&!rnoInnerhtml.test(value)&&
(jQuery.support.htmlSerialize||!rnoshimcache.test(value))&&
(jQuery.support.leadingWhitespace||!rleadingWhitespace.test(value))&&
!wrapMap[(rtagName.exec(value)||["",""])[1].toLowerCase()]){
value=value.replace(rxhtmlTag,"<$1></$2>");
try{
for(;i<l;i++){
//移除元素节点和缓存，阻止内存泄漏
elem=this[i]||{};
if(elem.nodeType===1){
jQuery.cleanData(getAll(elem,false));
elem.innerHTML=value;
}
}
elem=0;
//如果使用innerHTML抛出异常,使用备用方法
}catch(e){}
}

如果不能使用innerHTML或使用不成功（抛出异常）,则使用备用方法append

//备用方法，使用append添加节点
if(elem){
this.empty().append(value);
}

jQuery.fn.wrapAll（用单个标签将所有匹配元素包裹起来）
处理步骤：
传入参数是函数则将函数结果传入
if(jQuery.isFunction(html)){
returnthis.each(function(i){
jQuery(this).wrapAll(html.call(this,i));
});
}
创建包裹层
//获得包裹标签Theelementstowrapthetargetaround
varwrap=jQuery(html,this[0].ownerDocument).eq(0).clone(true);
if(this[0].parentNode){
wrap.insertBefore(this[0]);
}

用包裹裹住当前jQuery对象

wrap.map(function(){
varelem=this;
while(elem.firstChild&&elem.firstChild.nodeType===1){
elem=elem.firstChild;
}
returnelem;
}).append(this);

注意：当前jQuery对象匹配的元素最好只有一个，如果有多个的话不推荐使用，这种情况慎用，后面举例可以看到。

简单的例子,原DOM为(后面都使用这个例子)

<divid='center'class="center">
<divid='ss'class="center">
<inputtype='submit'id='left'class="left">
</div>
</div>
<divclass="right">我是right</div>
$('#center').wrapAll("<p></p>")后，dom变成了
<p>
<divid="center"class="center">
<divid="ss"class="center">
<inputtype="submit"id="left"class="left">
</div>
</div>
</p>
<divclass="right">我是right</div>

慎用：如果当前jQuery所匹配的元素不止一个，例如原DOM执行$('div').wrapAll(“”)后结果DOM变成

<p>
<divid="center"class="center"></div>
<divid="ss"class="center">
<inputtype="submit"id="left"class="left">
</div>
<divclass="right">我是right</div>
</p>

看到结果了吧，本来#center是#ss的父节点，结果变成了#ss的兄弟节点。

jQuery.fn.wrapInner（在每个匹配元素的所有子节点外部包裹指定的HTML结构）

处理步骤：

传入参数是函数则将函数结果传入

if(jQuery.isFunction(html)){
returnthis.each(function(i){
jQuery(this).wrapInner(html.call(this,i));
});
}

遍历jQuery对象数组，获取每个元素包含的内容（所有子节点）contents，然后使用warpAll包裹住contents

returnthis.each(function(){
varself=jQuery(this),
contents=self.contents();

if(contents.length){
contents.wrapAll(html);

}else{
self.append(html);
}
});

还是使用上面的例子中的原DOM,执行$('div').wrapInner('')后结果DOM变成

<divid="center"class="center">
<p>
<divid="ss"class="center">
<p>
<inputtype="submit"id="left"class="left">
</p>
</div>
</p>
</div>
<divclass="right">
<p>
我是right
</p>
</div>

jQuery.fn.wrap（在每个匹配元素外部包裹指定的HTML结构）

对jQuery的每个元素分别使用wrapAll包裹一下

returnthis.each(function(i){
jQuery(this).wrapAll(isFunction?html.call(this,i):html);
});

行$('div').wrap('')后结果DOM变成

<p>
<divid="center"class="center">
<p>
<divid="ss"class="center">
<inputtype="submit"id="left"class="left">
</div>
</p>
</div>
</p>
<p>
<divclass="right">我是right</div>
</p>

jQuery.fn.unwrap（移除每个匹配元素的父元素）

使用replaceWith用匹配元素父节点的所有子节点替换匹配元素的父节点。当然了父节点是body/html/document肯定是移除不了的

returnthis.parent().each(function(){
if(!jQuery.nodeName(this,"body")){
jQuery(this).replaceWith(this.childNodes);
}
}).end();
执行$('div').wrap()后结果DOM变成
<divid="ss"class="center">
<inputtype="submit"id="left"class="left">
</div>
<divclass="right">我是right</div>

jQuery.fn.remove(从文档中移除匹配的元素)

你还可以使用选择器进一步缩小移除的范围，只移除当前匹配元素中符合指定选择器的部分元素。

与detach()相比，remove()函数会同时移除与元素关联绑定的附加数据(data()函数)和事件处理器等(detach()会保留)。

for(;(elem=this[i])!=null;i++){
if(!selector||jQuery.filter(selector,[elem]).length>0){
//detach传入的参数keepData为true，不删除缓存
if(!keepData&&elem.nodeType===1){
//清除缓存
jQuery.cleanData(getAll(elem));
}
if(elem.parentNode){
if(keepData&&jQuery.contains(elem.ownerDocument,elem)){
setGlobalEval(getAll(elem,"script"));
}
elem.parentNode.removeChild(elem);
}
}
}

可以看到其中有一个重要的函数cleanData，该方法是用来清除缓存：遍历每一个节点元素，对每一个节点元素做一下处理：

1.获取当前元素对应的缓存

id=elem[internalKey];
data=id&&cache[id];

2.如果有绑定事件，则遍历解绑事件

if(data.events){
for(typeindata.events){
if(special[type]){
jQuery.event.remove(elem,type);
//这是一个快捷方式，以避免jQuery.event.remove的开销
}else{
jQuery.removeEvent(elem,type,data.handle);
}
}
}

3.如果jQuery.event.remove没有移除cache，则手动移除cache。其中IE需要做一些兼容处理，而且最终会将删除历史保存如core_deletedIds中

//当jQuery.event.remove没有移除cache的时候，移除cache
if(cache[id]){
deletecache[id];
//IE不允许从节点使用delete删除expando特征,
//也能对文件节点使用removeAttribute函数;
//我们必须处理所有这些情况下，
if(deleteExpando){
deleteelem[internalKey];
}elseif(typeofelem.removeAttribute!==core_strundefined){
elem.removeAttribute(internalKey);
}else{
elem[internalKey]=null;
}
core_deletedIds.push(id);
}

jQuery.fn.detach

detach:function(selector){
returnthis.remove(selector,true);
},

jQuery.fn.empty（清空每个匹配元素内的所有内容（所有子节点））

函数将会移除每个匹配元素的所有子节点(包括文本节点、注释节点等所有类型的节点),会清空相应的缓存数据。

for(;(elem=this[i])!=null;i++){
//防止内存泄漏移除元素节点缓存
if(elem.nodeType===1){
jQuery.cleanData(getAll(elem,false));
}
//移除所有子节点
while(elem.firstChild){
elem.removeChild(elem.firstChild);
}
//IE<9，select节点需要将option置空
if(elem.options&&jQuery.nodeName(elem,"select")){
elem.options.length=0;
}
}

Jquery-1.9.1源码分析系列（十一）之DOM操作

热门推荐

随机推荐