The DOMElement object is a critical part of the Webflow Designer API. It is used to create and manipulate elements within the Webflow Designer's canvas through a range of methods for manipulating properties, styles, and child elements.

Creating Elements

To create an element on the canvas, use the createDOM() method of the webflow object. This method takes the HTML Tag of the new element (e.g. div, span, a, etc) as an argument and returns a new DOMElement object.

let newDiv = webflow.createDOM('div');
// newDiv is now a DOMElement with the a div tag

Once a DOMElement is created, you can use the following methods to manage the elements, styles, attributes and more.

❗️

Combo Class creation is not currently supported

The Designer APIs currently offer read-only access to Combo Classes.

Modifying Elements

To edit an element on the canvas, use the getSelectedElement() method or the other selection methods on the webflow object. This method finds the currently selected element in the Webflow designer and returns an object representing the element type of the selected object. You can see a full list of supported elements in our designer extensions typing file.

let element = await webflow.getSelectedElement();
// Use methods on selected element 

Once a DOMElement is created, you can use the following methods to manage the elements, styles, attributes and more.

Methods

Meta

Get Element Tag

getTag(): null | string

Description: Returns the tag value for the DOMElement. This is useful when you need to know the type of an element (like 'div', 'span', 'a', etc.).

Returns: string - The tag value

const tagName = myDomElement.getTag();

Attributes

Get Element Attribute

getAttribute(name: string): null | string

Description: Get the value of the specified attribute for the DOMElement. This is useful when you need to get the value of attributes like 'class', 'id', 'href', etc.

Parameters:

• name: string - The name of the attribute

Returns: The value of the specified attribute for the DOMElement. If the attribute does not exist, it returns null.

let attrValue = myDOMElement.getAttribute('myAttribute');

Set Element Attribute

setAttribute(name: string, value: string): undefined

Description: Sets the value of the specified attribute for the DOMElement. This is useful when you need to change the value of HTML attributes like 'class', 'id', 'href', etc.

Parameters:

• name: string - The name of the attribute
• value: string- The value of the attribute

Returns: undefined

myDOMElement.setAttribute('myAttribute', 'myValue');

Remove Element Attribute

removeAttribute(string)

Description: Removes the specified attribute from the DOMElement. This is useful when you need to remove an attribute like 'class', 'id', 'href', etc. from an element. If the attribute does not exist, this method will do nothing.

Parameters:

• name: string - The name of the attribute.

Returns: undefined

// Assume we have a Webflow object and a selected element
let el = await webflow.getSelectedElement();

// Create a new child element
let child = webflow.createDOM('span');
child.setAttribute('label', 'sup');

// Add the child to the selected element
if (el.children && el.configurable) {
  // Ensure the element supports children & saving
  el.setChildren([child]);
  await el.save();
}

// Remove the 'label' attribute from the 'span' element
if (el.type === 'DOM' && el.configurable) {
  // Ensure the element is a DOMElement & supports saving
  el.removeAttribute('label');
  await el.save();
}

Select Element's Custom Attribute

getCustomAttribute(name: string): null | string

Description: Retrieves the value of a specified custom attribute.

Parameters:

• name:string -The name of the custom attribute to retrieve.

Returns:

• If the specified custom attribute exists, returns its value as a string.
• If the specified custom attribute does not exist, returns null.

// Get the currently selected element
let element = webflow.getSelectedElement();

// Check if the element has custom attributes
if (element.customAttributes) {
  // Get a custom attribute
  const attrValue = element.getCustomAttribute("my-attribute");
  if (attrValue !== null) {
    console.log(`The value of "my-attribute" is ${attrValue}`);
  } else {
    console.log(`"my-attribute" does not exist on this element.`);
  }
}

Get All Custom Attributes

getAllCustomAttributes(): null | array<CustomAttribute>

Returns an array of all custom attributes present on the selected element in the Designer. Each custom attribute is an object in the array with properties name and value representing the attribute's name and value respectively.

Returns: undefined

// Get the currently selected element
let element = webflow.getSelectedElement();

// Get All Custom  Attributes of the Element
const attributes = el.getAllCustomAttributes()
// attributes = [{name:'foo', value: 'bar'}]

Set Element's Custom Attributes

setCustomAttribute(): undefined

You can define your own Custom Attributes. They are typically prefixed with data- to ensure they will be completely ignored by the user agent. Custom attributes can be used to store extra information that doesn't have any visual representation. For example, you might use a custom attribute to store metadata about an element, such as a product ID or other application-specific data.

Sets the value of a specified custom attribute. If the attribute does not already exist, it is added.

Parameters:

• name (string): The name of the custom attribute to set.
• value (string): The value to set the custom attribute to.
  Returns:

This method does not return a value.

// Get the currently selected element
let element = webflow.getSelectedElement();

// Check if the element has custom attributes
if (element.customAttributes) {
  console.log("This element has custom attributes.");
}

// Set a custom attribute
element.setCustomAttribute("my-attribute", "my-value");
console.log("'my-attribute' has been set to 'my-value'");

Text Content

Set Text Content

setTextContent(content: string): undefined

Description: Sets the text content of a typographic node such as a paragraph ('p') or heading ('h1', 'h2', ...)

Parameters:

• content: string - The text content

Returns: undefined

if (myDOMElement.textContent){
  myDOMElement.setTextContent('Hello, Webflow!');
}

Children

Get Element Children

getChildren(): Array<AnyElement>

Description: Retrieve the child elements of a DOMElement. This is useful when you need to manipulate the child elements of a parent element.

Returns: An array of child elements.

let children = myDOMElement.getChildren();

Set Element Children

setChildren(children: Array<AnyElement>)

Description:Sets the child elements of the DOMElement.

Parameters:

• children: Array<AnyElement> - An array of AnyElement objects.

Returns: undefined.

let newChild = webflow.createDOM('div');
myDOMElement.setChildren([newChild]);

Styles

Get Element Styles

getStyles(): Promise<Array<Style>>

Description: Retrieve the styles of a DOMElement. This is useful when you need to get the CSS styles of an element.

❗️

Combo Class editing is not currently supported

The Designer APIs currently offer read-only access to Combo Classes.

Returns: A Promise that resolves to an array of Style objects

const styles = await myDOMElement.getStyles();
// Do something with the styles

Set Element Styles

setStyles(styles: Array<Style>): undefined

Description:Sets the styles of the DOMElement.

Parameters:

• styles: Array<Style> - An array of Style objects

Returns: undefined

let newStyle = webflow.createStyle('myStyle');
myDOMElement.setStyles([newStyle]);

Saving, removing, & deleting

Detach Element from Canvas

detach(): Promise<undefined>

Description: Detach a DOMElement from the Canvas, effectively removing it from the visual representation of the website in the Designer.

The detach method is used to remove an element from the Webflow Designer's canvas. Calling detach will remove the element from the visual representation of the website in the Designer, but does not delete the local reference to the element. This means you can still manipulate the element in your code after calling detach.

Returns: A Promise that resolves to undefined.

await myDOMElement.detach()
// The element has been detached

Save Element

save(): Promise<undefined>

Description: Save changes made to a DOMElement back to the Designer.

Returns: A Promise that resolves to undefined.

await myDOMElement.save()
// The element has been saved

Destroy Element

destroy(): undefined

Description: Remove the local reference to an element and trigger the cleanup process.

The destroy method is used to remove the local reference to an element and trigger the cleanup process. After you call destroy, you should no longer use the element in your code.

This method does not remove the element from the Designer's canvas. If you want to remove the element from the canvas, you should call detach() before destroy().

Returns: undefined

await myDOMElement.destroy();
// The element has been destroyed

Properties