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"/>
    </div>
</aura:component>

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

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


User-added image


Thanks in Advance!!
Shubham saini 14Shubham saini 14

Hi,

 

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.

Thanks,
Sumit
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.

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

Hi All,

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