javascript - 纯JavaScript如何简洁选择元素？

Question

我喜欢 $('mySelector') 的 jQuery 语法。它简短、整洁且功能强大。但我不想在我的页面中包含 jQuery。我想将 jQuery 的 $ 选择器函数作为 native JS 的一部分。

我知道我可以使用 querySelector 和 querySelectorAll，但第一个问题是它们很冗长——我不想写 document.querySelectorAll( 'mySelector') 每次，它只会使代码膨胀太多。

我可以用这样的一行来缩短它~

var $ = document.querySelectorAll.bind(document);

然后我会得到 $，但它仍然不能很好地工作，因为它会返回数组，我将不得不检查数组长度并从数组中索引元素或者每次都使用 forEach，进一步使代码膨胀。

如何在纯现代 JavaScript 中简洁有效地选择元素？

Answer 1

在 http://microjs.com/#selector 查看非常小的选择器库

查询 - https://github.com/ded/qwery和巴拉莱卡琴 - https://github.com/finom/balalaika看起来很适用。

您可能还想查看 Sizzle ( https://github.com/jquery/sizzle)。

不过，我建议使用普通的 querySelectorAll 来进行处理。它要快得多，而且不会使代码膨胀太多。

const $ = sel => Array.from(document.querySelectorAll(sel));
$('.selector').forEach(el => {});

我通常创建三个辅助函数:

$ = sel => document.querySelector(sel) // single element
$id = id => document.getElementById(id)
$$ = sel => [...document.querySelectorAll(sel)]; // multiple elements

此外，如果我需要更深入或更复杂的选择，我会使用 filter 或 find，例如:

$$(sel).filter(el => el.innerText === "mytext");
// similar to what jQuery contains would do

您还应该查看“您不需要 jQuery”以获得许多其他此类技巧和功能。 Vanilla js 与基于它构建的任何库一样强大。

您很可能最终会创建自己的选择器库/辅助函数。所以，最好使用一些轻量级的选择器库，就像上面提到的那样。