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.
Knowing the browser DOM APIs and how to use them is crucial to web development. A website that introduces the APIs, highlights common problems,
and provides answers to popular questions can be incredibly useful.

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

Get ready to master DOM manipulation with vanilla JavaScript.

Level 1 — Basic

Level 2 — Intermediate

Level 3 — Advanced

Tip

Recent posts ⚡

Newsletter 🔔

If you’re into front-end technologies and you want to see more of the content I’m creating, then you might want to consider subscribing to my newsletter.

By subscribing, you’ll be the first to know about new articles, products, and exclusive promotions.

Don’t worry, I won’t spam you. And if you ever change your mind, you can unsubscribe at any time.

Phước Nguyễn

Read More