如何简写出 document.querySelectorAll?

最新推荐文章于 2024-06-12 11:48:08 发布

原创最新推荐文章于 2024-06-12 11:48:08 发布 · 700 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

JavaScript 专栏收录该内容

141 篇文章

订阅专栏

本文探讨了原生DOM选择器的使用，如getElementById、getElementsByClass等，并对比了jQuery的选择器。作者指出，虽然jQuery的选择器如querySelector、querySelectorAll方便，但直接赋值给变量可能导致执行上下文错误。解决方案是使用bind来绑定正确的上下文。文章还提醒读者，在JavaScript中，querySelectorAll返回的不是数组，而是类数组对象，需要借助Array.prototype方法来操作。最后，作者反思了在Vue和React盛行的时代，依然学习和理解原生DOM的重要性。

看了一篇风趣幽默的文章，简单记录一下~

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 大行其道，平分天下，还有多少人还在坚持原生？

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