.$("elementName") vs .getSymbolElement() - what is the difference?

I have a symbol called Chart on the main stage, along with a symbol called Dot in the library. Dot contains an element (just a basic rectangle) called "bar".

I wanted to dynamically create a couple of copies of Dot, with it's element bar on the main stage. I could create the copies just fine using the code shown below, but they did not line up correctly vertically. Each copy dropped down the stage by a bit. 

var Bars = new Array();

var xPos = 8;

for (i=0;i<3;i++){

   Bars[i] = sym.createChildSymbol("Dot", "Chart");

   Bars[i].$("bar").css ('position', 'absolute');

   Bars[i].$("bar").css ('left', xPos);

   xPos = xPos + 40;

  } //end for

It drove me nuts. I tried including the following to force the Y position:

    Bars[i].$("bar").css ('top', yPos);

That made absolutely no difference at all. It drove me nuts.

Finally, I changed the code in the loop to:

         Bars[i] = sym.createChildSymbol("Dot", "Chart");

         Bars[i].getSymbolElement().css("position", "absolute");

         Bars[i].getSymbolElement().css("left", xPos);

         Bars[i].getSymbolElement().css("top", yPos);

That lines everything up perfectly.

I am thrilled that I have a solution, but now I also have a question:

Why does the syntax Bars[i].$("bar")  not work, but the syntax Bars[i].getSymbolElement()  positions things correctly?

Even more importantly, what if I had two elements within the Dot symbol and wanted to position them independently of each other? How would I address them by name or ID to differentiate them?

Thanks for any light anyone can shed...

Carolyn