关于innerHTML 赋值问题
最近发现各大类库都能利用div.innerHTML=HTML片断来生成节点元素，再把它们插入到目标元素的各个位置上。这东西实际上就是insertAdjacentHTML，但是IE可恶的innerHTML把这优势变成劣势。首先innerHTML会把里面的某些位置的空白去掉，见下面运行框的结果：（复制运行）
<!doctype html>
<htmldir="ltr"lang="zh-CN">
<head>
<metacharset="utf-8"/>
<title>
IE的innerHTMLBy司徒正美
</title>
<scripttype="text/javascript">
window.onload=function(){
vardiv=document.createElement("div");
div.innerHTML="<td><b>司徒</b>正美</td>"
alert("|"+div.innerHTML+"|");
varc=div.childNodes;
alert("生成的节点个数"+c.length);
for(vari=0,n=c.length;i<n;i++){
alert(c[i].nodeType);
if(c[i].nodeType===1){
alert("::"+c[i].childNodes.length);
}
}
}
</script>
</head>
<body>
<pid="p">
</p>
</body>
</html>另一个可恶的地方是，在IE中以下元素的innerHTML是只读的：col、 colgroup、frameset、html、 head、style、table、tbody、 tfoot、 thead、title 与 tr。为了收拾它们，Ext特意弄了个insertIntoTable。insertIntoTable就是利用DOM的insertBefore与appendChild来添加，情况基本同jQuery。不过jQuery是完全依赖这两个方法，Ext还使用了insertAdjacentHTML。为了提高效率，所有类库都不约而同地使用了文档碎片。基本流程都是通过div.innerHTML提取出节点，然后转移到文档碎片上，然后用insertBefore与appendChild插入节点。对于火狐，Ext还使用了createContextualFragment解析文本，直接插入其目标位置上。显然，Ext的比jQuery是快许多的。不过jQuery的插入的不单是HTML片断，还有各种节点与jQuery对象。下面重温一下jQuery的工作流程吧。
append: function() {
//传入arguments对象，true为要对表格进行特殊处理，回调函数
returnthis.domManip(arguments,true,function(elem){
if(this.nodeType==1)
this.appendChild(elem);
});
},
domManip:function(args,table,callback){
if(this[0]){//如果存在元素节点
varfragment=(this[0].ownerDocument||this[0]).createDocumentFragment(),
//注意这里是传入三个参数
scripts=jQuery.clean(args,(this[0].ownerDocument||this[0]),fragment),
first=fragment.firstChild;
if(first)
for(vari=0,l=this.length;i<l;i++)
callback.call(root(this[i],first),this.length>1||i>0?
fragment.cloneNode(true):fragment);
if(scripts)
jQuery.each(scripts,evalScript);
}
returnthis;
functionroot(elem,cur){
returntable&&jQuery.nodeName(elem,"table")&&jQuery.nodeName(cur,"tr")?
(elem.getElementsByTagName("tbody")[0]||
elem.appendChild(elem.ownerDocument.createElement("tbody"))):
elem;
}
}
//elems为arguments对象，context为document对象，fragment为空的文档碎片
clean:function(elems,context,fragment){
context=context||document;
//!context.createElementfailsinIEwithanerrorbutreturnstypeof'object'
if(typeofcontext.createElement==="undefined")
//确保context为文档对象
context=context.ownerDocument||context[0]&&context[0].ownerDocument||document;
//Ifasinglestringispassedinandit'sasingletag
//justdoacreateElementandskiptherest
//如果文档对象里面只有一个标签，如<div>
//我们大概可能是在外面这样调用它$(this).append("<div>")
//这时就直接把它里面的元素名取出来，用document.createElement("div")创建后放进数组返回
if(!fragment&&elems.length===1&&typeofelems[0]==="string"){
varmatch=/^<(\w+)\s*\/?>$/.exec(elems[0]);
if(match)
return[context.createElement(match[1])];
}
//利用一个div的innerHTML创建众节点
varret=[],scripts=[],div=context.createElement("div");
//如果我们是在外面这样添加$(this).append("<td>表格1</td>"，"<td>表格1</td>"，"<td>表格1</td>")
//jQuery.each按它的第四种支分方式（没有参数，有length）遍历aguments对象，callback.call(value,i,value)
jQuery.each(elems,function(i,elem){//i为索引，elem为arguments对象里的元素
if(typeofelem==="number")
elem+='';
if(!elem)
return;
//ConverthtmlstringintoDOMnodes
if(typeofelem==="string"){
//Fix"XHTML"-styletagsinallbrowsers
elem=elem.replace(/(<(\w+)[^>]*?)\/>/g,function(all,front,tag){
returntag.match(/^(abbr|br|col|img|input|link|meta|param|hr|area|embed)$/i)?
all:
front+"></"+tag+">";
});
//Trimwhitespace,otherwiseindexOfwon'tworkasexpected
vartags=elem.replace(/^\s+/,"").substring(0,10).toLowerCase();
varwrap=
//optionoroptgroup
!tags.indexOf("<opt")&&
[1,"<selectmultiple='multiple'>","</select>"]||
!tags.indexOf("<leg")&&
[1,"<fieldset>","</fieldset>"]||
tags.match(/^<(thead|tbody|tfoot|colg|cap)/)&&
[1,"<table>","</table>"]||
!tags.indexOf("<tr")&&
[2,"<table><tbody>","</tbody></table>"]||
//<thead>matchedabove
(!tags.indexOf("<td")||!tags.indexOf("<th"))&&
[3,"<table><tbody><tr>","</tr></tbody></table>"]||
!tags.indexOf("<col")&&
[2,"<table><tbody></tbody><colgroup>","</colgroup></table>"]||
//IEcan'tserialize<link>and<script>tagsnormally
!jQuery.support.htmlSerialize&&//用于创建link元素
[1,"div<div>","</div>"]||
[0,"",""];
//Gotohtmlandback,thenpeeloffextrawrappers
div.innerHTML=wrap[1]+elem+wrap[2];//比如"<table><tbody><tr>"+<td>表格1</td>+"</tr></tbody></table>"
//Movetotherightdepth
while(wrap[0]--)
div=div.lastChild;
//处理IE自动插入tbody，如我们使用$('<thead></thead>')创建HTML片断，它应该返回
//'<thead></thead>',而IE会返回'<thead></thead><tbody></tbody>'
if(!jQuery.support.tbody){
//Stringwasa<table>,*may*havespurious<tbody>
varhasBody=/<tbody/i.test(elem),
tbody=!tags.indexOf("<table")&&!hasBody?
div.firstChild&&div.firstChild.childNodes:
//Stringwasabare<thead>or<tfoot>
wrap[1]=="<table>"&&!hasBody?
div.childNodes:
[];
for(varj=tbody.length-1;j>=0;--j)
//如果是自动插入的里面肯定没有内容
if(jQuery.nodeName(tbody[j],"tbody")&&!tbody[j].childNodes.length)
tbody[j].parentNode.removeChild(tbody[j]);
}
//IEcompletelykillsleadingwhitespacewheninnerHTMLisused
if(!jQuery.support.leadingWhitespace&&/^\s/.test(elem))
div.insertBefore(context.createTextNode(elem.match(/^\s*/)[0]),div.firstChild);
//把所有节点做成纯数组
elem=jQuery.makeArray(div.childNodes);
}
if(elem.nodeType)
ret.push(elem);
else
//全并两个数组，merge方法会处理IE下object元素下消失了的param元素
ret=jQuery.merge(ret,elem);
});
if(fragment){
for(vari=0;ret[i];i++){
//如果第一层的childNodes就有script元素节点，就用scripts把它们收集起来，供后面用globalEval动态执行
if(jQuery.nodeName(ret[i],"script")&&(!ret[i].type||ret[i].type.toLowerCase()==="text/javascript")){
scripts.push(ret[i].parentNode?ret[i].parentNode.removeChild(ret[i]):ret[i]);
}else{
//遍历各层节点，收集script元素节点
if(ret[i].nodeType===1)
ret.splice.apply(ret,[i+1,0].concat(jQuery.makeArray(ret[i].getElementsByTagName("script"))));
fragment.appendChild(ret[i]);
}
}
returnscripts;//由于动态插入是传入三个参数，因此这里就返回了
}
returnret;
},
真是复杂的让人掉眼泪！不过jQuery的实现并不太高明，它把插入的东西统统用clean转换为节点集合，再把它们放到一个文档碎片中，然后用appendChild与insertBefore插入它们。在除了火狐外，其他浏览器都支持insertAdjactentXXX家族的今日，应该好好利用这些原生API。下面是Ext利用insertAdjactentHTML等方法实现的DomHelper方法，官网给出的数据：
| DOM | .730 | 1.35 | .420 | .280 |
| HTML Fragments | .360 | .380 | .400 | .260 |
| Template | .320 | .335 | .385 | .220 |
| Compiled Template | .295 | .300 | .350 | .210 |
数据来源：《Tutorial:使用DomHelper 创建元素的DOM、HTML片断和模版》
这数据有点老了，而且最新3.03早就解决了在IE table插入内容的诟病（table,tbody,tr等的innerHTML都是只读，insertAdjactentHTML,pasteHTML等方法都无法修改其内容，要用又慢又标准的DOM方法才行，Ext的早期版本就在这里遭遇滑铁卢了）。可以看出，结合insertAdjactentHTML与文档碎片后，IE6插入节点的速度也得到难以置信的提升，直逼火狐。基于它，Ext开发了四个分支方法insertBefore、insertAfter、insertFirst、append，分别对应jQuery的before、after、prepend与append。不过，jQuery还把这几个方法巧妙地调换了调用者与传入参数，衍生出insertBefore、insertAfter、prependTo与appendTo这几个方法。但不管怎么说，jQuery这样一刀切的做法实现令人不敢苛同。下面是在火狐中实现insertAdjactentXXX家族的一个版本：
(function() {
if('HTMLElement'inthis){
if('insertAdjacentHTML'inHTMLElement.prototype){
return
}
}else{
return
}
functioninsert(w,n){
switch(w.toUpperCase()){
case'BEFOREEND':
this.appendChild(n)
break
case'BEFOREBEGIN':
this.parentNode.insertBefore(n,this)
break
case'AFTERBEGIN':
this.insertBefore(n,this.childNodes[0])
break
case'AFTEREND':
this.parentNode.insertBefore(n,this.nextSibling)
break
}
}
functioninsertAdjacentText(w,t){
insert.call(this,w,document.createTextNode(t||''))
}
functioninsertAdjacentHTML(w,h){
varr=document.createRange()
r.selectNode(this)
insert.call(this,w,r.createContextualFragment(h))
}
functioninsertAdjacentElement(w,n){
insert.call(this,w,n)
returnn
}
HTMLElement.prototype.insertAdjacentText=insertAdjacentText
HTMLElement.prototype.insertAdjacentHTML=insertAdjacentHTML
HTMLElement.prototype.insertAdjacentElement=insertAdjacentElement
})()我们可以利用它设计出更快更合理的动态插入方法。下面是我的一些实现：
//四个插入方法，对应insertAdjactentHTML的四个插入位置，名字就套用jQuery的
//stuff可以为字符串，各种节点或dom对象（一个类数组对象，便于链式操作！）
//代码比jQuery的实现简洁漂亮吧！
append:function(stuff){
returndom.batch(this,function(el){
dom.insert(el,stuff,"beforeEnd");
});
},
prepend:function(stuff){
returndom.batch(this,function(el){
dom.insert(el,stuff,"afterBegin");
});
},
before:function(stuff){
returndom.batch(this,function(el){
dom.insert(el,stuff,"beforeBegin");
});
},
after:function(stuff){
returndom.batch(this,function(el){
dom.insert(el,stuff,"afterEnd");
});
}它们里面都是调用了两个静态方法,batch与insert。由于dom对象是类数组对象，我仿效jQuery那样为它实现了几个重要迭代器，forEach、map与filter等。一个dom对象包含复数个DOM元素，我们就可以用forEach遍历它们，执行其中的回调方法。
batch:function(els,callback){
els.forEach(callback);
returnels;//链式操作
},insert方法执行jQuery的domManip方法相应的机能（dojo则为place方法），但insert方法每次处理一个元素节点，不像jQuery那样处理一组元素节点。群集处理已经由上面batch方法分离出去了。
insert : function(el,stuff,where){
//定义两个全局的东西，提供内部方法调用
vardoc=el.ownerDocument||dom.doc,
fragment=doc.createDocumentFragment();
if(stuff.version){//如果是dom对象，则把它里面的元素节点移到文档碎片中
stuff.forEach(function(el){
fragment.appendChild(el);
})
stuff=fragment;
}
//供火狐与IE部分元素调用
dom._insertAdjacentElement=function(el,node,where){
switch(where){
case'beforeBegin':
el.parentNode.insertBefore(node,el)
break;
case'afterBegin':
el.insertBefore(node,el.firstChild);
break;
case'beforeEnd':
el.appendChild(node);
break;
case'afterEnd':
if(el.nextSibling)el.parentNode.insertBefore(node,el.nextSibling);
elseel.parentNode.appendChild(node);
break;
}
};
//供火狐调用
dom._insertAdjacentHTML=function(el,htmlStr,where){
varrange=doc.createRange();
switch(where){
case"beforeBegin"://before
range.setStartBefore(el);
break;
case"afterBegin"://after
range.selectNodeContents(el);
range.collapse(true);
break;
case"beforeEnd"://append
range.selectNodeContents(el);
range.collapse(false);
break;
case"afterEnd"://prepend
range.setStartAfter(el);
break;
}
varparsedHTML=range.createContextualFragment(htmlStr);
dom._insertAdjacentElement(el,parsedHTML,where);
};
//以下元素的innerHTML在IE中是只读的，调用insertAdjacentElement进行插入就会出错
//col,colgroup,frameset,html,head,style,title,table,tbody,tfoot,thead,与tr;
dom._insertAdjacentIEFix=function(el,htmlStr,where){
varparsedHTML=dom.parseHTML(htmlStr,fragment);
dom._insertAdjacentElement(el,parsedHTML,where)
};
//如果是节点则复制一份
stuff=stuff.nodeType?stuff.cloneNode(true):stuff;
if(el.insertAdjacentHTML){//ie,chrome,opera,safari都已实现insertAdjactentXXX家族
try{//适合用于opera,safari,chrome与IE
el['insertAdjacent'+(stuff.nodeType?'Element':'HTML')](where,stuff);
}catch(e){
//IE的某些元素调用insertAdjacentXXX可能出错，因此使用此补丁
dom._insertAdjacentIEFix(el,stuff,where);
}
}else{
//火狐专用
dom['_insertAdjacent'+(stuff.nodeType?'Element':'HTML')](el,stuff,where);
}
}insert方法在实现火狐插入操作中，使用了W3C DOM Range对象的一些罕见方法，具体可到火狐官网查看。下面实现把字符串转换为节点，利用innerHTML这个伟大的方法。Prototype.js称之为_getContentFromAnonymousElement，但有许多问题，dojo称之为_toDom，mootools的Element.Properties.html，jQuery的clean。Ext没有这东西，它只支持传入HTML片断的insertAdjacentHTML方法，不支持传入元素节点的insertAdjacentElement。但有时，我们需要插入文本节点（并不包裹于元素节点之中），这时我们就需要用文档碎片做容器了，insert方法出场了。
parseHTML : function(htmlStr, fragment){
vardiv=dom.doc.createElement("div"),
reSingleTag=/^<(\w+)\s*\/?>$/;//匹配单个标签，如<li>
htmlStr+='';
if(reSingleTag.test(htmlStr)){//如果str为单个标签
return[dom.doc.createElement(RegExp.$1)]
}
vartagWrap={
option:["select"],
optgroup:["select"],
tbody:["table"],
thead:["table"],
tfoot:["table"],
tr:["table","tbody"],
td:["table","tbody","tr"],
th:["table","thead","tr"],
legend:["fieldset"],
caption:["table"],
colgroup:["table"],
col:["table","colgroup"],
li:["ul"],
link:["div"]
};
for(varparamintagWrap){
vartw=tagWrap[param];
switch(param){
case"option":tw.pre='<selectmultiple="multiple">';break;
case"link":tw.pre='fixbug<div>';break;
default:tw.pre="<"+tw.join("><")+">";
}
tw.post="</"+tw.reverse().join("></")+">";
}
varreMultiTag=/<\s*([\w\:]+)/,//匹配一对标签或多个标签，如<li></li>,li
match=htmlStr.match(reMultiTag),
tag=match?match[1].toLowerCase():"";//解析为<li,li
if(match&&tagWrap[tag]){
varwrap=tagWrap[tag];
div.innerHTML=wrap.pre+htmlStr+wrap.post;
n=wrap.length;
while(--n>=0)//返回我们已经添加的内容
div=div.lastChild;
}else{
div.innerHTML=htmlStr;
}
//处理IE自动插入tbody，如我们使用dom.parseHTML('<thead></thead>')转换HTML片断，它应该返回
//'<thead></thead>',而IE会返回'<thead></thead><tbody></tbody>'
//亦即，在标准浏览器中returndiv.children.length会返回1，IE会返回2
if(dom.feature.autoInsertTbody&&!!tagWrap[tag]){
varownInsert=tagWrap[tag].join('').indexOf("tbody")!==-1,//我们插入的
tbody=div.getElementsByTagName("tbody"),
autoInsert=tbody.length>0;//IE插入的
if(!ownInsert&&autoInsert){
for(vari=0,n=tbody.length;i<n;i++){
if(!tbody[i].childNodes.length)//如果是自动插入的里面肯定没有内容
tbody[i].parentNode.removeChild(tbody[i]);
}
}
}
if(dom.feature.autoRemoveBlank&&/^\s/.test(htmlStr))
div.insertBefore(dom.doc.createTextNode(htmlStr.match(/^\s*/)[0]),div.firstChild);
if(fragment){
varfirstChild;
while((firstChild=div.firstChild)){//将div上的节点转移到文档碎片上！
fragment.appendChild(firstChild);
}
returnfragment;
}
returndiv.children;
}嘛，基本上就是这样，运行起来比jQuery快许多，代码实现也算优美，至少没有像jQuery那样乱成一团。jQuery还有四个反转方法。下面是jQuery的实现：
jQuery.each({
appendTo:"append",
prependTo:"prepend",
insertBefore:"before",
insertAfter:"after",
replaceAll:"replaceWith"
},function(name,original){
jQuery.fn[name]=function(selector){//插入物（html,元素节点，jQuery对象）
varret=[],insert=jQuery(selector);//将插入转变为jQuery对象
for(vari=0,l=insert.length;i<l;i++){
varelems=(i>0?this.clone(true):this).get();
jQuery.fn[original].apply(jQuery(insert[i]),elems);//调用四个已实现的插入方法
ret=ret.concat(elems);
}
returnthis.pushStack(ret,name,selector);//由于没有把链式操作的代码分离出去，需要自行实现
};
});我的实现：
dom.each({
appendTo:'append',
prependTo:'prepend',
insertBefore:'before',
insertAfter:'after'
},function(method,name){
dom.prototype[name]=function(stuff){
returndom(stuff)[method](this);
};
});大致的代码都给出，大家可以各取所需
相关推荐
WebVincent 2019-11-17
MrWhite0 2015-03-17
srchange 2016-04-26
htmlman0 2019-04-03
DolphinThinker 2019-06-29
kbkiss 2019-06-29
zwq 2016-04-26
WCschool官方 2015-07-20
lzn 2015-06-10
XaverSun 2015-03-17
sunnylinner 2014-12-19
yaoliuwei 2014-09-25
zhangpeng 2014-09-05
来老师 2014-08-10
zhangpeng 2014-05-04
XaverSun 2013-11-15
careyourself 2013-11-15
maozhuofan 2019-06-18