javascript 包裹節(jié)點(diǎn) 提高效率

2024-05-06 14:11:22

字體：大中小

供稿：網(wǎng)友

原理基本是這樣，如果傳入的是字符串，那么讓它們變成一個(gè)元素節(jié)點(diǎn)，不過(guò)這元素節(jié)點(diǎn)也可以有許多層，在最內(nèi)層把要包裹的元素放進(jìn)。把字符串變成元素節(jié)點(diǎn)的方法有如下幾個(gè)。
1，createElement，IE可以連元素屬性也一起創(chuàng)建，但只能創(chuàng)建一層。
2，innerHTML，不過(guò)需要對(duì)原來(lái)的字符串進(jìn)行處理，IE與FF都有許多意想不到的默認(rèn)行為，可以為你多加一點(diǎn)東西或少加一點(diǎn)東西。
3，createContextualFragment，由于Opera的行為有點(diǎn)怪異，需要選中修改元素的位置。經(jīng)日本人的測(cè)試，它轉(zhuǎn)換字符串成節(jié)點(diǎn)的效率比innerHTML高多了，也安全多了，真是強(qiáng)者愈強(qiáng)，弱者愈弱。如果是傳入元素節(jié)點(diǎn)，需要克隆一下，要不都變成wrapAll。如果是函數(shù)，把當(dāng)前元素傳進(jìn)去，利用它的某些屬性創(chuàng)建一個(gè)包裹元素。
最初的實(shí)驗(yàn)品（這里的wrapOuter相當(dāng)于jQuery的wrap）：
代碼如下:
var parseHTML = function(str) {
if(document.createRange){
var range = document.createRange()
range.setStartAfter(document.body)
return range.createContextualFragment(str)
}else{
return document.createElement(str)
}
}
var wrapOuter = function(target,html){
var wrap = parseHTML(html) ;
target.parentNode.insertBefore(wrap,target);
target.previousSibling.appendChild(target)
}

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

發(fā)現(xiàn)在Opera中出了些問(wèn)題，range.setStartAfter(document.body)要改成我們的目標(biāo)元素才行。再者，將插入包裹元素的方式由insertBefore改為replaceChild，提高效率。
代碼如下:
var wrapOuter = function(target,html){
var wrap = html
if(Object.prototype.toString.call(html) === "[object String]"){
if(document.createRange){
var range=document.createRange();
range.selectNodeContents(target);
wrap = range.createContextualFragment(html).firstChild;
}else {
wrap = document.createElement(str);
}
}
target.parentNode.replaceChild(wrap,target);
wrap.appendChild(target)
}

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta content="IE=8" http-equiv="X-UA-Compatible"/> </SPAN> </div> </div> <div id="iwvjtn8m0" class=page1> <p align="center" class="pageLink"></p> </div> <div id="iwvjtn8m0" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/05-06/1043784.html'>getElementsByTagName vs selectNodes效率及兼容的selectNodes實(shí)現(xiàn)</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/05-06/1043786.html'>javascript入門基礎(chǔ)之私有變量</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="iwvjtn8m0" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒什么話要說(shuō)嗎？"); obj.saytext.focus(); return false; } return true; } </script><form action="/e/pl/doaction.php" method="post" name="saypl" id="saypl" onsubmit="return CheckPl(document.saypl)"> <table width="100%" border="0" cellpadding="0" cellspacing="0" id="plpost"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="0" class="title"> <tr> <td><strong>發(fā)表評(píng)論</strong></td> <td align="right"><a href="/e/pl/?classid=338&id=1043785">共有<span><script type="text/javascript" src="/e/public/ViewClick/?classid=338&id=1043785&down=2"></script></span>條評(píng)論</a></td> </tr> </table> <table width="100%" border="0" cellspacing="10" cellpadding="0"> <tr> <td><table width="100%" border="0" cellpadding="0" cellspacing="2"> <tr> <td width="56%" align="left">用戶名: <input name="username" type="text" class="inputText" id="username" value="" size="16" /></td> <td width="44%" align="left">密碼: <input name="password" type="password" class="inputText" id="password" value="" size="16" /></td> </tr> <tr> <td align="left">驗(yàn)證碼: <input name="key" type="text" class="inputText" size="10" /> <img src="/e/ShowKey/?v=pl" align="absmiddle" /> </td> <td align="left"><input name="nomember" type="checkbox" id="nomember" value="1" checked="checked" /> 匿名發(fā)表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">