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 class=page1> <p align="center" class="pageLink"></p> </div> <div 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 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">