Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
bretondevbretondev 

Cannot access DOM element from Lightning Component

I have a Lightning Component which displays a <table> element after rendering.
I want to access the table and add a class to it, but for some reason it does not find the table.
Please help.
  
<aura:handler name="render" value="{!this}" action="{!c.onRender}"/>
onRender: function (component, event, helper) {
        var table = document.getElementsByTagName("table");
        if (table != undefined) {
            table.classList.add("slds-p-bottom_large");
        }
    }
getElementsByTagName does not find the table, why?

 
Best Answer chosen by bretondev
GhanshyamChoudhariGhanshyamChoudhari
Hi,
As you know, Salesforce’s first priority product security.
so they have introduced LockerService For Lightning Components.

You may be wondering what is benefits of LockerService 
  1. “Use strict” enabled
  2. cross-site scripting XSS prevention.
  3. Components from reading other component’s rendered data without any restrictions
  4. Components from calling undocumented/private APIs
  5. Custom components run in “User mode” and don’t have access to the real Document or real “window” object.
  6. Custom components can access other components’ DOM as long as they are in the same namespace but won’t be able to access other components’ DOM that is in the different namespace. For example, JS in the “Animal” component can access DOM of “Lion” component, but won’t be able to access DOM elements of the “button” component.

All Answers

bretondevbretondev
The funny thing is that I can find the table when I type document.getElementsByTagName("table") in the Google console
GhanshyamChoudhariGhanshyamChoudhari
Hi,
You cant access DOM in lightning components 
please refer this link to create a table in a lightning component 

https://developer.salesforce.com/forums#!/feedtype=SINGLE_QUESTION_DETAIL&dc=Developer_Forums&criteria=ALLQUESTIONS&id=9060G0000005cN4QAI

please go through https://trailhead.salesforce.com/en/modules/lex_dev_lc_basics

Mark as best answer if it helps you.
Thanks,
Ghanshyam Choudhari
bretondevbretondev
Ghansyam,
We have found a workaround, but thanks for the info

Can you explain me why on earth it is not possible to access DOM in Lightning?
I just cannot believe that
GhanshyamChoudhariGhanshyamChoudhari
Hi,
As you know, Salesforce’s first priority product security.
so they have introduced LockerService For Lightning Components.

You may be wondering what is benefits of LockerService 
  1. “Use strict” enabled
  2. cross-site scripting XSS prevention.
  3. Components from reading other component’s rendered data without any restrictions
  4. Components from calling undocumented/private APIs
  5. Custom components run in “User mode” and don’t have access to the real Document or real “window” object.
  6. Custom components can access other components’ DOM as long as they are in the same namespace but won’t be able to access other components’ DOM that is in the different namespace. For example, JS in the “Animal” component can access DOM of “Lion” component, but won’t be able to access DOM elements of the “button” component.
This was selected as the best answer
Gianina SkarlettGianina Skarlett
Hi @bretondev,  wondering if you could share the workaround. I'm currently trying to access the Email input that Salesforce offers to agents to reply to customer emails but as you mentioned I don't have access to it (I don't own the component either). What I want to do is add a key down event to log what the agent is typing inside of my browser extension.