---
schema_version: "1"
id: 00687e1a90fca3e930fbb18d735ec98d2438c39f4f1086a5ba6b15e701ec4b90
title: $Component
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/variables/pages-variables-global-component.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-variables-global-component.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: ff1ac770e40d76640e7f318f5d7b27db87e92d354ea31857194def37e0816a2a
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

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

<!-- otherprops: apex_page -->
```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](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/javascript/pages-access.md)
-   [Best Practices for Accessing Component IDs](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/best-practices/pages-best-practices-accessing-id.md)