getElementBy系列
-
document.getElementsByTagName('tag');
-
document.getElementById('id');
-
常见的获取元素的方法有3种,分别是通过元素ID、通过标签名字和通过类名字来获取。
getElementById方法,这个方法将返回一个与之对应id属性的节点对象,它是document对象特有的函数,只能通过其来调用该方法,使用方法如下:document.getElementById('idName');
getElementsByTagName方法返回一个对象数组(准确的说是HTMLCollection集合),返回元素的顺序是它们在文档中的顺序,传递给 getElementsByTagName() 方法的字符串可以不区分大小写,使用方法如下:document.getElementsByTagName(tagName);
getElementsByClassName方法获取指定class名的元素,该方法返回文档中所有指定类名的元素集合,作为 NodeList 对象。NodeList 对象代表一个有顺序的节点列表。NodeList 对象 我们可通过节点列表中的节点索引号来访问列表中的节点(索引号由0开始), 所以有时使用时要指定下标,使用方法如下:document.getElementsByClassName('className');
querySelector和querySelectorAll
querySelector() 方法返回匹配指定 CSS 选择器元素的第一个子元素 。 该方法只返回匹配指定选择器的第一个元素。
如果要返回所有匹配元素,需要使用 querySelectorAll() 方法替代.
不同的是 querySelector返回的是一个对象,querySelectorAll返回的一个集合(NodeList)。
querySelector和querySelectorAll的参数必须是符合 css selector 的字符串:它传入的字符串中第一个字符不能是数字.
代码实例:
document.querySelector("body"); //返回body节点 document.querySelector("#k"); //返回id为k的节点 document.querySelector("#k span"); //返回id为k的节点下的第一个span节点 document.querySelector("#k").querySelector("span"); //返回id为k的节点下的第一个span节点 document.querySelectorAll("li"); //返回所用tagName为li的节点集合(NodeList) document.querySelectorAll("div .li"); //返回class为li的div
性能对比
原理
因为querySelectorAll返回一个静态的NodeList(深克隆)getElementBy系列返回一个动态的实时变化的NodeList(HTMLCollection)(浅克隆,每次都返回一个指针)
所以querySelectorAll会降低性能
用querySelector操作元素示例如下:
HTML代码:
<ul> <li>111</li> <li>222</li> <li>333</li> </ul> var ul=document.querySelector('ul'); var list=ul.querySelectorAll('li'); for(var i=0;i<list.length;i++){ ul.appendChild(document.createElement('li')); }//这个时候就创建了3个新的li,添加在ul列表上。 console.log(list.length) //输出的结果仍然是3,不是此时li的数量6
反观getElement方法
var ul=document.getElementsByTagName('ul')[0]; var list=ul.getElementsByTagName('li'); for(var i=0;i<5;i++){ ul.appendChild(document.createElement('li')); } console.log(list.length)//此时输出的结果就是3+5=8
所以我们现在应该可以很直观的分别出两者的区别,当然本身两种方法还有兼容性方面的区别。另外这两种方法都不能查找伪类元素。
测试结果
console.time('querySelectorAll'); for (var i = 0; i < 10000; i++) { document.querySelectorAll(".menu-top"); } console.timeEnd('querySelectorAll'); //querySelectorAll: 1781ms console.time('getElementsByClassName'); for (var i = 0; i < 10000; i++) { document.getElementsByClassName("menu-top"); } console.timeEnd('getElementsByClassName'); //getElementsByClassName: 54ms
得到集合时间对比相差巨大。可是现在主流框架,比如jquery,手机上的框架jqmobi等内部实现查找元都是使用的 querySelector等方法,性能低的方法被使用唯一理由就是 它用着方便。
总结
在使用的时候getElement这种方法性能比较好,query选择符则比较方便.
- 得到的元素不是需要很麻烦的多次getElementBy..的话,尽量使用getElementBy..,因为他快些。
- 得到的元素需要很麻烦的多次getElementBy..组合才能得到的话使用querySelector,方便。
- 看实际情况,你决定方便优先还是性能优先,
参考:
https://blog.csdn.net/levinhax/article/details/71274456
https://www.imooc.com/article/13027
https://www.jianshu.com/p/421f6d0a9419
https://blog.csdn.net/hualimeme/article/details/44410895