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