A logical control object is an invisible entity distinct from the tree of DOM elements that may make up its visual manifestation. In casual parlance, the term “control” can refer to either the logical entity or the visual tree, or even both these things together. During coding, however, it’s essential to understand which aspect of a control — logical or visual — you’re dealing with.
To go from a logical control object to the top of its DOM element tree is straightforward: as discussed earlier, a control object is itself a jQuery array that contains a reference to the control’s top-level DOM element.
To go the other way, from a DOM element to the corresponding logical control, first use a jQuery selector to obtain a jQuery object referencing the DOM element in question. You can then convert, or “cast”, that object to a more specific class by invoking a jQuery plugin called control(). If the element in question was the top element created by a control, then the control() plugin will return an instance of that control class. This will be a jQuery instance exposing the full functionality of the control. (If the element in question is not the top element of a control, passing the element to control() will return null.)
The demo code doesn’t work initially. It uses jQuery’s find() function to retrieve a reference to the button element which is the root of the BasicButton. (This button element is created implicitly by the BasicButton.create() call.) That result of the find() will be of type jQuery. Since there’s no jQuery function called content(), the call to $element.content() fails.
Your goal: Invoke control() on the result of the find() to cast the jQuery reference to an instance of BasicButton. You will then be able to get the content() of the resulting object.