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 相关文章推荐
JavaScript 事件对象的实现
Jul 13 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
jquery弹出框的用法示例(一)
Aug 26 Javascript
jQuery制作简单柱状图实例
Jan 28 Javascript
jQuery+slidereveal实现的面板滑动侧边展出效果
Mar 14 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
Mar 21 Javascript
详解Vue CLI3 多页应用实践和源码设计
Aug 30 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
使用Vue实现移动端左滑删除效果附源码
May 16 Javascript
深入webpack打包原理及loader和plugin的实现
May 06 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
咖啡的化学
2021/03/03 咖啡文化
用PHP和ACCESS写聊天室(五)
2006/10/09 PHP
PHP结合Ueditor并修改图片上传路径
2016/10/16 PHP
2017年最新PHP经典面试题目汇总(上篇)
2017/03/17 PHP
Win7环境下Apache连接MySQL提示连接已重置的解决办法
2017/05/09 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
学习js在线html(富文本,所见即所得)编辑器
2012/12/18 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
2013/07/17 Javascript
自动设置iframe大小的jQuery代码
2013/09/11 Javascript
JavaScript中实现依赖注入的思路分享
2015/01/15 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
常用的几个JQuery代码片段
2017/03/13 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
2019/05/21 Javascript
layui 对table中的数据进行转义的实例
2019/09/12 Javascript
JS实现简单省市二级联动
2019/11/27 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
[01:30:15]DOTA2-DPC中国联赛 正赛 Ehome vs Aster BO3 第二场 2月2日
2021/03/11 DOTA
python实现的一只从百度开始不断搜索的小爬虫
2013/08/13 Python
python sys模块sys.path使用方法示例
2013/12/04 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
Python3爬虫中Ajax的用法
2020/07/10 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
英国奢侈皮具品牌:Aspinal of London
2018/09/02 全球购物
车辆转让协议书
2014/04/15 职场文书
会计专业自荐信
2014/06/03 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
卫生保健工作总结2015
2015/05/18 职场文书
2015年高三毕业班班主任工作总结
2015/10/22 职场文书
MySQL 原理与优化之Update 优化
2022/08/14 MySQL