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, helper) {
        console.log("cmp.getElement(): ", component.find("btn").getElement());//This will not work and a ugly error is thrown
})

Upon a button click, you will see an error, as follows:

Locker Service doesn't allow components to access the DOM for <Lightning:button>, because the button is in the Lightning namespace, and our component is in the c namespace.