$Component

A global merge field type to use when referencing a Visualforce component.

Usage

Each component in a Visualforce page has its own Id attribute. When the page is rendered, this attribute is used to generate the Document Object Model (DOM) ID. Use $Component.Path.to.Id in JavaScript to reference a specific component on a page, where Path.to.Id is a component hierarchy specifier for the component being referenced.

Example

The following JavaScript method references a component named msgpost in a Visualforce page:
function beforeTextSave() {
    document.getElementById('{!$Component.msgpost}').value = 
        myEditor.getEditorHTML();
}
The page markup that follows shows the <apex:outputText> component to which msgpost refers:
<apex:page>
    <apex:outputText id="msgpost" value="Emacs"/> is great.
</apex:page>
If your component is nested, you might need to use a more complete component path specifier. For example, if your page looks like this:
<apex:page>
    <apex:pageBlock id="theBlock">
        <apex:pageBlockSection id="theSection" columns="1">
            <apex:pageBlockSectionItem id="theSectionItem">
                <apex:outputText id="theText">
                    Heya!
                </apex:outputText>
            </apex:pageBlockSectionItem>
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:page>
Then you can refer to the component in a function like this:
document.getElementById(
    "{!$Component.theBlock.theSection.theSectionItem.theText}")