javascript 包裹節點提高效率

2024-05-06 14:11:22

字體：大中小

來源：轉載

供稿：網友

原理基本是這樣，如果傳入的是字符串，那么讓它們變成一個元素節點，不過這元素節點也可以有許多層，在最內層把要包裹的元素放進。把字符串變成元素節點的方法有如下幾個。
1，createElement，IE可以連元素屬性也一起創建，但只能創建一層。
2，innerHTML，不過需要對原來的字符串進行處理，IE與FF都有許多意想不到的默認行為，可以為你多加一點東西或少加一點東西。
3，createContextualFragment，由于Opera的行為有點怪異，需要選中修改元素的位置。經日本人的測試，它轉換字符串成節點的效率比innerHTML高多了，也安全多了，真是強者愈強，弱者愈弱。如果是傳入元素節點，需要克隆一下，要不都變成wrapAll。如果是函數，把當前元素傳進去，利用它的某些屬性創建一個包裹元素。
最初的實驗品（這里的wrapOuter相當于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需刷新才能執行]

發現在Opera中出了些問題，range.setStartAfter(document.body)要改成我們的目標元素才行。再者，將插入包裹元素的方式由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="bjlvvdf" class=page1> <p align="center" class="pageLink"></p> </div> <div id="nnffpzx" class="fenxiang">  <div style="text-align:left">上一篇：<a href='/wen/2024/05-06/1043784.html'>getElementsByTagName vs selectNodes效率及兼容的selectNodes實現</a></div> <br> <div style="text-align:left">下一篇：<a href='/wen/2024/05-06/1043786.html'>javascript入門基礎之私有變量</a></div> <br> <script src=/d/js/acmsd/gao21.js></script>  </div> <div id="bbjjzbz" class="pinglun">  <script> function CheckPl(obj) { if(obj.saytext.value=="") { alert("您沒什么話要說嗎？"); 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>發表評論</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>條評論</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">驗證碼: <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" /> 匿名發表</td> </tr> </table> <textarea name="saytext" cols="70" rows="6" id="saytext">