# $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:

```javascript
function beforeTextSave() {
    document.getElementById('{!$Component.msgpost}').value = 
        myEditor.getEditorHTML();
}

```

The page markup that follows shows the `<apex:outputText>` component to which `msgpost` refers:

```markup
<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:

```visualforce
<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:

```javascript
document.getElementById(
    "{!$Component.theBlock.theSection.theSectionItem.theText}")
```

**See Also**

- [Using $Component to Reference Components from JavaScript](/docs/platform/salesforce-pages-developers-guide/guide/pages-access.md)
- [Best Practices for Accessing Component IDs](/docs/platform/salesforce-pages-developers-guide/guide/pages-best-practices-accessing-id.md)