Know the browser APIs. Know the little tricks.

April 8th, 2016

Many front-end devs don’t know some useful JS and DOM API. Many of us happily use jQuery when the same API is available natively. Check how many of these you know:

Add CSS class to an element: element.classList.add('active') That is the equivalent to jQuery’s $(element).addClass('active')

To check whether a CSS class exist on an element or not: element.classList.contains('active')
Removing a specific style from style attribute: element.style.removeProperty('display');

Not every developer seems to know this API. Maybe because the internet seems to be filled with the jQuery solution: $(element).css('display', '');
Getting closest parent using a selector is useful within mouse/touch event handlers: event.target.closest('.box')

Note: For IE 11 a polyfill would be needed.

That is the equivalent to jQuery’s $(event.target).closest('.box')
Standard API replacement for shallow merge, like jQuery’s $.extend()? Object.assign({x: 1}, {y: 2}).

Note: For IE 11 a polyfill would be needed.
Convert Array-like data structure to Array?

Array.from(document.querySelectorAll('div'))

Array.from(document.body.children)

Note: For IE 11 a polyfill would be needed.
Finding the distance of an element from mouse cursor/touch point is useful during drag-&-drop operations:
```
var rect = event.target.closest('.box').getBoundingClientRect(),
  offset = {
    left: event.pageX - rect.left,
    top: event.pageY - rect.top
  };
```
The coordinates (e.pageX,e.pageY) and the coordinates returned by getBoundingClientRect(), both are relative to top-left of viewport (and not the document).

So anytime you want to convert mouse/touch coordinates relative to another element, this trick will work.

Inner width of an element (excluding padding, scrollbar):

function computedInt(el, prop) {
  return parseInt(getComputedStyle(el).getPropertyValue(prop), 10);
}
var innerWidth = element.clientWidth - computedInt(el, 'padding-left') - computedInt(el, 'padding-right');

Check if an element is in document: document.body.contains(element); However if you want to know whether an element is rendered on-screen, then checking whether it is in the document isn’t sufficient. The element could be using CSS display: none.
```
function isOnScreen(el) {
  // offsetParent would be null if display 'none' is set.
  // However Chrome, IE and MS Edge returns offsetParent as null for
  // elements with position 'fixed' CSS.
  // So check whether the dimensions are zero.
  if (!el.offsetParent && !el.offsetWidth && !el.offsetHeight) {
      return false;
  }
  return true;
}
```
It is important to check whether an element is rendered by the browser before using certain APIs like offsetWidth, getComputedStyle(), since you won’t get expected value when element isn’t rendered.

JavaScript