近年来，jQuery 已经成为 web（开发） 中实际意义上的 JavaScript 库。它解决了许多跨浏览器的不兼容性问题，同时添加了一层受欢迎的语法糖用于客户端的脚本编写。它将 DOM 操作这一大痛处进行了抽象，但是自它出现以来，原生浏览器 API 已经有了显著改善并且也许你并不需要 jQuery的想法开始被人们所接受。

下列是一些原因：

1. jQuery 包含很多你并不需要或不会使用到的功能（因此略显臃肿）。
2. jQuery 很多人来说太过纷繁。通常体积较小的库可以更好的完成特定任务。
3. 就 DOM 操作而言，浏览器 API 如今可以做大多数 jQuery 可以做的事。
4. 浏览器 API 现在更加同步，例如，使用 addEventListener 而非 attachEvent。

那么还有什么问题呢？

目前的问题是使用普通的（或原始的）JavaScript 进行 DOM 操作同 jQuery 一样令人厌烦。因为你不得不读写多余的代码，并且处理浏览器中无用的 NodeList 。

让我们先看看 MDN 的描述，什么是 NodeList：

NodeList 对象是节点集合，如 Node.childNodes 和 document.querySelectorAll 方法的返回值。

以及有时会出现的动态 NodeLists （令人困惑的）：

在一些场景下，NodeList 是一个动态集合，也就是说在 DOM 上的操作都会反射到这个集合中。例如，Node.childNodes 就是动态的。

这是个问题因为你无法分辨哪些是动态的，哪些是静态的。除非你移除 NodeList 中的每个节点并检查该 NodeList 是否为空。如果是空的那你拿到的就是一个动态的 NodeList （这并不是个好主意）。

浏览器也没有提供任何有效的办法来操作这些 NodeList 对象。

例如，很不巧这些节点没法通过 forEach 来循环：

所以你不得不这么干：

你甚至只能 “hack” 一下：

浏览器的原生 NodeList 只有一个方法：item。该方法根据下标从 NodeList 返回一个节点。当我们可以通过像数组那样（使用 array[index]）获取到该节点时，这个方法完全无用：

NodeList.js 便应运而生——为了让使用浏览器原生 API 进行 DOM 操作同使用 jQuery 操作一样简单，但压缩后仅为 4k。

解决方案

我创建了 NodeList.js ，因为我一直在使用原生 DOM API，而我想让它们更加简洁，以便我在写代码时能去掉很多冗余部分（例如 for 循环）。

NodeList.js 是原生 DOM API 的一个封装，它让你在操作节点数组（也就是我的 NodeList）时像操作单个节点一样。相比浏览器的原生 NodeList 对象，这给你带来了更多的实用性。

如果听上去觉得不错，就到 GitHub 下载官方 repo 并跟随以下教程。

使用：

选择 DOM 节点很简单：

这个方法底层实用的是 querySelectorAll(selector)。

但它如何与 jQuery 竞争呢？

很高兴你这么问。让我们对比一下 Vanilla JS，jQuery 和 NodeList.js 。

比如我们现在有三个按钮：

让我们把每个按钮的内容改为 “Click Me”：

原生 JS:

jQuery: