JavaScript 生态系统始终在不断发展，是时候迎接未来的另一波浪潮了。
当 jQuery 以 document.querySelector() 和 document.querySelectorAll() 的形式融入浏览器时，我们都喜欢它。 DOM 方法使访问 DOM 变得更好。
最近，我的一些经验实际上向我证明，同时使用 document.querySelector() 和 document.querySelectorAll() 是在固守遥远的过去，而错过了 Javascript 中的许多有趣的功能。
使用 document.querySelector() 和 document.querySelectorAll() 意味着您无法解构 DOM、一致地访问 DOM、简化多重选择并减少打字难度。现在，让我们更深入地研究，以便您能够意识到您已经错过的一切。
但是等等！如果您不太了解 querySelector() 和 querySelectorAll() 是什么，并且想了解更多信息；查看下面的视频教程：JavaScript DOM 操作
document.querySelector() 和 document.querySelectorAll() 在选择 DOM 方面不一致。一个选择目标选择器的第一个实例，另一个选择目标选择器的所有实例。这意味着一个用于选择单个元素，另一个用于选择一组元素。
所以你不能互换使用两者。您必须根据您想要选择的内容不断从一种切换到另一种。
// Select the first element of the class .post
const post = document.querySelector('.post');
// Select all elements of the class .post
const posts = document.querySelectorAll('.post');
现在，让我向您展示一种更好的方法。我刚刚构建了一个名为 koras.jsx 的 UI 库，它带有 $select()
它可以用来代替 JavaScript 中的 document.querySelector() 和 document.querySelectorAll()，下面是如何使用它。
//select all instances of class .post
const posts = $select('.post');
//select the first instance of class post
const firstPost = $select('.post[0]');
//Doing the same with querySelector
const posts = document.querySelectorAll('.post');
const firstPost = posts[0];
那有多酷？它仅适用于 document.querySelector() 和 document.querySelectorAll() 的用例。
您可以在任意位置的分组元素中选择一个元素。
//select 6th instance of class post
$select('.post[5]')
//select 7th instance of div elements
$select('div[6]')
您可以使用 $select() 删除元素，例如：
//Delete only the instance of .post with index is equal to 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]');
$select('.post[add|style=1px solid red]');
$select('.post[add|id=2]');
$select('.post[add|class=flex bold]')
您可以使用 $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() 选择的元素。
// Select the first element of the class .post
const post = document.querySelector('.post');
// Select all elements of the class .post
const posts = document.querySelectorAll('.post');
//select all instances of class .post
const posts = $select('.post');
//select the first instance of class post
const firstPost = $select('.post[0]');
//Doing the same with querySelector
const posts = document.querySelectorAll('.post');
const firstPost = posts[0];
你能看到吗？ document.querySelectAll() 不支持 DOM 解构。这意味着您错过了解构 DOM 的机会。不！这一点都不酷，所以你必须开始使用 $select()。
使用 document.querySelect() 或 document.querySelectorAll() 会迫使您不必要地重复它们，因为它们不支持 DOM 解构，这使得维护 JavaScript 代码有点混乱。
//select 6th instance of class post
$select('.post[5]')
//select 7th instance of div elements
$select('div[6]')
//Delete only the instance of .post with index is equal to 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]');
$select('.post[add|style=1px solid red]');
$select('.post[add|id=2]');
$select('.post[add|class=flex bold]')
与 $select() 相比，使用 document.querySelector() 往往会创建更多的隐藏 bug 区域，因为它支持 DOM 解构和多重选择。
$select('.post[remove|class=hidden]');
$select('.post[remove|id]');
$select('.post[remove|class=flex bold]')
$select('.post[remove|style]');
$select() 减少了写入选择元素的代码行数，从而减少了隐藏错误的表面积。这意味着使用 $select() 时更有可能相对更快地发现错误。
使用querySelector选择的元素只能与forEach一起使用，而不能与map()、filter()和co一起使用。
$select() 默认适用于所有数组方法，与 document.querySelectorAll() 不同，后者需要一些解决方法，可能会导致大规模不必要的重复和复杂性。
可维护性始终围绕易用性、简洁性和一致性。任何简洁、一致或易于使用的代码库往往都是可维护的。维护重复且冗长的代码很麻烦，因为您有更多的表面区域需要查看，尤其是在修复错误或构建功能时。
经验法则是尽可能减少 JavaScript，$select() 使其在处理 DOM 选择时变得可行。 $select() 在规模上优于 document.querySelector() 和 document.querySelectorAll()，因为它更简洁且重复性更少。选择的元素越多，使用 $select() 重复选择的次数就越少。
你不能将 $select() 生成的元素数组附加到另一个元素，如 element.append(arrayGenerateBy$Select)，因为 DOM 需要 NodeList。
不过，你可以通过将 false 作为第二个参数传递给 $select() 来禁用其所有超能力。
const [posts, comments] = document.querySelectorAll('.post, .comment');
现在，它将返回一个可追加且可前置的普通 DOM NodeList[]。
您可能好奇 $select() 是否可以执行 document.querySelect() 或 document.querySelectorAll() 可以执行的所有操作。是的！他们能做的事它都能做。 $select() 可以完成这一切。它可以使用 tagor css 选择器并执行 query.querySelector() 可以执行的所有其他操作。
可以声称 querySelector() 或 querySelectorAll() 比 $select() 更快，平均大约 一毫秒 但 $select() 赢回了它规模化的兴趣。
你仍然需要学习使用querySelector，因为了解如何使用它让你有机会在它上面构建一些有用的东西，就像$select()一样。我能够构建 $select() 因为我真正理解它是如何工作的。
我已经制作了一个教程。看看下面：JavaScript DOM 操作
通过支持 DOM 解构和启用基于数组的选择，$select() 被证明是对我的工具包的一个有价值的补充。它不仅增强了代码的可读性，而且还最大限度地减少了错误的出现范围，使调试过程变得更加简单。
为了追求可维护性、简洁性和一致性，$select() 成为 DOM 选择的一个引人注目的选择，这表明 JavaScript 开发的发展向前迈出了一步。
随着我们不断适应不断发展的 JavaScript 生态系统，采用 $select() 这样的工具可确保我们不断使代码更加简洁、可读和可维护。
以上是为什么我不会再使用 querySelector。的详细内容。更多信息请关注PHP中文网其他相关文章！
