In current SF release lightning component.find(…).getElement is not working

Question

In current SF release lightning component.find(…).getElement is not working. I understand this due to Locker service which is blocking DOM elements from getting accessed.

So is there any better way we can access the attributes of elements using other lightning methods ?

Answer 1

Here is a working example .app of what I think you are saying is not working for you (NOTE TO MODERATORS: I did not use a comment because they do not provide enough formatting capabilities to handle code etc).

@nevrekar_amey Please provide something similar that showcases the error case you are seeing.

<aura:application>
    <div aura:id="divID" class="blue">Hi</div>
    <lightning:button label="Remove Class" onclick="{!c.removeClass}"/>
</aura:application>

controller:

({
    removeClass : function(component, event, helper) {
        helper.removeClassHelperMethod(component);
    }
})

helper:

({
    removeClassHelperMethod : function(component) {
        var divElement = component.find('divID').getElement(); 
        $A.util.removeClass(divElement, 'blue'); 
    }
})

css:

.THIS.blue {
    background-color: blue;
}

Or an even better approach that does not run the risk of colliding with Lightning's stewardship of the DOM elements its managing on your behalf:

<aura:application>
    <aura:attribute name="class" type="String" default="blue" access="private"/>
    <div aura:id="divID" class="{!v.class}">Hi</div>
    <lightning:button label="Toggle Class" onclick="{!c.toggle}"/>
</aura:application>

({
    toggle : function(component, event, helper) {
        component.set("v.class", component.get("v.class") === "" ? "blue" : "");
    }
})

Even better - this approach is also guaranteed to work in your init scenario too!

<aura:application>
    <aura:attribute name="class" type="String" default="blue" access="private"/>
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>

    <div aura:id="divID" class="{!v.class}">Hi</div>
    <lightning:button label="Toggle Class" onclick="{!c.toggle}"/>
</aura:application>

({
    init : function(component, event, helper) {
        component.set("v.class", "green");
    },

    toggle : function(component, event, helper) {
        component.set("v.class", component.get("v.class") === "" ? "blue" : "");
    }
})

.THIS.blue {
    background-color: blue;
}

.THIS.green {
    background-color: green;
}

Answer 2

The Locker Service Critical update is a virtual security layer added by Salesforce to prevent XSS issues and to prevent components from reading other component's layout without any restrictions.

The getElement() will work fine if you are accessing any DOM element within your namespace (c:) or (yournamespace:) .. Meaning take the following example..

This App has 2 inputs - one with ui:inputText and other with traditional html input. Both Render as html inputText in the front end, however the namespace differs. The first one falls under the ui: namespace and the later falls under your custom namespace (c:) in my case or (yourcustomnamespace:) if you have configured one.

Accessing Elements in Lightning Components :

Generally we access the components and its attributes as follows

var cmp = component.find("theauraid");

If you console.log this Object returned by ui:namespace will have no method or property called as getElement(), thus causing the aura error when the application is loaded. This is because locker service security does not want you to access the element root of a ui:namespace from your custom namespace. ( c: --> ui: )

Accessing the Elements using javascript methods :

The ui:inputText will get translated as follows in the front-end.

The id of the inputElement "3:0" is the globalID, which can be retrieved as follows

var globalId = component.find("theauraid").getGlobalId();

And if we do Something like document.getElementById(globalId);, this will also return null, because these execution context virtually differs. The Salesforce authored components run in System Mode ( the ui: namespace for instance ) and the code that you write inside the controllers run in USER MODE. Hence you will not have access to the REAL DOM WINDOW. This is what prevents you from acessing other namespaces.

DO look into the following example for a detailed description on locker Services.

Reference : Locker Service Critical Update

Alternative :

Hence if you want to manipulate the elements, and if you wish to work in sync with the locker service critical update. You will have to use elements that works in the local namespace. For instance.

Use your custom HTML mark-up to get the elements in order to manipulate the same. All the properties will be similar to aura:html, do look into the aura:html reference for accessing values and propagating events.

Reference : aura:html reference

Answer 3

Hi Doug your above code suggestion totally works. Now I realize what I was doing wrong. I was trying to call removeClassMethod in init event something like below:(Stealing from Doug :) NOTE TO MODERATORS: I did not use a comment because they do not provide enough formatting capabilities to handle code etc)

(Note: Providing ex samples as the code is a production code)

`<aura:component>
<aura:handler name="init" value="{!this}" event="aura:doneRendering" action="{!c.removeClass}" />

<div aura:id="divID" class="blue">Hi</div>
<lightning:button label="Remove Class" onclick="{!c.removeClass}"/>
</aura:component>`

Now the above code was not working as I was trying to access the DOM at the init even before it was rendering. After I use aura:doneRendering event the error goes away.

The reason why I was calling method at the time of initialization was because I wanted to show some initial values on the page from controller.

Ex controller snippet would look like :

({

   doInit : function(component, event, helper) {
        helper.removeClassHelperMethod(component);
        var callbackMonitor = helper.getremoveClassHelperMonitor(component);
        helper.getSummary(component, callbackMonitor);
   }
})

But now what is happening is though the error does not occur, the summary is not been shown on the page and then when I click on a button which I have to navigate through the above summary pops up.

So I believe the doInit method is not been called when event="aura:doneRendering" is been set.

Ex helper code:

({
    removeClassHelperMethod : function(component) {
        var divElement = component.find('divID').getElement(); 
        $A.util.removeClass(divElement, 'blue'); 
    }
})