Using Component.find vs Document.getElementById to Dynamically Hide or Show Content in Lightning Components

Business Scenario: To dynamically Show or Hide content in Lightning Components.

Using "Document.getElementById"

Below are Component and Controller code to show or hide content by using Document.getElementById

HideShow.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <!--Set component attribute-->
    <aura:attribute name="valSet" type="Set"/>
    
    <center>
        <!--Button to display Set values-->
        <lightning:button onclick="{!c.getSetValues}" label="Set Values"/>
    </center>
    
    <!--Construct HTML Table using SLDS-->
    <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
    <thead>
      <tr class="slds-text-heading--label">
        <th scope="col"><div class="slds-truncate" title="ID">SET DATA</div></th>
      </tr>
    </thead>    
    <tbody id="bodyId">
      <aura:iteration items="{!v.valSet}" var="s">
        <tr>
          <td><div class="slds-truncate" title="{!s}">{!s}</div></td>
        </tr>
      </aura:iteration>
    </tbody>
  </table>
</aura:component>

HideShow.js

/** Client-side Controller **/
({
    getSetValues: function(cmp) {
        // Get dom id for the table body
        var x = document.getElementById("bodyId");
        
        // Variable to input Set values manually
        var tempSet = ['SetValue1', 'SetValue2', 'SetValue3', 'SetValue4', 'SetValue5', 'SetValue6'];
        
        // Assign above variable to the Set attribute
        cmp.set("v.valSet", tempSet);
        
        // Below logic to show/hide table body based on user click        
        if (x.style.display === "block") {
            x.style.display = "none";
        } else {
            x.style.display = "block";
        }          
    }
})

Output:

Here "Document.getElementById" works fine when we have unique DOM element with the Id that is being used for reference. Now lets say if we have two DOM elements with the same Id and in this case the "Document.getElementById" will only work for the last referenced DOM element!

---

Using "Component.find"

Below are Component, Controller, and Style code to show or hide content by using Component.find

HideShow.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
    <!--Set component attribute-->
    <aura:attribute name="valSet" type="Set"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <center>
        <!--Button to display Set values-->
        <lightning:button onclick="{!c.toggleText}" label="Set Values"/>
    </center>
    
    <!--Construct HTML Table using SLDS-->
    <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout" aura:id="bodyId">
    <thead>
      <tr class="slds-text-heading--label">
        <th scope="col"><div class="slds-truncate" title="ID">SET DATA</div></th>
      </tr>
    </thead>    
    <tbody>
      <aura:iteration items="{!v.valSet}" var="s">
        <tr>
          <td><div class="slds-truncate" title="{!s}">{!s}</div></td>
        </tr>
      </aura:iteration>
    </tbody>
  </table>
</aura:component>

HideShow.js

/** Client-side Controller **/
({
    doInit: function(cmp) {
        // Variable to input Set values manually
        var tempSet = ['SetValue1', 'SetValue2', 'SetValue3', 'SetValue4', 'SetValue5', 'SetValue6'];
        
        // Assign above variable to the Set attribute
        cmp.set("v.valSet", tempSet);
    },
    toggleText: function(cmp) {                
        var toggleText = cmp.find("bodyId");
        $A.util.toggleClass(toggleText, "toggle");
    }
})

HideShow.css

/*toggleCss.css*/
.THIS.toggle {
    display: none;
}

Output:

Here "Component.find" is Salesforce provided standard way of referring component Id and it works fine no matter how may other component elements have same Id!

Reference Links:

Salesforce Documentation Link for Dynamically Showing or Hiding Markup.

Also refer aura:if documentations for dynamic toggling content in Lightning Components.

Thank you!