To locate the DOM, you need to assign an aura:id to the DOM element. If there are multiple elements with same ID, an array is returned.

Let's look at an example component to observe the console output for the following component bundle. Let's name the component bundle DemoCmp:

<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" onclick="{! c.handleClick }" />
</aura:component>

The DemoCmpController.js file for the preceding component is as follows:

({
  handleClick : function(component, event, helper) {
        console.log("cmp.getElement(): ", component.find("div1").getElement());
        var div = component.find("div1").getElement();
        //[].forEach.call(div.childNodes, v => console.log(v.className));
        for(var i=0 ; i<div.childNodes.length ;i++){
                console.log(div.childNodes[i].outerHTML);
                console.log(div.childNodes[i].className);
            }
      }
})

To test this, create a simple application bundle with the following code, and click on Preview to view the component:

<aura:application extends="force:slds">
    <c:DemoCmp />
</aura:application>

The console output will look like the following screenshot (after you click on the Submit button). Use the browser console to view the output:

Interestingly, when we used component.find("div1").getElement(), we expected an HTML element as the output. However, if you observe carefully, you will notice that the console output a proxy object instead. That behavior is due to the Salesforce Locker Service, which we will discuss in the next section.

You might be wondering how a developer can find out what APIs are supported for a component. In your Salesforce instance, visit https://<myDomain>.Lightning.force.com/auradocs/reference.app#reference?topic=api:Component, where myDomain is the custom domain of your Salesforce instance.