Understanding the DOM access containment hierarchy in Lightning Components 

Locker Services restrict component code from reaching out to other components DOMs that are in a different namespace. For example, a custom component cannot reach out to the DOM of the component in the Lightning namespace (a base component).

Let's look at the following code, in order to understand DOM access containment:

<aura:component >  <div aura:id="div1" class="div1" id="div1">        <span class="span1"> 1</span>        <span class="span2"> 2</span>        <span class="span3"> 3</span>    </div>   <Lightning:button variant="brand" label="Submit" aura:id="btn" onclick="{! c.handleClick }" /></aura:component>

The controller code is as follows:

({ handleClick : function(component, event, ...

Get Learning Salesforce Lightning Application Development now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.