如果你是一个前端开发人员，你一定知道 JavaScript 是前端的核心语言。而与 JavaScript 相关的一个重要工具就是 “文档对象模型”（Document Object Model，简称 DOM）。DOM 是一个包含了所有 HTML 或 XML 文档中内容节点的树型结构，是 JavaScript 操作页面元素的重要接口。要快速有效地对 DOM 进行操作，很多前端工具都会提供默认的DOM 操作库，其中就包括了今天我们介绍的 npm 包 dom-script。
什么是 dom-script
dom-script 是一个基于 jQuery 语法规则的纯 JavaScript 库。相比于使用 jQuery，dom-script 更加轻量且没有 jQuery 所带来的额外开销。除此之外，dom-script 支持“链式调用”和“回调函数”，能帮助你更加高效地进行 DOM 操作。
安装 dom-script
dom-script 现在已经放置在 npm 仓库当中，可以通过 npm install 的方式进行安装。命令如下所示：
npm install dom-script --save
npm install: 表示安装 npm 包dom-script: 包名—save: 表示把包名和版本号添加到 package.json 中去
在安装完 dom-script 后，在项目中就可以通过 require 的方式加载 dom-script，示例代码如下所示：
// require 是 Node.js 的模块系统提供的 API
var dom = require('dom-script');使用 dom-script
在完成了安装之后，下面我们来看一下如何使用 dom-script 进行 DOM 操作。由于 dom-script 是基于 jQuery 语法规则开发的，因此如果熟悉 jQuery 的 API，对于 dom-script 的使用将是非常容易的。下面我们来逐个介绍 dom-script 的核心功能。
获取元素
在 dom-script 中，我们可以使用“选择器”获取指定的元素。例如下面的代码会获取页面中 class 名称为 “container” 的第一个元素：
dom('.container').first();除此之外，在 dom-script 还提供了一些额外的函数来获取页面元素，例如：
dom(): 选取指定的元素dom.all(): 选取全部元素dom.id(): 选取指定 id 的元素dom.name(): 选取指定 name 的元素
提交表单
在提交表单时，我们常常需要对表单内容进行验证和预处理。dom-script 提供了一个提交表单的函数 submit(callback)，当表单被提交时，可以添加一个回调函数来处理表单数据，代码如下：
dom('form').submit(function(formData) {
// 处理表单数据
});CSS 选择器
使用 CSS 选择器对元素进行操作是前端开发中非常常见的需求。在 dom-script 中，你可以使用与 jQuery 相同的选择器来选取元素，例如：
dom('#container .box');除此之外，dom-script 还提供了一些可以用来操作样式的函数，例如：
addClass(): 为元素添加一个或者多个 class 名称removeClass(): 从元素中删除一个或者多个 class 名称toggleClass(): 在元素中添加或删除一个或者多个 class 名称
事件处理
在 dom-script 中，你可以使用事件处理函数来跟踪元素上发生的事件。例如，下面的代码会在鼠标点击元素时进行响应：
dom('button').click(function() {
alert('Button clicked!');
});除了 click 事件外，dom-script 提供了很多其他的事件处理函数，例如：
blur(): 当元素失去焦点时执行。focus(): 当元素获得焦点时执行。keydown(): 当用户在元素上敲下一个键时执行。submit(): 当表单提交时执行。
基本示例
下面是一个基于 dom-script 的简单示例，展示了如何在页面上添加一个新的元素，并为其添加样式和事件处理函数。
-- -------------------- ---- -------
--------- -----
------
------
----------------- ----------
-------
------
---------------------
------- ------------------------------------------------------------
--------
------------------------------ -
--- --- - -------------
--------------- --------------
---------------------------
---------------------
---
---------
-------
-------在这个示例中，当用户点击页面上的按钮时，会将一张新的图片添加到页面上，并设置它的样式和属性。此外，当用户再次点击这个按钮时，可以连续添加多个图片。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600554e481e8991b448d218c