function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Sumit Budhiraja 9133Sumit Budhiraja 9133 

How to get dom value of element in lightning namespace?

I am facing some problem in traversing lightning proxy dom. 

Requirement: To change the lightning icon (SVG use path) when lightning components render as in below lightning icon  Dom screen-shot:

User-added image

Here, I am using lightning approval icon and it generates "approval" id when it renders in the browser by default.
So, I have to access this SVG part of Dom id="approval"  which I am unable to do so with below code.
Couple of below scenarios I used to get this:

1) Component.find()- I tried with the component.find("approval") but it gives undefined as it requires aura:id, which is not my case- as I have to find this dom component in the controller by this "approval" id only.
2) Jquery-I used Jquery to traverse dom but no luck.
3) component.getElements()- This gives proxy dom component(Locker Service) and values of this SVG are coming when I am debugging it as in the last screen-shot, but I am unable to traverse this Dom after.

Could you please help me with this and tell me an easy way to do that?

Component Code:
<aura:component >
    <ltng:require scripts="{!$Resource.jQuery + '/jquery.js'}" afterScriptsLoaded="{!c.scriptsLoaded}"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />:
    <div  id="test">
        <lightning:icon iconName="action:approval" size="large" alternativeText="Indicates approval"/>

Controller :
 doInit : function(component, event, helper) {
var svg = component.find('approval');
        console.log('i am in doinit');
        //var elements = document.getElementsByClassName("slds-icon-action-approval");
    scriptsLoaded : function(component, event, helper) {
         //console.log($( '#test'));

    afterRender  : function(component,helper){
     var svg=component.getElements();
        console.log('i am in afterrender');

User-added image

Thanks in Advance!!
Shubham saini 14Shubham saini 14



You have to add aura:id attribute in <lightning:icon>


<lightning:icon iconName="action:approval" aura:id="approval"  size="large" alternativeText="Indicates approval"/>


Now,find this element in js controller


var svg = component.find('approval');


Thank you

Sumit Budhiraja 9133Sumit Budhiraja 9133
Thanks Shubham for replying,

But my requirement is such like I have to get it through without aura id.

Chris SalgadoChris Salgado
Hi Sumit,

Did you find a fix?

- I currently have the same issue, I need to reference other DOM Elements from other Components but due to Lighthning Locker I can only see components within the same namespace.

- I have tried 'document.querySelector()' to search the DOM by Class but from my Lightning Components JS Controller I don't think the whole DOM Heirarchy is available, specifically the Standard Salesforce Community Template elements (buttons, linkes, etc.) basically anything that is not a Lightning Component.

Any help is appreciated.

Cs BCs B
Hi Chris! I'm looking for a solution to access DOM in other components. Where you able to find a way?

Hi All,

I'm also looking for a solution to access DOM in other components. Did anyone find a solution ?