getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现


Posted in Javascript onFebruary 26, 2010

于是就测试了下:

var stringToDom=function(text) { 
var doc; 
if(window.ActiveXObject) { 
doc = new ActiveXObject("MSXML2.DOMDocument"); 
doc.loadXML(text).documentElement; 
} else { 
doc = (new DOMParser()).parseFromString(text,"text/xml"); 
} 
return doc; 
} 
var xmlDoc=stringToDom("<body><a href='a'>a</a><a href='b'>b</a></body>"), 
c, 
d1=new Date(); 
for(var i=0;i<100000;i++){ 
c=xmlDoc.getElementsByTagName("a"); 
} 
document.write("getElementsByTagName: ",new Date()-d1); 
d1=new Date(); 
try{ 
for(var i=0;i<100000;i++){ 
c=xmlDoc.selectNodes("a"); 
} 
document.write("<br/>selectNodes: ",new Date()-d1); 
}catch(ex){document.write("<br/>error:"+ex)}

在IE下selectNodes还是快多了,
可以FF下却没有这个方法,google了下,找了方法,使用XPathEvaluator来实现,下面是具体实现,不过效率就不太理想了:
if (!window.ActiveXObject) { 
(function(){ 
var oEvaluator=new XPathEvaluator(),oResult; 
XMLDocument.prototype.selectNodes = function(sXPath) { 
oResult = oEvaluator.evaluate(sXPath, this, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); 
var aNodes = []; 
if (oResult != null) { 
var oElement = oResult.iterateNext(); 
while (oElement) { 
aNodes[aNodes.length]=oElement; 
oElement = oResult.iterateNext(); 
} 
} 
return aNodes; 
} 
})() 
}

evaluate(xpathExpression, contextNode, namespaceResolver, resultType, result);
Returns an XPathResult based on an XPath expression and other given parameters.
xpathExpression is a string representing the XPath to be evaluated.
contextNode specifies the context node for the query (see the [http://www.w3.org/TR/xpath XPath specification). It's common to pass document as the context node.
namespaceResolver is a function that will be passed any namespace prefixes and should return a string representing the namespace URI associated with that prefix. It will be used to resolve prefixes within the XPath itself, so that they can be matched with the document. null is common for HTML documents or when no namespace prefixes are used.
resultType is an integer that corresponds to the type of result XPathResult to return. Use named constant properties, such as XPathResult.ANY_TYPE, of the XPathResult constructor, which correspond to integers from 0 to 9.
result is an existing XPathResult to use for the results. null is the most common and will create a new XPathResult
完整的测试页面:
<!doctype HTML> 
<html> 
<head> 
<title>selectNodes&getElementsByTagName</title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="sohighthesky"/> 
<meta name="Keywords" content="selectNodes vs getElementsByTagName"/> 
</head> 
<body> 
</body> 
<script type="text/javascript"> 
/* 
*author:sohighthesky -- http://www.cnblogs.com/sohighthesky 
*content: selectNodes vs getElementsByTagName 
*/ 
if (!window.ActiveXObject) { 
(function(){ 
var oEvaluator=new XPathEvaluator(),oResult; 
XMLDocument.prototype.selectNodes = function(sXPath) { 
oResult = oEvaluator.evaluate(sXPath, this, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null); 
var aNodes = []; 
if (oResult != null) { 
var oElement = oResult.iterateNext(); 
while (oElement) { 
aNodes[aNodes.length]=oElement; 
oElement = oResult.iterateNext(); 
} 
} 
return aNodes; 
} 
XMLDocument.prototype.selectSingleNode = function(sXPath) { 
oResult = oEvaluator.evaluate(sXPath, this, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null); 
// FIRST_ORDERED_NODE_TYPE returns the first match to the xpath. 
return oResult==null?null:oResult.singleNodeValue; 
} 
})() 
} 
var stringToDom=function(text) { 
var doc; 
if(window.ActiveXObject) { 
doc = new ActiveXObject("MSXML2.DOMDocument"); 
doc.loadXML(text).documentElement; 
} else { 
doc = (new DOMParser()).parseFromString(text,"text/xml"); 
} 
return doc; 
} 
var xmlDoc=stringToDom("<body><a href='a'>a</a><a href='b'>b</a></body>"), 
c, 
d1=new Date(); 
for(var i=0;i<100000;i++){ 
c=xmlDoc.getElementsByTagName("a"); 
} 
document.write("getElementsByTagName: ",new Date()-d1); 
d1=new Date(); 
try{ 
for(var i=0;i<100000;i++){ 
c=xmlDoc.selectNodes("a"); 
} 
document.write("<br/>selectNodes: ",new Date()-d1); 
}catch(ex){document.write("<br/>error:"+ex)} 
/* 
var n=xmlDoc.selectSingleNode("body/a"),doc=xmlDoc.selectSingleNode("body");//alert(n.childNodes[0].nodeValue) 
for(var i=0;i<10000;i++){ 
doc.appendChild(n.cloneNode(true)) 
} 
d1=new Date(); 
c=xmlDoc.getElementsByTagName("a"); 
document.write("<br/>getElementsByTagName: ",new Date()-d1); 
d1=new Date(); 
c=xmlDoc.selectNodes("a"); 
document.write("<br/>selectNodes: ",new Date()-d1); 
*/ 
</script> 
</html>
Javascript 相关文章推荐
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
前台js改变Session的值(用ajax实现)
Dec 28 Javascript
Enter转换为Tab的小例子(兼容IE,Firefox)
Nov 14 Javascript
jQuery对象的selector属性用法实例
Dec 27 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
JavaScript浏览器对象模型BOM(BrowserObjectModel)实例详解
Nov 29 Javascript
js实现导航吸顶效果
Feb 24 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
微信小程序实现美团菜单
Jun 06 Javascript
微信小程序左右滚动公告栏效果代码实例
Sep 16 Javascript
JavaScript中的this妙用实例分析
May 09 Javascript
js代码编写无缝轮播图
Sep 13 Javascript
JavaScript 空位补零实现代码
Feb 26 #Javascript
javascript replace()正则替换实现代码
Feb 26 #Javascript
javascript function调用时的参数检测常用办法
Feb 26 #Javascript
jquery1.4 教程二 ajax方法的改进
Feb 25 #Javascript
jquery 1.4.2发布!主要是性能与API
Feb 25 #Javascript
jQuery 方法大全方便学习参考
Feb 25 #Javascript
js 面向对象的技术创建高级 Web 应用程序
Feb 25 #Javascript
You might like
php出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
利用PHP+JS实现搜索自动提示(实例)
2013/06/09 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
浅谈JavaScript函数参数的可修改性问题
2013/12/05 Javascript
js中使用replace方法完成某个字符的转换
2014/08/20 Javascript
js实例属性和原型属性示例详解
2014/11/23 Javascript
javascript基于DOM实现省市级联下拉框的方法
2015/05/14 Javascript
详解JavaScript中this关键字的用法
2016/05/26 Javascript
javascript自执行函数
2017/02/10 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
微信小程序日历效果
2018/12/29 Javascript
Vue+ElementUI项目使用webpack输出MPA的方法
2019/08/27 Javascript
Websocket 向指定用户发消息的方法
2020/01/09 Javascript
原生js实现的观察者和订阅者模式简单示例
2020/04/18 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
[04:40]2016个国际邀请赛中国区预选赛场地——华西村观战指南
2016/06/25 DOTA
[03:55]TI9战队采访——TNC Predator
2019/08/22 DOTA
Django中间件实现拦截器的方法
2018/06/01 Python
详解python Todo清单实战
2018/11/01 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
详解django2中关于时间处理策略
2019/03/06 Python
对pytorch中的梯度更新方法详解
2019/08/20 Python
python Tensor和Array对比分析
2020/01/08 Python
Python 实现OpenCV格式和PIL.Image格式互转
2020/01/09 Python
python爬虫beautifulsoup解析html方法
2020/12/07 Python
菲律宾优惠券网站:MetroDeal
2019/04/12 全球购物
软件配置管理有什么好处
2015/04/15 面试题
女方回门宴答谢词
2014/01/14 职场文书
九年级政治教学反思
2014/02/06 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
2015年预防青少年违法犯罪工作总结
2015/05/22 职场文书
法定代表人资格证明书
2015/06/18 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫