看了一篇风趣幽默的文章,简单记录一下~
1.原生DOM选择器
document.getElementById
document.getElementsByClass
document.getElementsByName
document.getElementsByTagName
写出来我都感觉麻烦了~接下来看看jQuery的语法糖
2.jQuery封装的DOM选择器
document.querySelector
document.querySelectorAll
但是,名字太长了,就像电影里面的反派台词一样~
var $ = document.querySelectorAll
这还像个样,测试console.debug($("body"));
报错~~~,为啥呢???不要忽视 执行上下文 !!!
分析一波:querySelectorAll
所需的执行上下文必需是 document
,而我们赋值到 $
调用后上下文变成了全局 window
。
好说,继续~~
var $ = document.querySelectorAll.bind(document);
全都给改了
var query = document.querySelector.bind(document);
var queryAll = document.querySelectorAll.bind(document);
var fromId = document.getElementById.bind(document);
var fromClass = document.getElementsByClassName.bind(document);
var fromTag = document.getElementsByTagName.bind(document);
注意,这些方法的返回值 nodelist 并不是数组,只是类数组。不能使用数据方法 map forEach 等
how to do ? ? ?
Array.prototype.map.call(document.querySelectorAll('button'),function(element,index){
element.onclick = function(){
}
})
3.闲聊
Vue、 React 大行其道,平分天下,还有多少人还在坚持原生?
扫描二维码关注公众号,回复:
12403754 查看本文章

我不是原教义主义者,但是我们应该经常回顾一下源头吧!!!