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使用focus()设置焦点失败的解决方法
Sep 03 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
JQuery实现图片轮播效果
Sep 15 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
Sep 24 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
ajax与jsonp的区别及用法
Oct 16 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
JS实现纵向轮播图(初级版)
Jan 18 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 和 XML: 使用expat函数(三)
2006/10/09 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP代码优化技巧小结
2015/09/29 PHP
php记录搜索引擎爬行记录的实现代码
2018/03/02 PHP
一个简单的网站访问JS计数器 刷新1次加1次访问
2012/09/20 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
详解Vue-axios 设置请求头问题
2018/12/06 Javascript
Vue基础学习之项目整合及优化
2019/06/02 Javascript
详解实现vue的数据响应式原理
2021/01/20 Vue.js
[03:49]显微镜下的DOTA2第十五期—VG登基之路完美团
2014/06/24 DOTA
快速排序的算法思想及Python版快速排序的实现示例
2016/07/02 Python
python 读写中文json的实例详解
2017/10/29 Python
python3结合openpyxl库实现excel操作的实例代码
2018/09/11 Python
python json.loads兼容单引号数据的方法
2018/12/19 Python
解析Python3中的Import
2019/10/13 Python
python实现连续变量最优分箱详解--CART算法
2019/11/22 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
亚瑟士美国官网:ASICS美国
2017/02/01 全球购物
.net工程师笔试题
2012/06/09 面试题
英语故事演讲稿
2014/04/29 职场文书
国旗下的讲话演讲稿
2014/05/08 职场文书
平面设计师岗位职责
2014/09/18 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
家属联谊会致辞
2015/07/31 职场文书
情感电台广播稿
2015/08/18 职场文书
导游词之宿迁乾隆行宫
2019/10/15 职场文书
详解CSS开发过程中的20个快速提升技巧
2021/05/21 HTML / CSS
javascript函数式编程基础
2021/09/15 Javascript