2

I want to access to DOM in Page for edit a standard style of lightning If I execute this script in the Chrome console, I can edit all buttons in the page:

var doc = document.getElementsByClassName("slds-button--brand");
for(var i=0; i<doc.length; i++){
doc[i].style.backgroundColor = "pink";
}

Now, I execute the function in lightning component, in a button:

cmp

<div>
    <button class="slds-button slds-button_brand slds-m-top_small" label="Testtt11" onclick="{!c.test}">
        <span class="label bBody" dir="ltr" data-aura-rendered-by="2255:0">
            Test
        </span>
    </button>
</div>

controller

test : function(component, event, helper) {
    var doc = document.getElementsByClassName("slds-button--brand");
    for(var i=0; i<doc.length; i++){
        doc[i].style.backgroundColor = "pink";
    }
},

But in my lightning component only modify my buton, no all butons in the page How can access to all elements on the page? Thanks

5

You can't. Locker Service is designed specifically to prevent your JavaScript in Lightning Components from reaching into DOM and resources managed by components in other namespaces, including the system namespace.

Here's a quick summary from LockerService and Lightning Container Component: Securely Using Third-Party Libraries in Lightning Components :

LockerService is the primary and preferred isolation mechanism for the Lightning Component Framework. LockerService wraps standard objects like window, document, and element inside a secure version of these objects (SecureWindow, SecureDocument and SecureElement) as a way to control access to APIs and regions of the DOM. When components are loaded, they are provided with the secure wrappers (secureWindow and secureDocument) in lieu of the standard objects (window and document). When a component invokes a method on the document or window object, the secure wrapper can apply appropriate security restrictions. For example, access to the DOM of another component will be:

  • Granted if the other component is in the same namespace.
  • Denied if the other component is in a different namespace.

You won't be able to affect system components or their DOM elements from your Lightning JavaScript, by design.

4
  • Hi David, and with VisualForce? Put a visual into lightning...
    – Rodolfo
    May 30 '19 at 15:20
  • 1
    @Rodolfo Visualforce is run in a frame in lightning and I believe it is delivered from a different domain which triggers security measures within the browser itself. Regardless, the answer really is "you can't, and even if you could, you shouldn't"
    – gNerb
    May 30 '19 at 15:22
  • 1
    What @gNerb said. See Trailhead module on the Visualforce container in Lightning. Put simply, there is no supported way to do what you are trying to do. The best route is probably a browser extension.
    – David Reed
    May 30 '19 at 15:24
  • Ok, thank you very much
    – Rodolfo
    May 30 '19 at 15:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.