HTMLDOM.DEV - Common DOM Tasks With Vanilla JS
Written by Nikos Vaggalis   
Monday, 20 April 2020

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.

htmldomlogo

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!

htmldomsq

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.

Banner


Electron 11 Adds Silicon Support
26/11/2020

Electron 11 has been released with upgrades to Chromium 87, V8 8.7, and Node.js 12.18.3. The new release also adds support for Apple Silicon.



EG: A Tool For API Snippets
25/11/2020

As programmer's our modis operandi is to use existing APIs and turn them to novel uses. In order to do this we rely on good examples of how APIs are used. This is where EG, a tool that mines codebases [ ... ]


More News

square

 



 

Comments




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

Last Updated ( Wednesday, 22 April 2020 )