JavaScript元素查找与方法的区别

开始

今天决定，开始巩固一下自己的 JS，因为现在的知识还比较零散，特别是源深的内容，从来没有看过，实战可以度娘，但是理论和许多API都不熟悉，更加觉得基础不牢可不行，于是决定重新刷新下知识，也把学习内容记录下来，作为笔记和以后自己复习的内容。
个人主页：http://xkolento.cn
个人微博：https://weibo.com/1921492471/profile?rightmod=1&wvr=6&mod=personinfo

常用api

1.常用元素查找,控制每个元素需要从集合中进行循环

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

document.getElementById(id) //返回对拥有指定 ID 的第一个对象的引用
getElementsByTagName() //方法可返回带有指定标签名的对象的集合
document.getElementsByClassName("example"); 返回文档中所有指定类名的元素集合
···


2.document.getElementById() 和 document.querySelector() 的区别
①  getElementById是动态选取，然而querySelector则是静态选取

• KOLENTO


• KOLENTO


• KOLENTO

//demo1
var ul = document.getElementsByTagName('ul')[0],
lis = ul.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}
console.log( lis.length); //6，原先的3个节点加上后续添加的，总共6个

//demo2
var ul = document.querySelectorAll('ul'),
lis = ul.querySelectorAll("li");
for(var i = 0; i < lis.length ; i++){
ul.appendChild(document.createElement("li"));
}
console.log( lis.length); //3，只获取原先的3个节点，新添加的获取不到

② 性能对比
介绍：console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。
console.time方法是开始计算时间，console.timeEnd是停止计时，输出脚本执行的时间。

console.time('querySelector');
for (var i = 0; i < 100000; i++) {
document.querySelector("#wp_editbtns");
}
console.timeEnd('querySelector');
//querySelector: 519ms

console.time('getElementById');
for (var i = 0; i < 100000; i++) {
document.getElementById("wp_editbtns");
}
console.timeEnd('getElementById');
//getElementById: 491ms

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

3.jq选择器与原生选择器对比
举例：$('p')，选取所有p元素，由jquery封装成一个jq对象。
所以不需要进行循环可以直接进行链式操作，由document.getElementsByTagName()、querySelector支持。

##总结
从输出结果中我们可以看到，getElementById的性能要更高，现在主流框架，比如jquery，手机上的框架jqmobi等内部实现查找元都是使用的querySelector，等方法，性能低的方法被使用唯一理由就是它用着方便，首选还是getElementById