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;
}
Best Answer
I have done some POC on this component and found out that i was using component.find("") on textId div on init of component. then afterwards whenever i was trying to use component.find(“textId”).getElements() on that div it was giving error because component.find(“textId”) was returning secure component reference. i changed my init method and added my logic onmouseover event now i am able to use component.find(“”).getElements().