为什么我不会再用 querySelector 了

JavaScript生态系统一直在不断发展，是时候迎接未来的一轮发展了。

我们都爱上了 jQuery 内置在浏览器里作为 document.querySelector() 和 document.querySelectorAll()。这些方法使访问 DOM 更好。

最近，我有了一些经验，证明仅使用 document.querySelector() 和 document.querySelectorAll() 是停留在过去，而错过了许多 Javascript 中的新特性。

使用 document.querySelector() 和 document.querySelectorAll()，你无法解构 DOM，也无法一致地访问 DOM，但可以简化多个选择的过程，减少打字困难。现在让我们深入探讨，让你意识到你已经错过了什么。

但是等等！如果你还不太清楚 querySelector() 和 querySelectorAll() 是什么，并且想要了解更多的话，可以看下面这个视频教程：JavaScript DOM 操作视频

document.querySelector() 和 document.querySelectorAll() 在选择 DOM 元素时表现不同。一个方法选择目标元素的第一个实例，而另一个方法选择所有目标元素的实例。一个用于选择单个元素，另一个用于选择多个元素。

所以你不能随便混着用它们。你得根据需要来回切换。

    // 选择名为 .post 的第一个元素
    const post = document.querySelector('.post');

    // 选择所有名为 .post 的元素
    const posts = document.querySelectorAll('.post');

进入全屏 退出全屏

现在，我来给你展示一个更好的方法。最近创建了一个名为koras.jsx的UI库，它自带了一个$select()函数，可以用来替代JavaScript中的document.querySelector()和document.querySelectorAll()，下面是它的用法示例。

//选择所有类为 .post 的元素
const posts = $select('.post');

//选择第一个 .post 元素
const firstPost = $select('.post')[0];

//使用 document.querySelectorAll 实现同样的功能

const posts = document.querySelectorAll('.post');
const firstPost = posts[0];

进入全屏，退出全屏

那有多酷！而且它正好能用在document.querySelector()和document.querySelectorAll()这两种方法的用例上！

你可以在分组元素中选择任何一个。

    //选择第六个带有class为post的实例
    $select('.post[5]')

    //选择第七个div元素实例
    $select('div[6]')

全屏模式。退出全屏

你可以用 $select() 来删除元素，比如说：

// Only delete the instance of .post with index of 2
$select('.post[delete|i=2]');

// Delete all instances of .post with index greater than 2 
$select('.post[delete|i>2]');

全屏模式，退出全屏

你可以像这样给元素添加属性：
你可以使用 $select()，例如：

    $select('.post[add|class=hidden]'); // 选择具有hidden类的.post元素

    $select('.post[add|style=1px solid red]'); // 选择具有特定边框样式的.post元素

    $select('.post[add|id=2]'); // 选择具有特定ID的.post元素

    $select('.post[add|class=flex bold]'); // 选择具有flex和bold类的.post元素

全屏 全屏退出

您可以使用 $select() 来移除属性，例如：

$select('.post[remove|class=hidden]');

$select('.post[remove|id]');

$select('.post[remove|class=flex bold]');

$select('.post[remove|style]');

进入全屏｜退出全屏

DOM 解构是 ES6 中的一个特性，但你可能意想不到的是，使用 document.querySelector() 和 document.querySelectorAll() 选中的元素无法进行解构。

没用：

（暂无内容）

// 获取所有带有.post和.comment类的元素，并将其分为posts和comments两个数组

点击这里进入全屏 点击这里退出全屏

解法：

    const [posts, comments] = $select('.post, .comment');

全屏模式，退出全屏

你看得到吗？document.querySelectAll() 不支持 DOM 解构。这意味着你不能用解构的方式处理 DOM。不！这真的不行，所以你得开始用 $select()

使用 document.querySelector() 或 document.querySelectorAll() 导致代码重复，因为它们不支持 DOM 解构特性，这使得维护 JavaScript 代码有些麻烦。

这没用

    const [audio, posts, comments] = document.querySelectorAll(".audio, .post, .comment");

全屏模式：开启/关闭

所以你得做

    // 获取音频元素
    const audio = document.querySelector("#audio");

    // 获取所有帖子元素
    const posts = document.querySelectorAll(".post");

    // 获取所有评论元素
    const comments = document.querySelectorAll(".comment");

全屏，退出全屏

你看得出来有多重复吗，以及在大规模情况下维护代码库会有多混乱？

瞧瞧，你可以像下面这样很容易地用 $select() 做同样的事情：

解决办法

const [音频元素, 帖子元素, 评论元素] = $select("#audio, .post, .comment");

进入全屏模式 退出全屏

与使用 $select() 相比，使用 document.querySelector() 更容易让 bugs 藏起来，这主要是因为它支持 DOM 解构特性以及多个选择。

const audio = document.querySelector("#audio");

const posts = document.querySelectorAll(".post");

const comments = document.querySelectorAll(".comment");

// 或

const [audio, posts, comments] = $select("#audio, .post, .comment");

// $select 用于选择指定的元素，这里选择了音频元素、帖子元素和评论元素。

全屏 退出全屏

$select()减少了选择元素所需的代码量，从而减少了错误潜藏的可能性。这意味着使用$select()时，错误更可能被更快地发现。

通过 querySelector 获取的元素只能配合 forEach 使用，但不能与 map()、filter() 等方法等等一起使用。

$select()默认与所有数组方法一起工作，而document.querySelectorAll()则需要一些变通方法。这些变通方法在大规模应用时可能会导致不必要的重复和复杂性。

可维护性总是围绕着易用性、简洁性和一致性。任何简洁、一致或易用的代码库通常都是可维护的。维护冗余和冗长的代码会很麻烦，因为你需要检查更多的内容，特别是在修复错误或构建功能时。

尽量减少JavaScript的加载是一个实用的经验法则，而 $select() 在处理DOM选择时使得这一点变得更容易实现。在大规模应用时，相比于 document.querySelector() 和 document.querySelectorAll()，使用 $select() 更加简洁且减少了重复的选择。你选择的元素越多，使用 $select() 就越少重复选择。

你不能直接把由 $select() 生成的元素集合附加到另一个元素上，因为 DOM 需要的是一个 NodeList。

不过，你可以通过向 $select() 传递 false 作为第二个参数来禁用它的所有特性。

    //超能力默认是开启的，不过你可以传入 false 来关闭它。

     $select('.post', offSuperpowers);

     $select('.post', false);

点击全屏按钮或按F11全屏，再按一次或点击退出全屏 (点击全屏按钮或按F11全屏，再按一次或点击退出全屏)

现在，它将返回一个 DOM NodeList[]，这个列表支持追加和前置操作。

你可能想知道 $select() 是否能像 document.querySelector() 或 document.querySelectorAll() 一样做所有事情。是的！它也能搞定它们所有的事。无论你是用 tag 还是 css 选择器， $select() 都可以完成 document.querySelector() 所有能做的事情。

可以说querySelector()或querySelectorAll()在平均情况下比$select()快大约一毫秒，但在大规模情况下，$select()则更胜一筹并弥补了之前的差距。

你还需要学习如何使用 querySelector，了解如何使用它，你就能构建一些有用的东西，就像用 $select() 一样。我能构建 $select() 是因为我真正了解它的运作原理。

我做了个教程，你可以看看。请参见下面：

JavaScript DOM

通过支持 DOM 解构和数组选择功能，$select() 成为我工具箱中的一个有用工具。它不仅使我的代码更易读，还减少了错误的发生，使调试过程更加简单。

为了可维护性、简洁性和一致性，$select() 是一个很好的选择，用于 DOM 选取，体现了 JavaScript 开发演进中的一步。

随着我们继续适应不断演变的 JavaScript 生态环境，使用类似 $select() 的工具可以确保使我们的代码更加简洁明了和易于维护。