Let’s look at a sample component that demonstrates DOM containment.
<!--c:domLocker--> <aura:component> <div id="myDiv" aura:id="div1"> <p>See how LockerService restricts DOM access</p> </div> <lightning:button name="myButton" label="Peek in DOM" aura:id="button1" onclick="{!c.peekInDom}"/> </aura:component>
The c:domLocker component creates a <div> element and a <lightning:button> component.
Here’s the client-side controller that peeks around in the DOM.
({ /* domLockerController.js */ peekInDom : function(cmp, event, helper) { console.log("cmp.getElements(): ", cmp.getElements()); // access the DOM in c:domLocker console.log("div1: ", cmp.find("div1").getElement()); console.log("button1: ", cmp.find("button1")); console.log("button name: ", event.getSource().get("v.name")); // returns an error //console.log("button1 element: ", cmp.find("button1").getElement()); } })
The following methods are valid DOM access because the elements are created by c:domLocker.
You can’t use cmp.find("button1").getElement() to access the DOM element created by <lightning:button>. LockerService doesn’t allow c:domLocker to access the DOM for <lightning:button> because the button is in the lightning namespace and c:domLocker is in the c namespace.
If you uncomment the code for cmp.find("button1").getElement(), you’ll see an error:
c:domLocker$controller$peekInDom [cmp.find(...).getElement is not a function]