ImmutableHtmlElementNode

Interface representing immutable HTML element nodes in email templates.

interface ImmutableHtmlElementNode extends ImmutableHtmlTextNode

Description

ImmutableHtmlElementNode represents HTML elements (tags) in the template structure. It provides methods to access element properties, attributes, styles, classes, and content. This interface is essential for inspecting and analyzing HTML elements before making modifications.

Import

import { ImmutableHtmlElementNode } from '@stripoinc/ui-editor-extensions';

Inheritance

Extends: ImmutableHtmlTextNode

Methods

Attribute Methods

getAttribute()

Retrieves the value of a specified attribute.

getAttribute(name: string): string | null

Parameter	Type	Description
name	string	The attribute name (case-sensitive)

Returns: string | null - Attribute value or null if not found

Example:

const href = element.getAttribute('href');
const target = element.getAttribute('target');
const dataId = element.getAttribute('data-id');

---

Class Methods

hasClass()

Checks if the element has a specific CSS class.

hasClass(className: string): boolean

Parameter	Type	Description
className	string	The CSS class name to check

Returns: boolean - True if class exists, false otherwise

Example:

if (element.hasClass('active')) {
    console.log('Element is active');
}

---

getClassList()

Retrieves all CSS classes applied to the element.

getClassList(): string[]

Returns: string[] - Array of class names

Example:

const classes = element.getClassList();
// ['btn', 'btn-primary', 'large']

---

Style Methods

getStyle()

Retrieves the value of a specific inline style property.

getStyle(name: string): string | undefined

Parameter	Type	Description
name	string	The style property name (case-sensitive)

Returns: string | undefined - Style value or undefined if not set

Example:

const color = element.getStyle('color');
const backgroundColor = element.getStyle('background-color');

---

getComputedStyle()

Retrieves the computed style value of a CSS property.

getComputedStyle(name: string): string | undefined

Parameter	Type	Description
name	string	The CSS property name (case-sensitive)

Returns: string | undefined - Computed style value or undefined

Note: Computed styles include inherited and stylesheet-defined styles.

Example:

const computedColor = element.getComputedStyle('color');
const computedFontSize = element.getComputedStyle('font-size');

---

Element Information Methods

getTagName()

Retrieves the tag name of the element.

getTagName(): string

Returns: string - Lowercase tag name

Example:

const tagName = element.getTagName();
// 'div', 'p', 'table', etc.

---

getValue()

Retrieves the value attribute of the element.

getValue(): string

Returns: string - Value attribute content

Example:

const inputValue = inputElement.getValue();

---

Content Methods

getInnerHTML()

Retrieves the inner HTML content.

getInnerHTML(): string

Returns: string - Inner HTML as string

Example:

const innerHTML = element.getInnerHTML();
// '<p>Hello <strong>World</strong></p>'

---

getOuterHTML()

Retrieves the outer HTML including the element itself.

getOuterHTML(): string

Returns: string - Outer HTML as string

Example:

const outerHTML = element.getOuterHTML();
// '<div class="container"><p>Content</p></div>'

---

getInnerText()

Retrieves the text content of the element and its descendants.

getInnerText(): string

Returns: string - Concatenated text content

Example:

const text = element.getInnerText();
// All text content without HTML tags

---

Layout Methods

getBoundingClientRect()

Retrieves the bounding rectangle of the element.

getBoundingClientRect(): DOMRect

Returns: DOMRect - Element's bounding rectangle

DOMRect Properties:

• x, y: Top-left coordinates
• width, height: Dimensions
• top, right, bottom, left: Edge positions

Example:

const rect = element.getBoundingClientRect();
console.log(`Width: ${rect.width}, Height: ${rect.height}`);

---

Advanced Methods

getDisplayCondition()

Retrieves the display condition configuration.

getDisplayCondition(): DisplayCondition

Returns: DisplayCondition - Display condition object

Example:

const condition = element.getDisplayCondition();
if (condition) {
    console.log(`Condition: ${condition.name}`);
}