如何知道javascript中的DOM操作哪个更快？
本文介绍了如何知道javascript中的DOM操作哪个更快？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
例如有3个button,
id 为b1/b2/b3，都有class ="button"。
假如想对这3个进行DOM操作(动态添加样式类)，一开始的获取可以是：
一：分别进行三次var button? = document.getElementById()，然后放到一个数组里（后面有循环调用）；
二：使用querySelectorAll()获得Nodelist对象,然后转换成数组；
三：使用document.getElementsByClassName(names);
我想知道哪一个运行起来会更快点，这要如何知道？
解决方案
方法楼上各位提供了，但我对结果比较感兴趣，于是测试了一下：
<!DOCTYPE html>
<html>
<head>
<title>dom速度测试</title>
</head>
<body>
<div class="haha" id="hehe">你们好</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
console.time("test0");
var a=document.getElementById('hehe');
//console.log(a.innerHTML);
console.timeEnd('test0');
console.time("test2");
var c=document.querySelector("#hehe");
//console.log(c.innerHTML);
console.timeEnd('test2');
console.time("test4");
var d=$("#hehe");
//console.log(d.html());
console.timeEnd('test4');
console.time("test1");
var b=document.getElementsByClassName('haha');
//console.log(b[0].innerHTML);
console.timeEnd('test1');
console.time("test3");
var c=document.querySelector(".haha");
//console.log(c.innerHTML);
console.timeEnd('test3');
console.time("test5");
var e=$(".haha");
//console.log(e.html());
console.timeEnd('test5');
</script>
</body>
</html>测试结果：
test0: 0.022ms
test2: 0.041ms
test4: 0.209ms
test1: 0.021ms
test3: 0.0261ms
test5: 0.671ms
刷新多次后观察结果，排序上偶尔会不同，但平均水平和以上给出的结果差不多：
1.用jQuery方法选择器的效率明显较低；
2.document.getElementById()与document.querySelector()的效率基本没有差别，但前者效率稍高一点；
3.最让我意外的是：用class比用id选择器的效率稍高一些，不知这是为什么？但jquery的$(".classnae")选择器的效率永远是最低的)
这篇关于如何知道javascript中的DOM操作哪个更快？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
