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 相关文章推荐
ajax处理php返回json数据的实例代码
Jan 24 Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 Javascript
JavaScript页面模板库handlebars的简单用法
Mar 02 Javascript
js实现动态加载脚本的方法实例汇总
Nov 02 Javascript
AngularJS中使用HTML5手机摄像头拍照
Feb 22 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
使用JQuery 加载页面时调用JS的实现方法
May 30 Javascript
JsChart组件使用详解
Mar 04 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
微信小程序使用gitee进行版本管理
Sep 20 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
vue中实现图片压缩 file文件的方法
May 28 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
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP采用curl模仿用户登陆新浪微博发微博的方法
2014/11/07 PHP
PHP图片处理之使用imagecopyresampled函数裁剪图片例子
2014/11/19 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
javascript 面向对象编程基础 多态
2009/08/21 Javascript
javascript使用isNaN()函数判断变量是否为数字
2013/09/21 Javascript
JS JSON对象转为字符串的简单实现方法
2013/11/18 Javascript
javascript中HTMLDOM操作详解
2014/12/11 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
2017/02/08 Javascript
EsLint入门学习教程
2017/02/17 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
[02:36]DOTA2英雄基础教程 帕格纳
2014/01/20 DOTA
详解Python中内置的NotImplemented类型的用法
2015/03/31 Python
python自定义类并使用的方法
2015/05/07 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
使用python list 查找所有匹配元素的位置实例
2019/06/11 Python
python中的decimal类型转换实例详解
2019/06/26 Python
django foreignkey(外键)的实现
2019/07/29 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
解决pycharm每次打开项目都需要配置解释器和安装库问题
2020/02/26 Python
PUMA官方商城:世界领先的运动品牌之一
2016/11/16 全球购物
小学毕业典礼主持词
2014/03/27 职场文书
教师工作表现评语
2014/12/31 职场文书
特岗教师个人总结
2015/02/10 职场文书
贪污检举信范文
2015/03/02 职场文书
2015年纪检监察工作总结
2015/04/08 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书
nginx 多个location转发任意请求或访问静态资源文件的实现
2021/03/31 Servers