Lightning scripting vs visual force java scripting

We all know when we want to refer any element inside javascript which is embedded in the visual force page, we will be using "document.getelementbyid". Once we get reference of the element we usually perform what ever operations that we want to do inside the scripting.

Well there is no mystery inside the lightning component as well, we all know ,  mostly we are using javascripting inside the aura components , this is pretty simple. Refer any element by using "component.find("Id");" and do what ever you wish on that attribute or element.

----------------------------------------------------------------------------------------------------------------------
<aura:component >
    <ui:button label="Toggle" press="{!c.toggle}"/>
    <p aura:id="text">Now you see me</p>
</aura:component>

-------------------------------------------------------------------------------------------------------------------------

/*toggleCssController.js*/
({
    toggle : function(component, event, helper) {
     
//following statement gets the reference of the attribute by id :text and hence we can do what ever we //want on that attribute like hiding and rendering and so on...
        var toggleText = component.find("text");
//if we want to refer the attribute by name, we have to use component.get("v.nameofattribute")
//if we want to set data to the any attribute, we have to use component.set("v.nameofattribute",value )
//which we want to pass..
        $A.util.toggleClass(toggleText, "toggle");
    }
})
--------------------------------------------------------------------------------------------------------------------------

If above components did not give clear picture on referring aura components by ID, following example will definitely drive out any sort of confusion. copy paste below code and keep the component inside the lightning app.
--------------------------------------------------------------------------------------------------------------------------

<aura:component >
<ui:inputNumber label="First number" aura:id="fn" placeholder="0"/>
    <ui:inputNumber label="second number" aura:id="sn" placeholder="0"/>
    <ui:button aura:id="outputButton" label="Addition" press="{!c.calci}"/>
    <ui:outputNumber aura:id="opn" value=""/>
</aura:component>

-----------------------------------------------------------------------------------------------------------------------
/*Aura controller code */

({
calci : function(cmp, event) {
var firstnumber = cmp.find("fn").get("v.value");
var secondnumber = cmp.find("sn").get("v.value");
var outnumber = cmp.find("opn");
        var finalnumber=0;
        finalnumber=firstnumber+secondnumber;
 
outnumber.set("v.value", finalnumber);
       
}
})
---------------------------------------------------------------------------------------------------------------------------