The open-source project HTML DOM provides over 100 snippets of vanilla JavaScript performing common DOM manipulation tasks. The tasks' difficulty range from trivial (get the class of an element) to advanced (create resizable split views). The project may be useful for educational purposes, and for component developers who need to do low-level DOM handling themselves.
Phuoc Nguyen, key contributor for the project, explained the rationale for the project:
If you develop or use a web component in any framework, you have to work with DOM at a certain level.
Knowing the browser DOM APIs and how to use them play an important role in web development. A website introducing the APIs, well-known problems, most popular questions could be very useful.
The HTML DOM snippets only use the native browsers’ APIs, and as such require no external libraries. This is made possible by the standardization of the native browser APIs in every modern browser carried out by the World Wide Web Consortium (W3C), and the collaboration between browser vendors in discussing innovative features in platforms like the Web Platform Incubator Community Group (WICG) or the Responsive Issues Community Group (RICG).
The HTML DOM snippets are divided into three categories according to their estimated level of complexity or required prior knowledge. Basic tasks include, among other things, attaching or detaching an event handler, retrieving siblings of an element, or updating the CSS style for an element.
Intermediate tasks include: calculate the size of scrollbar, get the first scrollable parent of an element, communicate between an iframe and its parent window, download a file, export a table to CSV or load a CSS file dynamically and more.
Advanced tasks include creating resizable split views, drag-to-scroll interactions, making a resizable element, sorting a table by clicking its headers, and more.
The snippet related to making a resizable element is made of 20 lines of CSS, 7 lines of HTML, and slightly over 30 lines of JavaScript. The HTML includes divs for the bottom and right border handle. The CSS code handles changing the cursor when the mouse is on the HTML element’s handle. The JavaScript handles the interaction logic, and involves setting and removing mousemove listeners depending on whether the user is dragging one handle. The end result is as follows:
Some developers have expressed enthusiasm on Hacker News. One developer said:
Neat resource, I’ve bookmarked it.
You know where vanilla JS still has a legitimate use-case in the era of SPAs? Landing pages.
- Mostly static HTML, time to first render is critical, all you want is a little bit of (progressively added) flair
- Can be inlined for instant loading/execution, no bundle download (or SSR) necessary
- Code has low volume and scope so structure/spaghetti isn’t a concern
- You can separate it out from the rest of your SPA bundle(s), so shipping changes is completely decoupled from your SPA CI/CD process and can be done as frequently as you like and _very_quickly
Another developer emphasized the educational value of the project:
The MDN docs are from my experience the best browser frontend reference available.
This site, however, covers a different need: guide/howto oriented documentation, which is often what you want.
HTML DOM is available under the MIT open source license. Contributions and feedback are welcome and may be provided via the GitHub project.