---
schema_version: "1"
id: b2ca76ce056820773ba48de3bcaff21cc07e93edd79afa9fc9cdfb44b32d2fab
title: Using $Component to Reference Components from JavaScript
collection: developer
version: current
locale: en-us
portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/javascript/pages-access.md
canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-access.html
source_site: developer.salesforce.com
content_type: documentation
content_hash: cf8264c1906792b16e3aab029542f949d07c315fa153d2ae61b6f29bef1e00f2
products:
  - Visualforce Developer Guide
  - Platform Developer Content
---

# Using $Component to Reference Components from JavaScript

Use the `$Component` global variable to simplify referencing the DOM ID that is generated for a Visualforce component, and reduce some of the dependency on the overall page structure.

Every Visualforce tag has an `id` attribute. The `id` attribute for a tag can be used by another tag to bind the two tags together. For example, the `<apex:outputLabel>` tag’s `for` attribute can be used with the `<apex:inputField>` tag’s `id` attribute. The `reRender` and `status` attributes on `<apex:actionFunction>`, `<apex:actionSupport>`, and other action-oriented components also use the value of the `id` attribute from other components.

In addition to being used to bind Visualforce components together, this ID is used to form part of the document object model (DOM) ID for the component when the page is rendered.

To refer to a Visualforce component in JavaScript or another Web-enabled language, you must specify a value for the `id` attribute for that component. A DOM ID is constructed from a combination of the `id` attribute of the component and the `id` attributes of all components that contain the element.

## Component Access Example

The following example uses the DOM ID for an `<apex:outputPanel>` tag. The page contains two panels: the first holds a checkbox that fires a DOM event, and the second contains some text that’s changed in response to the event.

The top of the page includes JavaScript contained within the `<script>` HTML tag. It takes as arguments the element that triggered the event (_input_) and the DOM ID (_textid_) of the target panel containing the text to be affected.

<!-- otherprops: apex_page set_clipboard -->
```markup
<apex:page id="thePage">
    <!-- A simple function for changing the font. -->
    <script>
        function changeFont(input, textid) {
            if(input.checked) {
                document.getElementById(textid).style.fontWeight = "bold";
            }
            else {
                document.getElementById(textid).style.fontWeight = "normal";
            }
        }
    </script>

    <!-- This outputPanel calls the function, passing in the
         checkbox itself, and the DOM ID of the target component. -->
    <apex:outputPanel layout="block">
        <label for="checkbox">Click this box to change text font:</label>
        <input id="checkbox" type="checkbox"
            onclick="changeFont(this,'{!$Component.thePanel}');"/>
    </apex:outputPanel>

    <!-- This outputPanel is the target, and contains 
         text that will be changed. -->
    <apex:outputPanel id="thePanel" layout="block">
        Change my font weight!
    </apex:outputPanel>
</apex:page>
```

The `{!$Component.thePanel}` expression is used to obtain the DOM ID of the HTML element generated by the `<apex:outputPanel id="thePanel">` component.

**See Also**  


-   [Best Practices for Accessing Component IDs](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/best-practices/pages-best-practices-accessing-id.md)
-   [$Component](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/variables/pages-variables-global-component.md)