Using the find function to locate the DOM

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