Element Basics

In requery-js, elements are reactive references to DOM nodes tagged with the rq attribute. They provide a fluent API for manipulating the DOM and applying reactive behaviours.

Written By Joel

Last updated About 1 month ago

Querying Elements

You can access Elements using the query method available on the component instance.

// Query a single element
const message = component.query("title")

Element API

Elements expose properties and methods for reactive DOM manipulation and state management.

Properties

Name

Type

Description

name

string

The value of the rq attribute

node

HTMLElement

The underlying DOM node

parent

Element

Parent element if queried as child

elements

Map

Map of child elements by name

Methods

Name

Description

Chainable

bind(property, value)

Binds a DOM property or attribute reactively

✅

text(value)

Sets text content reactively

✅

show(condition)

Toggles visibility without removing from DOM

✅

if(condition, setup?)

Conditionally renders element, removing from DOM

❌

for(items, keyFn?, setup)

Renders a list of elements with optional keying

❌

query(name)

Finds child element by rq attribute

✅

onMounted(callback)

Runs when the element is mounted with optional cleanup

❌

dispose()

Cleans up element resources

❌

Method Chaining

Methods marked with ✅ return the element instance, allowing you to chain multiple operations:

component.query("button")
  .text(() => store.buttonText)
  .bind("disabled", () => store.isLoading)
  .bind("class.active", () => store.isActive)
  .on("click", () => actions.submit())

Non-chainable methods (❌) typically involve more complex operations like conditional rendering or cleanup that don't support chaining.

Lifecycle Hooks

Elements have a single lifecycle hook that handles both initialisation and cleanup:

onMounted()

The onMounted method runs after an element is initialised and can return an optional cleanup function:

defineComponent("my-component", {
  setup(component, props, store) {
    component.query("chart").onMounted(() => {
      // Initialise after element setup
      initChart();
          
      // Optional: return cleanup function
      return () => {
        // Cleanup when element is removed
      };
    });
  }
});

Could not load article.

Could not load article.