Get element children

`element.getChildren()`

Get child elements from a parent element in the element hierarchy.

You can also check the read-only children property to see if an element can have children. Having this property enables methods related to children, such as element.append(), element.prepend(), element.after(), and element.before().

Syntax

1 element.getChildren(): Promise<Array<AnyElement>>

Returns

Promise<Array<AnyElement>>

A Promise that resolves to an array of AnyElement objects.

AnyElement represents the various element types available in a Webflow project. See a full list of supported element types in our Designer Extension type definitions.

Example

1 // Get Selected Element
2 const selectedElement = await webflow.getSelectedElement();
3 
4 if (selectedElement?.children) {
5 
6   // Get Children
7   const children = await selectedElement.getChildren();
8 
9   // Get Children Details
10   const childrenDetailsPromises = children.map(async (child) => {
11 
12 
13     // Get style details of children (This is the name of the element in the Designer)
14     let styleDetails = null;
15     let childStyles = child.styles ? await child.getStyles() : null;
16 
17     if (childStyles) {
18       const styleNamesPromises = childStyles.map(style => style.getName());
19       styleDetails = await Promise.all(styleNamesPromises);
20     }
21 
22     return {
23       styleDetails,
24     };
25   });
26 
27   // Print details of child elements
28   const childrenDetails = await Promise.all(childrenDetailsPromises);
29   console.log(childrenDetails); // This will now log the array of child details
30 }

Designer Ability

Checks for authorization only

Designer Ability	Locale	Branch	Workflow	Sitemode
canAccessCanvas	Any	Any	Any	Any

1	// Get Selected Element
2	const selectedElement = await webflow.getSelectedElement();
3
4	if (selectedElement?.children) {
5
6	// Get Children
7	const children = await selectedElement.getChildren();
8
9	// Get Children Details
10	const childrenDetailsPromises = children.map(async (child) => {
11
12
13	// Get style details of children (This is the name of the element in the Designer)
14	let styleDetails = null;
15	let childStyles = child.styles ? await child.getStyles() : null;
16
17	if (childStyles) {
18	const styleNamesPromises = childStyles.map(style => style.getName());
19	styleDetails = await Promise.all(styleNamesPromises);
20	}
21
22	return {
23	styleDetails,
24	};
25	});
26
27	// Print details of child elements
28	const childrenDetails = await Promise.all(childrenDetailsPromises);
29	console.log(childrenDetails); // This will now log the array of child details
30	}