开源项目 HTML DOM：解决原生 JS 中的常见 DOM 任务

开源项目 HTML DOM 提供了 100 多个 vanilla JavaScript（vanilla JS 是一个所谓的 JavaScript 框架，但实际上指的就是原生的 JavaScript，这是一种调侃和恶作剧的说法，参见vanilla-js站点和stackoverflow上的讨论——译者注）代码片段，用于执行常见的 DOM 操作任务。这些任务的难度从简单（获取某个元素的 class）到高级（创建可调整大小的切分视图）不等。这个项目可以用于教育学习，也适用于需要自行操作底层 DOM 的组件开发人员。

该项目的核心贡献者Phuoc Nguyen阐述了项目的基本原理和意图：

如果你在任意框架中开发或使用 Web 组件的话，那么必须要在一定程度上使用 DOM。

在 Web 开发中，了解浏览器的 DOM API 以及如何使用它们是非常重要的。如果有一个 Web 站点将这些 API、众所周知的问题以及最流行的疑问汇总起来，那么它将是非常有用的。

HTML DOM 片段只使用了原生浏览器的 API，所以不需要任何外部的库。它们通过由万维网联盟（World Wide Web Consortium，W3C）（W3C）所标准化的每个现代浏览器的都支持原生浏览器 API 来实现，除此之外，浏览器厂商还会与一些平台，如Web平台孵化器社区群组（Web Platform Incubator Community Group，WICG）或响应式问题社区群组（Responsive Issues Community Group，RICG），讨论创新性的特性。

HTML DOM 的代码片段根据估计的复杂性和所需的先验知识分成了三个类别。基础任务包括附加或解除事件处理器、检索元素的兄弟节点以及更新元素的CSS样式等。

中级任务包括计算滚动条的大小、获取元素的第一个可滚动父元素、iframe与其父窗口之间进行通信、下载文件、导出表格到CSV或者动态加载CSS文件等等。

高级任务包括创建可调整大小的切分视图、拖拽-滚动交互、创建可调整大小的元素以及通过单击表头对表进行排序等等。

创建可调整大小的元素相关的代码片段由 20 行 CSS、7 行 HTML 和 30 多行 JavaScript 组成。HTML 包括用于显示底部和右侧边框的div。当鼠标位于 HTML 元素的句柄上时，CSS 代码会更改光标的样式。JavaScript 处理交互逻辑，包括根据用户是否拖动句柄来设置和删除mousemove监听器。最终结果如下所示：

有些开发人员在 Hacker News 上表达了他们对该项目的热情。有位开发人员这样说到：

非常整洁的资源，我已经收藏了。

在 SPA 时代，vanilla JS 在哪些地方依然有用武之地呢？

• 大部分都是静态 HTML，首次渲染的时间非常重要，我们只需要有一点点（可能会逐渐增加）天分就够了。

• 可以内联即时加载/执行，不需要捆绑下载(或 SSR)。

• 代码的容量和作用域都有限，所以出现结构/意大利面的问题也不是什么事儿。

• 你可以把它从 SPA 包中分离出来，所以交付变更能够完全从 SPA CI/CD 过程中解耦出来，可以根据你的喜好频繁地交付，而且速度非常快。

另外一位开发人员强调了该项目在教育学习方面的价值：

根据我的经验，MDN 文档是最好的浏览器前端参考。

但是，这个站点满足了一个不同的需求：提供了一个面向指南/如何实现的文档，这通常是我们所需要的。

HTML DOM 可以基于 MIT 开源许可证使用。欢迎通过GitHub项目提交贡献和反馈。

原文链接：108 Common DOM Tasks in Vanilla JS: the HTML DOM Project