Modifying the DOM In Aura Component

July 17, 2021 Pankaj Agrahari

The framework creates and manages the DOM elements owned by a component.

If you want to modify these DOM elements created by the framework, modify the DOM elements in the handler for the component’s render event or in a custom renderer. Otherwise, the framework will override your changes when the component is rerendered.

Handle the render event:

When a component is rendered or rerendered, the aura:valueRender event, also known as the render event, is fired.

Handle this event to perform post-processing on the DOM or react to component rendering or rerendering.

The event is preferred and easier to use than the alternative of creating a custom renderer.

Let’s check this with the below example:

Please create a component with the name MyDomModificationComponent and save the following code:

<aura:component>

    <aura:handler name='init' value='{!this}' action='{!c.doInit}' />
    <aura:handler name='render' value='{!this}' action='{!c.handleRender}' />

    <div aura:id="myDiv">
        Welcome Message!
    </div>

</aura:component>

In the above component markup, we are handling two events i.e init event and render event.

({
    doInit : function(component, event, helper) {
        var elementDiv = component.find("myDiv");
        console.log('elementDiv > ' + elementDiv.getElement());

    }, 
    handleRender : function (component, event, helper) {
        var elementDiv = component.find("myDiv").getElement();

        elementDiv.innerText = 'Success is the sum of small efforts, repeated.'
    },
})

In the handleRender method, we are modifying the dom of the div with id = myDiv.

.THIS.block-quotation {
    border: solid rgb(0, 153, 255) 2px;
    padding: 3rem;
}

Below is the preview of this component:

In the above preview if you notice the console log for console.log(‘elementDiv > ‘ + elementDiv.getElement()); in the doInit function.

The return value is null because inside of the init event, the DOM element is not created. Thus, the element is null.

This example demos the way you can use render event to manipulate the DOM.

Ideally, a similar requirement to set a message in a DOM element should be implemented by updating a component’s attribute and use an expression in the markup.

The framework’s rendering service takes care of the DOM updates.

Below we have re-implemented the above example by using the component’s attribute and an expression:

<aura:component>

    <aura:handler name='init' value='{!this}' action='{!c.doInit}' />
    <aura:attribute name="message" type="String" default="Welcome Message!" />

    <div aura:id="myDiv" class="block-quotation">
        {!v.message}
    </div>

</aura:component>

({
    doInit : function(component, event, helper) {
        component.set("v.message", "Success is the sum of small efforts, repeated.");
    }
})

.THIS.block-quotation {
    border: solid rgb(0, 153, 255) 2px;
    padding: 3rem;
}

Create a custom Renderer:

The framework manages the rendering and re-rendering of the DOM element whenever a value changes.

If you want to modify the DOM or take control of the DOM modification, you can do so in the renderer file.

Please note that it’s preferred and easier to handle the render event rather than the alternative of creating a custom renderer.

Please refer to the following screenshot to locate the renderer resource:

Please save the following code into the renderer file.

({

render : function(cmp, 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.superUnrender();
    // do custom unrendering here
}

})

You can add your custom renderer logic in the above methods.

Let’s understand each of these methods.

render():

You can customize rendering in the render() function, which updates the DOM.

The render() function returns a DOM node, an array of DOM nodes, or nothing. The base HTML component expects DOM nodes when it renders a component.

rerender():

When an event is fired, it may trigger actions to change data and call rerender() on affected components. The rerender() function enables components to update themselves based on updates to other components since they were last rendered. This function doesn’t return a value.

If you update data in a component, the framework automatically calls rerender().

afterRender():

The afterRender() function enables you to interact with the DOM tree after the framework’s rendering service has inserted DOM elements.

It’s not necessarily the final call in the rendering lifecycle; it’s simply called after render() and it doesn’t return a value.

unrender():

The base unrender() function deletes all the DOM nodes rendered by a component’s render() function. It is called by the framework when a component is being destroyed.

Customize this behavior by overriding unrender() in your component’s renderer. This method can be useful when you are working with third-party libraries that are not native to the framework.

Let’s also understand the rendering and rendering lifecycles.

Rendering Lifecycle:

The below diagram explains the rendering lifecycle:

Rerendering Lifecycle:

The below diagram explains the rerendering lifecycle:

Please save the following code into MyDomModificiationComponent to see rendering and rerendering lifecycle in action:

<aura:component>

    <aura:handler name='init' value='{!this}' action='{!c.doInit}' />
    <aura:handler name='render' value='{!this}' action='{!c.onRenderHandler}' />
    <aura:attribute name="message" type="String" default="Welcome Message!" />

    <lightning:button variant="neutral" label="Click Me!" title="Click Me!" onclick="{! c.onClickHandler }"/>
    
    <div aura:id="myDiv" class="block-quotation">
        {!v.message}
    </div>

</aura:component>

({
    doInit : function(component, event, helper) {
        console.log('init event called');    
    }, 
    onRenderHandler : function (component, event, helper) {
        console.log('render event called');
    },
    onClickHandler : function (component, event, helper) {
        component.set("v.message", "Success is the sum of small efforts, repeated.");
    }
})

({

    render : function(cmp, helper) {
        var ret = this.superRender();
        // do custom rendering here
        console.log('render called');
        return ret;
    },
        rerender : function(cmp, helper){
        this.superRerender();
        // do custom rerendering here
        console.log('rerender called');
    
    },
        afterRender: function (component, helper) {
        this.superAfterRender();
        // interact with the DOM here
        console.log('afterRender called');
    },
        unrender: function () {
        this.superUnrender();
        // do custom unrendering here
        console.log('unrender called');
    }
    
})

If you preview the component, check the console logs to observe the rendering lifecycle: