---
url: >-
  https://plugin.stripo.email/extensions/reference/nodes/ImmutableHtmlElementNode.md
---
# ImmutableHtmlElementNode

Interface representing immutable HTML element nodes in email templates.

```typescript
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

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

## Inheritance

Extends: [`ImmutableHtmlTextNode`](./ImmutableHtmlTextNode.md)

## Methods

### Attribute Methods

#### getAttribute()

Retrieves the value of a specified attribute.

```typescript
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:**

```typescript
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.

```typescript
hasClass(className: string): boolean
```

| Parameter | Type | Description |
|-----------|------|-------------|
| `className` | `string` | The CSS class name to check |

**Returns:** `boolean` - True if class exists, false otherwise

**Example:**

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

***

#### getClassList()

Retrieves all CSS classes applied to the element.

```typescript
getClassList(): string[]
```

**Returns:** `string[]` - Array of class names

**Example:**

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

***

### Style Methods

#### getStyle()

Retrieves the value of a specific inline style property.

```typescript
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:**

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

***

#### getComputedStyle()

Retrieves the computed style value of a CSS property.

```typescript
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:**

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

***

### Element Information Methods

#### getTagName()

Retrieves the tag name of the element.

```typescript
getTagName(): string
```

**Returns:** `string` - Lowercase tag name

**Example:**

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

***

#### getValue()

Retrieves the value attribute of the element.

```typescript
getValue(): string | undefined
```

**Returns:** `string | undefined` - Value attribute content, or `undefined` if the node or the value attribute is not found

**Example:**

```typescript
const inputValue = inputElement.getValue();
```

***

### Content Methods

#### getInnerHTML()

Retrieves the inner HTML content.

```typescript
getInnerHTML(): string
```

**Returns:** `string` - Inner HTML as string

**Example:**

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

***

#### getOuterHTML()

Retrieves the outer HTML including the element itself.

```typescript
getOuterHTML(): string
```

**Returns:** `string` - Outer HTML as string

**Example:**

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

***

#### getInnerText()

Retrieves the text content of the element and its descendants.

```typescript
getInnerText(): string
```

**Returns:** `string` - Concatenated text content

**Example:**

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

***

### Layout Methods

#### getBoundingClientRect()

Retrieves the bounding rectangle of the element.

```typescript
getBoundingClientRect(): DOMRect | undefined
```

**Returns:** `DOMRect | undefined` - Element's bounding rectangle, or `undefined` if the node or its DOM element is not found

**DOMRect Properties:**

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

**Example:**

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

***

### Advanced Methods

#### getDisplayCondition()

Retrieves the display condition configuration.

```typescript
getDisplayCondition(): DisplayCondition
```

**Returns:** [`DisplayCondition`](../types/DisplayCondition.md) - Display condition object

**Example:**

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