$w( )

Selects and returns elements from a page.

Description

The $w() function selects single or multiple elements by ID or type.

To select by ID, pass a selector string with the hash symbol (#) followed by the ID of the item you want to select (e.g. "#myElement"). The function returns the selected element object.

To select by type, pass a selector string with the name of the type without the preceding # (e.g. "Button"). The function returns an array of the selected element objects. An array is returned even if one or no elements are selected.

To select using multiple selectors, pass a selector string with multiple selectors separated by commas. The selectors in the comma-separated string can be ID selectors, type selectors, or a mixture of the two. The function returns an array of the selected element objects. An array is returned even if one or no elements are selected. If two or more selectors select the same element, it's still returned only once in the array.

Note: Most elements accessible for selection by $w have basic API properties and functions, like id, type, show(), hide(), and others. Use Velo's autocomplete in the code panel to see which API functions and properties are available for each element.

Syntax

function $w(selector: string): Element | Array<Element>

$w Parameters

NAME

TYPE

DESCRIPTION

selector

string

A selector or multiple comma-separated selectors.

Returns

A single selected element or an array of selected elements.

Return Type:

Element

Array<Element>

Was this helpful?

Select an element using its ID

Copy Code

1let myElement = $w("#myElement");
2
3let elementType = myElement.type; // "$w.Type"

Select elements by type

Copy Code

1let typeElements = $w("Type");
2
3let firstOfType = typeElements[0];

Select all the images on the page

Copy Code

1let imageElements = $w("Image");
2
3let firstImage = imageElements[0];

Select elements using multiple selectors

Copy Code

1let selected = $w("#myElement1, #myElement3, Type");

Hide all the page's images

Copy Code

1$w("Image").hide();

Change an element's text

This example shows how to use $w to change an element's text when the page is loaded and when a button is clicked. You can test out the code in our example template.

Copy Code

1$w.onReady(function () {
2  $w('#helloText').text = 'HELLO WORLD !'
3 
4  $w('#clickMeButton').onClick(() => {
5    $w('#helloText').text = 'HELLO WIX !';
6  });
7});
8