Using JavaScript to Reference Components

To refer to a Visualforce component in JavaScript

• 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.
• 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.

To reference a specific Visualforce component’s DOM ID

•   Add a component path specifier to $Component, using dot notation to separate each level in the component hierarchy of the page.
•   For example,
  • use {!$Component.itemId} to reference a component at the same level in the Visualforce component hierarchy,
  • Or use {!$Component.grandparentId.parentId.itemId} to specify a more complete component path.

A $Component path specifier is matched against the component hierarchy

• At the current level of the component hierarchy where $Component is used; and then
• At each successive higher level in the component hierarchy, until a match is found, or the top-level of the component hierarchy is reached.
• Backtracking is not allowed. so if the ID you’re trying to match requires a traversal up and then back down, it won’t match.