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 相关文章推荐
一些常用的JS功能函数(2009-06-04更新)
Jun 04 Javascript
JavaScript 学习笔记(六)
Dec 31 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
JS的框架Polymer中的dom-if和is属性使用说明
Jul 29 Javascript
AngularJs基于角色的前端访问控制的实现
Nov 07 Javascript
js获取隐藏元素的宽高
Feb 24 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
如何实现一个webpack模块解析器
Oct 24 Javascript
JavaScript中遍历的十种方法总结
Dec 15 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通过COM使用ADODB的简单例子
2006/12/31 PHP
php正则表达匹配中文问题分析小结
2012/03/25 PHP
PHP自定session保存路径及删除、注销与写入的方法
2014/11/18 PHP
YII2.0框架行为(Behavior)深入详解
2019/07/26 PHP
PHP实现简易用户登录系统
2020/07/10 PHP
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
js 操作select相关方法函数
2009/12/06 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
jQuery插件Timelinr 实现时间轴特效
2015/10/04 Javascript
javascript实现简易计算器的代码
2016/05/31 Javascript
JS Array创建及concat()split()slice()的使用方法
2016/06/03 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
微信小程序实现点赞、取消点赞功能
2018/11/02 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
Vue+Express实现登录注销功能的实例代码
2019/05/05 Javascript
微信小程序封装的HTTP请求示例【附升级版】
2019/05/11 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
微信小程序开发中var that =this的用法详解
2020/01/18 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
[42:32]Secret vs Optic 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
python获取文件扩展名的方法
2015/07/06 Python
在Pandas中给多层索引降级的方法
2018/11/16 Python
利用anaconda保证64位和32位的python共存
2021/03/09 Python
python实现字典嵌套列表取值
2019/12/16 Python
Python常用base64 md5 aes des crc32加密解密方法汇总
2020/11/06 Python
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
美国女孩洋娃娃店:American Girl
2017/10/24 全球购物
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
南京软件公司的.net程序员笔试题
2014/08/31 面试题
幼教简历自我评价
2014/01/28 职场文书
父母对孩子说的话
2014/04/12 职场文书
公司前台接待岗位职责
2015/04/03 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书
Java 轮询锁使用时遇到问题
2022/05/11 Java/Android