The open source project HTML DOM has 100 snippets of vanilla JavaScript for common DOM manipulation tasks. It also has 1.8K stars on GitHub, which must make it worthwhile taking a look.

Why should I do manual DOM manipulation when there are third party libraries and frameworks that can do it easier and better?

There could be a couple of reasons. First do you need all the bloat that comes with the library? because in most cases a library would do more than one thing which you might not need.

Then do you want to get into the learning curve necessary to master a framework for just getting one thing out of it?

Finally, by building your own you advance your knowledge and become a better programmer.I know that this might not be possible as in most cases you need a library but this tiny case of manipulating the DOM should be self-contained.

Also the standardization of the native browser APIs in every modern browser and the performance gains you get by using them, render libraries like Jquery not necessary anymore.

Of course when you're dealing with large scale applications, a framework like React or Vue might be a one way direction.But in all other cases it's best to start bare bones and add libraries and frameworks as deemed necessary.In any case, learning vanilla JS first makes it much easier to jump onto a framework later on.

With that out of the way, let's see what HTML DOM has to offer.It contains 100 snippets of vanilla JS to common DOM manipulation tasks.They are small and easy to understand and exclusively use the native browsers' APIs, no external libraries.

The tasks range from basic like "Adding or removing a class from an element":

ele.classList.add('class-name');
// Add multiple classes (Not supported in IE 11)
ele.classList.add('another', 'class', 'name');

ele.classList.remove('class-name');
// Remove multiple classes (Not supported in IE 11)
ele.classList.remove('another', 'class', 'name');

to intermediate like "Checking if an element is scrollable":

const isScrollable = function(ele) {
// Compare the height to see if the element has scrollable content
const hasScrollableContent = ele.scrollHeight > ele.clientHeight;

// It's not enough because the element's `overflow-y` style can be set as
// * `hidden`
// * `hidden !important`
// In those cases, the scrollbar isn't shown
const overflowYStyle = window.getComputedStyle(ele).overflowY;
const isOverflowHidden = overflowYStyle.indexOf('hidden') !== -1;

return hasScrollableContent && !isOverflowHidden;
};

to advanced like "Dragging and dropping an element in a list".

Others include: 

• Allow to enter particular characters only
• Append to an element
• Attach or detach an event handler
• Calculate the mouse position relative to an element
• Calculate the size of scrollbar
• Check if an element is a descendant of another
• Check if an element is in the viewport
• Check if an element is scrollable
• Check if the native date input is supported
• Clone an element
• Communication between an iframe and its parent window
• Copy text to the clipboard
• Detect clicks outside of an element
• Detect if an element is focused
• Detect if the caps lock is on
• Detect mac os browser
• Determine the height and width of an element
• Distinguish between left and right mouse clicks 

and much more.

Closing up, HTML DOM is a great and compact guide for jump-starting your journey into JS or writing quick and dirty scripts or building something awesome with just vanilla JS and no external dependencies. The project can also be self-hosted locally by forking its Github repo.
Enjoy!

More Information

HTMLDOM.DEV

HTMLDOM.DEV on Github

Related Articles

LInQer ports .NET LINQ to Javascript

TypeOfNaN JavaScript Quizzes

Getting Started With React For Free

Dwitter On The JavaScript Demoscene

To be informed about new articles on I Programmer, sign up for our weekly newsletter, subscribe to the RSS feed and follow us on Twitter, Facebook or Linkedin.

Comments

Make a Comment or View Existing Comments Using Disqus

or email your comment to: comments@i-programmer.info