Jump directly to main content

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?



    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.