Selects and returns elements from a page.

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.

Gets a selector function for a specific context.

The at() function returns a scoped selector where the scope is based on the context property. Usually, you will use at() in a event handler that handles events fired on an element contained in a repeater to get a selector with repeated item scope. The returned function selects the elements from the same repeater item where the event was fired.

Sets the function that runs when all the page elements have finished loading.

Use the onReady() function for code you want to run before the user starts interacting with your page.

The onReady() function in the masterpage.js file is called before the onReady() function in the code for the page being viewed.

The following code should be placed inside the onReady() event handler:

• Initialization of element properties: Example: Setting a text element's initial text value.
• Function calls on elements to set their initial state: Example: Disabling a button.
• Dynamic event handlers that you want bound when the page loads: Example: Setting an event handler to be called when the pointer enters an element.
• For SEO, return all content you want search bots to see. Search bots can see the results of any function that runs in onReady() and whose promise is resolved before the onReady() promise is resolved. For asynchronous functions, ensure the function's promise resolves first by returning it in onReady(). Example: Return data queries in onReady() if the queried content is populating page elements.

The following code should not be placed inside the onReady() event handler:

• Static event handlers that are wired using the Properties panel in the Editor are not placed inside the onReady() event handler.
• return statements containing synchronous functions, especially if there is no impact on rendering (such as a query) and no need for SEO. Avoiding these return statements can improve performance.

Preventing double "side effects"

The onReady() event handler may be called twice during the page rendering process, once server-side and once client-side.

Because onReady() code may be run twice, you need to be aware that if your onReady() code causes a side effect, such as inserting an item into a collection, that side effect might happen twice. To avoid a side effect from happening twice, use wix-window-frontend.rendering.env to determine where your code is being executed.