A VVVV patch can interact with the document it's embedded into through its IOBoxes. The DOM Interface automatically establishes a connection between IOBoxes and HTML nodes, attributes, styles, etc. Programming a client side application with VVVV follows the pattern:

1. get data from the DOM through the input IOBoxes,
2. process it, and
3. manipulate the DOM through setting the output IOBoxes

Those connections are established based on the IOBoxes' "Descriptive Names", which have to be in the format

<dom selector>/<property type>/<property>

The dom selector specifies the elements to connect with. You can use everything jQuery understands. Have a look at the Selector section of the jQuery Documentation.

The property type is either attribute, style or event. This allows you to access specific attributes, CSS information, or events for the selected elements.

The property specifies the name of the actual attribute, style or event.

Example: Content and Events

Click the "Show Patch" link on the right to observe the patch. The first two text inputs have the ids "input1" and "input2". See, how the respective IOBoxes in the patch on the right change right away, as you modify the values in the text inputs below. The button got the id "calculate", and the patch queries, if the button has been clicked. If so, the output IOBox, which is connected to the third text input will be set.

Example: Attributes

You can access elements' attributes by using the attribute property type. The example below reads the "href"-property of the "VVVV Website"-link, and writes it into the link text when hovering the mouse pointer over it. Again, hit the "Show Patch" link to the right, to watch the thing working.

Example: Styles

Just as accessing attributes, you can read and write style information of selected elements. Move the mouse across the bars below to see the height and opacity styles get animated.