Modifying the DOM in the RENDERER JavaScript file of the component bundle

The Lightning component framework takes care of rendering and re-rendering the DOM element when the values change. However, if you want to modify the DOM or take control of the DOM modification, you can do so in the render file. The following screenshot illustrates how you can find the RENDERER file for the component or the Lightning application:

To customize, modify, and interact with DOM elements, you must follow the following template in the RENDERER JavaScript file:

({
  // Your RENDERER method overrides go here
  render : function(component, helper) {
        var ret = this.superRender();
        // do custom rendering here
        return ret;
  },

    rerender : function(cmp, helper){
      this.superRerender();
      // do custom rerendering here
  },

    afterRender: function (component, helper) {
      this.superAfterRender();
      // interact with the DOM here
  },

    unrender: function () {
      this...