Monday, November 6, 2023

Mastering DOM Manipulation With Vanilla JavaScript

Phuoc Nguyen (via Hacker News):

Web development moves at lightning speed. I still remember when I first started using libraries like jQuery, Prototype, script.aculo.us, Zepto, and many more. Even with modern tools like Angular, VueJS, React, Solid and Svelte, we still have to deal with the Document Object Model (DOM). While these frameworks encapsulate and hide direct DOM management, they still give us access to work with the DOM via refs and event handlers.

Whether you’re developing or using a web component in any framework, you need to work with the DOM at a certain level. […]

That’s why I’ve put together this collection of resources:

  • No external libraries, just native browser APIs
  • Small, easy-to-understand examples
  • Live demos
  • Tips and best practices included
  • Real-life use cases
  • Works with modern browsers and even supports Internet Explorer

Update (2023-11-22): See also: Cheat sheet for moving from jQuery to vanilla JavaScript (via Daniel).

2 Comments RSS · Twitter · Mastodon

Terrific resource, wow.

I’m glad people are coming back to vanilla JS and slowly falling out of love with accumulating package bloat that we never needed (and most users never wanted).

jQuery's API is shorter, forgiving and therefore more developer-friendly. I think 24K is very well worth it.

Leave a Comment