DEV Community

Cover image for Common tasks of managing HTML DOM with vanilla JavaScript
Phuoc Nguyen
Phuoc Nguyen

Posted on • Edited on

Common tasks of managing HTML DOM with vanilla JavaScript

Story

Web development goes very fast. I still remember the moments when starting to use jQuery, Prototype,script.aculo.us, Zepto and many more.

Nowadays, even if our application is powered by mordern tools such as Angular, Vue, React, Svelte, .etc, we have to deal with DOM.
The frameworks encapsulate and hide the DOM management directly, but still give us a door to work with DOM via ref, event handlers.

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.

Introducing htmldom.dev

htmldom.dev

  • No external library. Only native browsers' APIs
  • Small and easy to understand examples
  • Live demos with source made in vanilla Javascript:

Live demo

  • Many tips and good practices included, such as

Good to know

  • Many real use cases
  • Work with the modern browsers. Try to support IE 11

Here it is

Help me spread it

If you find it helpful, please

Don't forget to hit the Subscribe button to get the latest news on htmldom.dev and my upcoming tools.
In case you miss, CSS Layout is another useful resource as well.

See you in the next journey! And stay safe, my friends.

Top comments (3)

Collapse
 
zhenghaohe profile image
Zhenghao He

Love your DOM tutorials! htmldom.dev/ This is a literally gold mine and I have been preparing for a front end engineer interview and some of the stuff from the tutorials are exactly what they ask on a real interview. I wonder if you could add more sections about searching and updating data with the backend in html table?

Collapse
 
paramsiddharth profile image
Param Siddharth

This is one of my favourite websites now. :) Good job, Phuoc Nguyen!

Collapse
 
david_ojeda profile image
David Ojeda

Amazing resource, thanks a lot! :D