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 相关文章推荐
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
node.js中的fs.lchownSync方法使用说明
Dec 16 Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
AngularJS动态加载模块和依赖的方法分析
Nov 08 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
JS设计模式之单例模式(一)
Sep 29 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
如何基于javascript实现贪吃蛇游戏
Feb 09 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
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
使用 MySQL 开始 PHP 会话
2006/12/21 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
PHP数组遍历知识汇总(包含遍历方法、数组指针操作函数、数组遍历测速)
2014/07/05 PHP
php 5.4 全新的代码复用Trait详解
2017/01/05 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
laravel实现一个上传图片的接口,并建立软链接,访问图片的方法
2019/10/12 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
js汉字排序问题 支持中英文混排,兼容各浏览器,包括CHROME
2011/12/20 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
Javascript核心读书有感之类型、值和变量
2015/02/11 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
python实现给微信公众号发送消息的方法
2017/06/30 Python
[原创]Python入门教程1. 基本运算【四则运算、变量、math模块等】
2018/10/28 Python
Python设计模式之建造者模式实例详解
2019/01/17 Python
python用for循环求和的方法总结
2019/07/08 Python
探秘TensorFlow 和 NumPy 的 Broadcasting 机制
2020/03/13 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
在网上学习全世界最好的课程:Coursera
2017/11/07 全球购物
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
英国设计师珠宝网站:Joshua James Jewellery
2020/03/01 全球购物
家庭教育先进个人事迹材料
2014/01/24 职场文书
高三体育教学反思
2014/01/29 职场文书
产品质量承诺范本
2014/03/31 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
2014年实验室工作总结
2014/12/03 职场文书
2015年环境监察工作总结
2015/07/23 职场文书
签约仪式致辞
2015/07/30 职场文书
讲解Python实例练习逆序输出字符串
2022/05/06 Python
Mysql如何查看是否使用到索引
2022/12/24 MySQL