# ViewDomConverter

class

`ViewDomConverter` is a set of tools to do transformations between DOM nodes and view nodes. It also handles [bindings](#function-bindElements) between these nodes.

An instance of the DOM converter is available under [`editor.editing.view.domConverter`](module_engine_view_view-EditingView.md#member-domConverter).

The DOM converter does not check which nodes should be rendered (use [`ViewRenderer`](module_engine_view_renderer-ViewRenderer.md)), does not keep the state of a tree nor keeps the synchronization between the tree view and the DOM tree (use [`ViewDocument`](module_engine_view_document-ViewDocument.md)).

The DOM converter keeps DOM elements to view element bindings, so when the converter gets destroyed, the bindings are lost. Two converters will keep separate binding maps, so one tree view can be bound with two DOM trees.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L74)

<a id="properties">

## Properties

<a id="member-blockElements">

### `blockElements: Array<string>` _(readonly)_

Elements which are considered block elements (and hence should be filled with a [block filler](#function-isBlockFiller)).

Whether an element is considered a block element also affects handling of trailing whitespaces.

You can extend this array if you introduce support for block elements which are not yet recognized here.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L100)

<a id="member-blockFillerMode">

### `blockFillerMode: ViewBlockFillerMode`

The mode of a block filler used by the DOM converter.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L85)

<a id="member-document">

### `document: ViewDocument` _(readonly)_

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L75)

<a id="member-domDocument">

### `domDocument: Document` _(readonly)_

The DOM Document used by `ViewDomConverter` to create DOM nodes.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L196)

<a id="member-inlineObjectElements">

### `inlineObjectElements: Array<string>` _(readonly)_

A list of elements that exist inline (in text) but their inner structure cannot be edited because of the way they are rendered by the browser. They are mostly HTML form elements but there are other elements such as `<img>` or `<iframe>` that also have non-editable children or no children whatsoever.

Whether an element is considered an inline object has an impact on white space rendering (trimming) around (and inside of it). In short, white spaces in text nodes next to inline objects are not trimmed.

You can extend this array if you introduce support for inline object elements which are not yet recognized here.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L112)

<a id="member-preElements">

### `preElements: Array<string>` _(readonly)_

Elements which are considered pre-formatted elements.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L90)

<a id="member-renderingMode">

### `renderingMode: 'data' | 'editing'` _(readonly)_

Whether to leave the View-to-DOM conversion result unchanged or improve editing experience by filtering out interactive data.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L80)

<a id="member-unsafeElements">

### `unsafeElements: Array<string>` _(readonly)_

A list of elements which may affect the editing experience. To avoid this, those elements are replaced with `<span data-ck-unsafe-element="[element name]"></span>` while rendering in the editing mode.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L118)

<a id="member-_domDocument">

### `_domDocument: Document` _(private)_

The DOM Document used by `ViewDomConverter` to create DOM nodes.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L123)

<a id="member-_domToViewMapping">

### `_domToViewMapping: WeakMap<HTMLElement | DocumentFragment, ViewElement | ViewDocumentFragment>` _(private)_

The DOM-to-view mapping.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L128)

<a id="member-_elementsWithTemporaryCustomProperties">

### `_elementsWithTemporaryCustomProperties: Set<ViewElement | ViewDocumentFragment>` _(private)_

Set of elements with temporary custom properties that require clearing after render.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L154)

<a id="member-_fakeSelectionMapping">

### `_fakeSelectionMapping: WeakMap<HTMLElement, ViewSelection>` _(private)_

Holds the mapping between fake selection containers and corresponding view selections.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L138)

<a id="member-_inlineObjectElementMatcher">

### `_inlineObjectElementMatcher: Matcher` _(private)_

Matcher for inline object view elements. This is an extension of a simple [`inlineObjectElements`](#member-inlineObjectElements) array of element names.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L149)

<a id="member-_rawContentElementMatcher">

### `_rawContentElementMatcher: Matcher` _(private)_

Matcher for view elements whose content should be treated as raw data and not processed during the conversion from DOM nodes to view elements.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L144)

<a id="member-_viewToDomMapping">

### `_viewToDomMapping: WeakMap<ViewElement | ViewDocumentFragment, HTMLElement | DocumentFragment>` _(private)_

The view-to-DOM mapping.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L133)

<a id="methods">

## Methods

<a id="function-constructor">

### `constructor( document, options = { options.blockFillerMode?, options.renderingMode? } )`

Creates a DOM converter.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L168)

#### Parameters

* `document: ViewDocument`

  The view document instance.

* `options: object`

  An object with configuration options.

  Properties

  * `options.blockFillerMode?: ViewBlockFillerMode`

    The type of the block filler to use. Default value depends on the options.renderingMode: 'nbsp' when options.renderingMode == 'data', 'br' when options.renderingMode == 'editing'.

  * `options.renderingMode?: 'data' | 'editing'`

    Whether to leave the View-to-DOM conversion result unchanged or improve editing experience by filtering out interactive data.

    Defaults to `'editing'`

  Defaults to `{}`

<a id="function-bindDocumentFragments">

### `bindDocumentFragments( domFragment, viewFragment ) → void`

Binds DOM and view document fragments, so it will be possible to get corresponding document fragments using [`mapDomToView`](#function-mapDomToView) and [`mapViewToDom`](#function-mapViewToDom:ELEMENT).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L258)

#### Parameters

* `domFragment: DocumentFragment`

  The DOM document fragment to bind.

* `viewFragment: ViewDocumentFragment`

  The view document fragment to bind.

#### Returns

* `void`

<a id="function-bindElements">

### `bindElements( domElement, viewElement ) → void`

Binds DOM and view elements, so it will be possible to get corresponding elements using [`mapDomToView`](#function-mapDomToView) and [`mapViewToDom`](#function-mapViewToDom:ELEMENT).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L226)

#### Parameters

* `domElement: HTMLElement`

  The DOM element to bind.

* `viewElement: ViewElement`

  The view element to bind.

#### Returns

* `void`

<a id="function-bindFakeSelection">

### `bindFakeSelection( domElement, viewDocumentSelection ) → void`

Binds a given DOM element that represents fake selection to a **position** of a [document selection](module_engine_view_documentselection-ViewDocumentSelection.md). Document selection copy is stored and can be retrieved by the [`fakeSelectionToView`](#function-fakeSelectionToView) method.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L206)

#### Parameters

* `domElement: HTMLElement`
* `viewDocumentSelection: ViewDocumentSelection`

#### Returns

* `void`

<a id="function-domChildrenToView">

### `domChildrenToView( domElement, options = { options.bind?, options.keepOriginalCase?, options.skipComments?, options.withChildren? }, inlineNodes ) → IterableIterator<ViewNode>`

Converts children of the DOM element to view nodes using the [`domToView`](#function-domToView) method. Additionally this method omits block [filler](module_engine_view_filler.md), if it exists in the DOM parent.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L789)

#### Parameters

* `domElement: HTMLElement`

  Parent DOM element.

* `options: object | undefined`

  See [`domToView`](#function-domToView) options parameter.

  Properties

  * `options.bind?: boolean`
  * `options.keepOriginalCase?: boolean`
  * `options.skipComments?: boolean`
  * `options.withChildren?: boolean`

  Defaults to `{}`

* `inlineNodes: Array<ViewNode>`

  An array that will be populated with inline nodes. It's used internally for whitespace processing.

  Defaults to `[]`

#### Returns

* `IterableIterator<ViewNode>`

  View nodes.

<a id="function-domPositionToView">

### `domPositionToView( domParent, domOffset ) → ViewPosition | null`

Converts DOM parent and offset to view [`ViewPosition`](module_engine_view_position-ViewPosition.md).

If the position is inside a [filler](module_engine_view_filler.md) which has no corresponding view node, position of the filler will be converted and returned.

If the position is inside DOM element rendered by [`ViewUIElement`](module_engine_view_uielement-ViewUIElement.md) that position will be converted to view position before that UIElement.

If structures are too different and it is not possible to find corresponding position then `null` will be returned.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L910)

#### Parameters

* `domParent: Node`

  DOM position parent.

* `domOffset: number`

  DOM position offset. You can skip it when converting the inline filler node.

  Defaults to `0`

#### Returns

* `ViewPosition | null`

  View position.

<a id="function-domRangeToView">

### `domRangeToView( domRange ) → ViewRange | null`

Converts DOM Range to view [`ViewRange`](module_engine_view_range-ViewRange.md). If the start or end position cannot be converted `null` is returned.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L884)

#### Parameters

* `domRange: Range | StaticRange`

  DOM range.

#### Returns

* `ViewRange | null`

  View range.

<a id="function-domSelectionToView">

### `domSelectionToView( domSelection ) → ViewSelection`

Converts DOM selection to view [`ViewSelection`](module_engine_view_selection-ViewSelection.md). Ranges which cannot be converted will be omitted.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L837)

#### Parameters

* `domSelection: Selection`

  DOM selection.

#### Returns

* `ViewSelection`

  View selection.

<a id="function-domToView">

### `domToView( domNode, options = { options.bind?, options.keepOriginalCase?, options.skipComments?, options.withChildren? } ) → ViewNode | ViewDocumentFragment | null`

Converts DOM to view. For all text nodes, not bound elements and document fragments new items will be created. For bound elements and document fragments function will return corresponding items. For [fillers](module_engine_view_filler.md) `null` will be returned. For all DOM elements rendered by [`ViewUIElement`](module_engine_view_uielement-ViewUIElement.md) that UIElement will be returned.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L741)

#### Parameters

* `domNode: Node`

  DOM node or document fragment to transform.

* `options: object`

  Conversion options.

  Properties

  * `options.bind?: boolean`

    Determines whether new elements will be bound. False by default.

  * `options.keepOriginalCase?: boolean`

    If `false`, node's tag name will be converted to lower case. False by default.

  * `options.skipComments?: boolean`

    If `false`, comment nodes will be converted to `$comment` [view UI elements](module_engine_view_uielement-ViewUIElement.md). False by default.

  * `options.withChildren?: boolean`

    If `true`, node's and document fragment's children will be converted too. True by default.

  Defaults to `{}`

#### Returns

* `ViewNode | ViewDocumentFragment | null`

  Converted node or document fragment or `null` if DOM node is a [filler](module_engine_view_filler.md) or the given node is an empty text node.

<a id="function-fakeSelectionToView">

### `fakeSelectionToView( domElement ) → ViewSelection | undefined`

Returns a [view selection](module_engine_view_selection-ViewSelection.md) instance corresponding to a given DOM element that represents fake selection. Returns `undefined` if binding to the given DOM element does not exist.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L214)

#### Parameters

* `domElement: HTMLElement`

#### Returns

* `ViewSelection | undefined`

<a id="function-findCorrespondingDomText">

### `findCorrespondingDomText( viewText ) → Text | null`

Finds corresponding text node. Text nodes are not [bound](#function-bindElements), corresponding text node is returned based on the sibling or parent.

If the directly previous sibling is a [bound](#function-bindElements) element, it is used to find the corresponding text node.

If this is a first child in the parent and the parent is a [bound](#function-bindElements) element, it is used to find the corresponding text node.

Otherwise `null` is returned.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1119)

#### Parameters

* `viewText: ViewText`

  View text node.

#### Returns

* `Text | null`

  Corresponding DOM text node or `null`, if it was not possible to find a corresponding node.

<a id="function-findCorrespondingViewText">

### `findCorrespondingViewText( domText ) → ViewText | ViewRawElement | ViewUIElement | null`

Finds corresponding text node. Text nodes are not [bound](#function-bindElements), corresponding text node is returned based on the sibling or parent.

If the directly previous sibling is a [bound](#function-bindElements) element, it is used to find the corresponding text node.

If this is a first child in the parent and the parent is a [bound](#function-bindElements) element, it is used to find the corresponding text node.

For all text nodes rendered by a [`ViewUIElement`](module_engine_view_uielement-ViewUIElement.md) or a [`ViewRawElement`](module_engine_view_rawelement-ViewRawElement.md), the parent `UIElement` or `RawElement` will be returned.

Otherwise `null` is returned.

Note that for the block or inline [filler](module_engine_view_filler.md) this method returns `null`.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1010)

#### Parameters

* `domText: Text`

  DOM text node.

#### Returns

* `ViewText | ViewRawElement | ViewUIElement | null`

  Corresponding view text node or `null`, if it was not possible to find a corresponding node.

<a id="function-focus">

### `focus( viewEditable ) → void`

Focuses DOM editable that is corresponding to provided [`ViewEditableElement`](module_engine_view_editableelement-ViewEditableElement.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1138)

#### Parameters

* `viewEditable: ViewEditableElement`

#### Returns

* `void`

<a id="function-getHostViewElement">

### `getHostViewElement( domNode ) → ViewRawElement | ViewUIElement | null`

Returns a parent [`ViewUIElement`](module_engine_view_uielement-ViewUIElement.md) or [`ViewRawElement`](module_engine_view_rawelement-ViewRawElement.md) that hosts the provided DOM node. Returns `null` if there is no such parent.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1295)

#### Parameters

* `domNode: Node`

#### Returns

* `ViewRawElement | ViewUIElement | null`

<a id="function-isBlockFiller">

### `isBlockFiller( domNode ) → boolean`

Checks if the node is an instance of the block filler for this DOM converter.

```typescript
const converter = new ViewDomConverter( viewDocument, { blockFillerMode: 'br' } );

converter.isBlockFiller( BR_FILLER( document ) ); // true
converter.isBlockFiller( NBSP_FILLER( document ) ); // false
```

**Note:**: For the `'nbsp'` mode the method also checks context of a node so it cannot be a detached node.

**Note:** A special case in the `'nbsp'` mode exists where the `<br>` in `<p><br></p>` is treated as a block filler.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1246)

#### Parameters

* `domNode: Node`

  DOM node to check.

#### Returns

* `boolean`

  True if a node is considered a block filler for given mode.

<a id="function-isDocumentFragment">

### `isDocumentFragment( node ) → node is DocumentFragment`

Returns `true` when `node.nodeType` equals `Node.DOCUMENT_FRAGMENT_NODE`.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1225)

#### Parameters

* `node: Node`

  Node to check.

#### Returns

* `node is DocumentFragment`

<a id="function-isDomSelectionBackward">

### `isDomSelectionBackward( selection ) → boolean`

Returns `true` if given selection is a backward selection, that is, if it's `focus` is before `anchor`.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1266)

#### Parameters

* `selection: Selection`

  Selection instance to check.

#### Returns

* `boolean`

<a id="function-isDomSelectionCorrect">

### `isDomSelectionCorrect( domSelection ) → boolean`

Checks if the given selection's boundaries are at correct places.

The following places are considered as incorrect for selection boundaries:

* before or in the middle of an inline filler sequence,
* inside a DOM element which represents [a view UI element](module_engine_view_uielement-ViewUIElement.md),
* inside a DOM element which represents [a view raw element](module_engine_view_rawelement-ViewRawElement.md).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1325)

#### Parameters

* `domSelection: Selection`

  The DOM selection object to be checked.

#### Returns

* `boolean`

  `true` if the given selection is at a correct place, `false` otherwise.

<a id="function-isElement">

### `isElement( node ) → node is HTMLElement`

Returns `true` when `node.nodeType` equals `Node.ELEMENT_NODE`.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1216)

#### Parameters

* `node: Node`

  Node to check.

#### Returns

* `node is HTMLElement`

<a id="function-mapDomToView">

### `mapDomToView( domElementOrDocumentFragment ) → ViewElement | ViewDocumentFragment | undefined`

Returns corresponding view [Element](module_engine_view_element-ViewElement.md) or [`ViewDocumentFragment`](module_engine_view_documentfragment-ViewDocumentFragment.md) for provided DOM element or document fragment. If there is no view item [bound](#function-bindElements) to the given DOM - `undefined` is returned.

For all DOM elements rendered by a [`ViewUIElement`](module_engine_view_uielement-ViewUIElement.md) or a [`ViewRawElement`](module_engine_view_rawelement-ViewRawElement.md), the parent `UIElement` or `RawElement` will be returned.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L983)

#### Parameters

* `domElementOrDocumentFragment: HTMLElement | DocumentFragment`

  DOM element or document fragment.

#### Returns

* `ViewElement | ViewDocumentFragment | undefined`

  Corresponding view element, document fragment or `undefined` if no element was bound.

<a id="function-mapViewToDom:DOCUMENT_FRAGMENT">

### `mapViewToDom( documentFragment ) → DocumentFragment | undefined`

Returns corresponding DOM item for provided [Element](module_engine_view_element-ViewElement.md) or [DocumentFragment](module_engine_view_documentfragment-ViewDocumentFragment.md). To find a corresponding text for [view Text instance](module_engine_view_text-ViewText.md) use [`findCorrespondingDomText`](#function-findCorrespondingDomText).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1085)

#### Parameters

* `documentFragment: ViewDocumentFragment`

  View element or document fragment.

#### Returns

* `DocumentFragment | undefined`

  Corresponding DOM node or document fragment.

<a id="function-mapViewToDom:DOCUMENT_FRAGMENT_OR_ELEMENT">

### `mapViewToDom( documentFragmentOrElement ) → HTMLElement | DocumentFragment | undefined`

Returns corresponding DOM item for provided [Element](module_engine_view_element-ViewElement.md) or [DocumentFragment](module_engine_view_documentfragment-ViewDocumentFragment.md). To find a corresponding text for [view Text instance](module_engine_view_text-ViewText.md) use [`findCorrespondingDomText`](#function-findCorrespondingDomText).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1097)

#### Parameters

* `documentFragmentOrElement: ViewElement | ViewDocumentFragment`

  View element or document fragment.

#### Returns

* `HTMLElement | DocumentFragment | undefined`

  Corresponding DOM node or document fragment.

<a id="function-mapViewToDom:ELEMENT">

### `mapViewToDom( element ) → HTMLElement | undefined`

Returns corresponding DOM item for provided [Element](module_engine_view_element-ViewElement.md) or [DocumentFragment](module_engine_view_documentfragment-ViewDocumentFragment.md). To find a corresponding text for [view Text instance](module_engine_view_text-ViewText.md) use [`findCorrespondingDomText`](#function-findCorrespondingDomText).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1073)

#### Parameters

* `element: ViewElement`

  View element or document fragment.

#### Returns

* `HTMLElement | undefined`

  Corresponding DOM node or document fragment.

<a id="function-registerInlineObjectMatcher">

### `registerInlineObjectMatcher( pattern ) → void`

Registers a [`MatcherPattern`](module_engine_view_matcher-MatcherPattern.md) for inline object view elements.

This is affecting how [`domToView`](#function-domToView) and [`domChildrenToView`](#function-domChildrenToView) process DOM nodes.

This is an extension of a simple [`inlineObjectElements`](#member-inlineObjectElements) array of element names.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1357)

#### Parameters

* `pattern: MatcherPattern`

  Pattern matching a view element which should be treated as an inline object.

#### Returns

* `void`

<a id="function-registerRawContentMatcher">

### `registerRawContentMatcher( pattern ) → void`

Registers a [`MatcherPattern`](module_engine_view_matcher-MatcherPattern.md) for view elements whose content should be treated as raw data and not processed during the conversion from DOM nodes to view elements.

This is affecting how [`domToView`](#function-domToView) and [`domChildrenToView`](#function-domChildrenToView) process DOM nodes.

The raw data can be later accessed by a [custom property of a view element](module_engine_view_element-ViewElement.md#function-getCustomProperty) called `"$rawContent"`.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1343)

#### Parameters

* `pattern: MatcherPattern`

  Pattern matching a view element whose content should be treated as raw data.

#### Returns

* `void`

<a id="function-removeDomElementAttribute">

### `removeDomElementAttribute( domElement, key ) → void`

Removes an attribute from a DOM element.

**Note**: To set the attribute, use [`setDomElementAttribute`](#function-setDomElementAttribute).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L558)

#### Parameters

* `domElement: HTMLElement`

  The DOM element the attribute should be removed from.

* `key: string`

  The name of the attribute.

#### Returns

* `void`

<a id="function-setContentOf">

### `setContentOf( domElement, html ) → void`

Set `domElement`'s content using provided `html` argument. Apply necessary filtering for the editing pipeline.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L331)

#### Parameters

* `domElement: HTMLElement`

  DOM element that should have `html` set as its content.

* `html: string`

  Textual representation of the HTML that will be set on `domElement`.

#### Returns

* `void`

<a id="function-setDomElementAttribute">

### `setDomElementAttribute( domElement, key, value, relatedViewElement? ) → void`

Sets the attribute on a DOM element.

**Note**: To remove the attribute, use [`removeDomElementAttribute`](#function-removeDomElementAttribute).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L517)

#### Parameters

* `domElement: HTMLElement`

  The DOM element the attribute should be set on.

* `key: string`

  The name of the attribute.

* `value: string`

  The value of the attribute.

* `relatedViewElement?: ViewElement`

  The view element related to the `domElement` (if there is any). It helps decide whether the attribute set is unsafe. For instance, view elements created via the [`ViewDowncastWriter`](module_engine_view_downcastwriter-ViewDowncastWriter.md) methods can allow certain attributes that would normally be filtered out.

#### Returns

* `void`

<a id="function-shouldRenderAttribute">

### `shouldRenderAttribute( attributeKey, attributeValue, elementName ) → boolean`

Decides whether a given pair of attribute key and value should be passed further down the pipeline.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L268)

#### Parameters

* `attributeKey: string`

* `attributeValue: string`

* `elementName: string`

  Element name in lower case.

#### Returns

* `boolean`

<a id="function-unbindDomElement">

### `unbindDomElement( domElement ) → void`

Unbinds a given DOM element from the view element it was bound to. Unbinding is deep, meaning that all children of the DOM element will be unbound too.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L237)

#### Parameters

* `domElement: HTMLElement`

  The DOM element to unbind.

#### Returns

* `void`

<a id="function-viewChildrenToDom">

### `viewChildrenToDom( viewElement, options = { options.bind?, options.withChildren? } ) → IterableIterator<Node>`

Converts children of the view element to DOM using the [`viewToDom`](#function-viewToDom) method. Additionally, this method adds block [filler](module_engine_view_filler.md) to the list of children, if needed.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L579)

#### Parameters

* `viewElement: ViewElement | ViewDocumentFragment`

  Parent view element.

* `options: object`

  See [`viewToDom`](#function-viewToDom) options parameter.

  Properties

  * `options.bind?: boolean`
  * `options.withChildren?: boolean`

  Defaults to `{}`

#### Returns

* `IterableIterator<Node>`

  DOM nodes.

<a id="function-viewPositionToDom">

### `viewPositionToDom( viewPosition ) → object | null`

Converts view [`ViewPosition`](module_engine_view_position-ViewPosition.md) to DOM parent and offset.

Inline and block [fillers](module_engine_view_filler.md) are handled during the conversion. If the converted position is directly before inline filler it is moved inside the filler.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L658)

#### Parameters

* `viewPosition: ViewPosition`

  View position.

#### Returns

* `object | null`

  DOM position or `null` if view position could not be converted to DOM. DOM position has two properties:

  * `parent` - DOM position parent.
  * `offset` - DOM position offset.

<a id="function-viewRangeToDom">

### `viewRangeToDom( viewRange ) → Range`

Converts view [`ViewRange`](module_engine_view_range-ViewRange.md) to DOM range. Inline and block [fillers](module_engine_view_filler.md) are handled during the conversion.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L635)

#### Parameters

* `viewRange: ViewRange`

  View range.

#### Returns

* `Range`

  DOM range.

<a id="function-viewToDom">

### `viewToDom( viewNode, options? = { options.bind?, options.withChildren? } ) → HTMLElement`

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L386)

#### Parameters

* `viewNode: ViewElement`

* `options?: object`

  Properties

  * `options.bind?: boolean`
  * `options.withChildren?: boolean`

#### Returns

* `HTMLElement`

<a id="function-viewToDom">

### `viewToDom( viewNode, options? = { options.bind?, options.withChildren? } ) → DocumentFragment`

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L396)

#### Parameters

* `viewNode: ViewDocumentFragment`

* `options?: object`

  Properties

  * `options.bind?: boolean`
  * `options.withChildren?: boolean`

#### Returns

* `DocumentFragment`

<a id="function-viewToDom">

### `viewToDom( viewNode, options? = { options.bind?, options.withChildren? } ) → Node`

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L391)

#### Parameters

* `viewNode: ViewNode`

* `options?: object`

  Properties

  * `options.bind?: boolean`
  * `options.withChildren?: boolean`

#### Returns

* `Node`

<a id="function-viewToDom">

### `viewToDom( viewNode, options? = { options.bind?, options.withChildren? } ) → Text`

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L381)

#### Parameters

* `viewNode: ViewText`

* `options?: object`

  Properties

  * `options.bind?: boolean`
  * `options.withChildren?: boolean`

#### Returns

* `Text`

<a id="function-_clearDomSelection">

### `_clearDomSelection() → void` _(internal)_

Remove DOM selection from blurred editable, so it won't interfere with clicking on dropdowns (especially on iOS).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1194)

#### Returns

* `void`

<a id="function-_clearTemporaryCustomProperties">

### `_clearTemporaryCustomProperties() → void` _(internal)_

Clear temporary custom properties.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1366)

#### Returns

* `void`

<a id="function-_createReplacementDomElement">

### `_createReplacementDomElement( elementName, originalDomElement? ) → HTMLElement` _(private)_

Return a element with a special attribute holding the name of the original element. Optionally, copy all the attributes of the original element if that element is provided.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1897)

#### Parameters

* `elementName: string`

  The name of view element.

* `originalDomElement?: HTMLElement`

  The original DOM element to copy attributes and content from.

#### Returns

* `HTMLElement`

<a id="function-_createViewElement">

### `_createViewElement( node, options = { options.keepOriginalCase? } ) → ViewElement` _(private)_

Creates view element basing on the node type.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1859)

#### Parameters

* `node: Node`

  DOM node to check.

* `options: object`

  Conversion options. See [`domToView`](#function-domToView) options parameter.

  Properties

  * `options.keepOriginalCase?: boolean`

#### Returns

* `ViewElement`

<a id="function-_domToView">

### `_domToView( domNode, options = { options.bind?, options.keepOriginalCase?, options.skipComments?, options.withChildren? }, inlineNodes ) → IterableIterator<ViewNode | ViewDocumentFragment | null>` _(private)_

Internal generator for [`domToView`](#function-domToView). Also used by [`domChildrenToView`](#function-domChildrenToView). Separates DOM nodes conversion from whitespaces processing.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1427)

#### Parameters

* `domNode: Node`

  DOM node or document fragment to transform.

* `options: object`

  Properties

  * `options.bind?: boolean`
  * `options.keepOriginalCase?: boolean`
  * `options.skipComments?: boolean`
  * `options.withChildren?: boolean`

* `inlineNodes: Array<ViewNode>`

  An array of recently encountered inline nodes truncated to the block element boundaries. Used later to process whitespaces.

#### Returns

* `IterableIterator<ViewNode | ViewDocumentFragment | null>`

<a id="function-_getBlockFiller">

### `_getBlockFiller() → Node` _(private)_

Returns the block [filler](module_engine_view_filler.md) node based on the current [`blockFillerMode`](#member-blockFillerMode) setting.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1377)

#### Returns

* `Node`

<a id="function-_getTouchingInlineViewNode">

### `_getTouchingInlineViewNode( node, getNext ) → ViewElement | ViewTextProxy | null` _(private)_

Helper function. For given [view text node](module_engine_view_text-ViewText.md), it finds previous or next sibling that is contained in the same container element. If there is no such sibling, `null` is returned.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1791)

#### Parameters

* `node: ViewText`

  Reference node.

* `getNext: boolean`

#### Returns

* `ViewElement | ViewTextProxy | null`

  Touching text node, an inline object or `null` if there is no next or previous touching text node.

<a id="function-_isBlockDomElement">

### `_isBlockDomElement( node ) → boolean` _(private)_

Returns `true` if a DOM node belongs to [`blockElements`](#member-blockElements). `false` otherwise.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1829)

#### Parameters

* `node: Node`

#### Returns

* `boolean`

<a id="function-_isBlockViewElement">

### `_isBlockViewElement( node ) → boolean` _(private)_

Returns `true` if a view node belongs to [`blockElements`](#member-blockElements). `false` otherwise.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1836)

#### Parameters

* `node: ViewNode`

#### Returns

* `boolean`

<a id="function-_isDomSelectionPositionCorrect">

### `_isDomSelectionPositionCorrect( domParent, offset ) → boolean` _(private)_

Checks if the given DOM position is a correct place for selection boundary. See [`isDomSelectionCorrect`](#function-isDomSelectionCorrect).

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1395)

#### Parameters

* `domParent: Node`

  Position parent.

* `offset: number`

  Position offset.

#### Returns

* `boolean`

  `true` if given position is at a correct place for selection boundary, `false` otherwise.

<a id="function-_isInlineObjectElement">

### `_isInlineObjectElement( node ) → node is ViewElement` _(private)_

Returns `true` if a DOM node belongs to [`inlineObjectElements`](#member-inlineObjectElements). `false` otherwise.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1843)

#### Parameters

* `node: ViewNode | ViewDocumentFragment | ViewTextProxy`

#### Returns

* `node is ViewElement`

<a id="function-_isPreFormatted">

### `_isPreFormatted( node ) → boolean` _(private)_

Checks whether given text contains preformatted white space. This is the case if

* any of node ancestors has a name which is in `preElements` array, or
* the closest ancestor that has the `white-space` CSS property sets it to a value that preserves spaces

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1764)

#### Parameters

* `node: ViewText | ViewTextProxy`

  Node to check

#### Returns

* `boolean`

  `true` if given node contains preformatted white space, `false` otherwise.

<a id="function-_isViewElementWithRawContent">

### `_isViewElementWithRawContent( viewElement, options = { options.withChildren? } ) → boolean` _(private)_

Checks if view element's content should be treated as a raw data.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1875)

#### Parameters

* `viewElement: ViewElement | ViewDocumentFragment`

  View element to check.

* `options: object`

  Conversion options. See [`domToView`](#function-domToView) options parameter.

  Properties

  * `options.withChildren?: boolean`

#### Returns

* `boolean`

<a id="function-_nodeEndsWithSpace">

### `_nodeEndsWithSpace( node ) → boolean` _(private)_

Checks whether given node ends with a space character after changing appropriate space characters to `&nbsp;`s.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1746)

#### Parameters

* `node: ViewTextProxy`

  Node to check.

#### Returns

* `boolean`

  `true` if given `node` ends with space, `false` otherwise.

<a id="function-_processDataFromViewText">

### `_processDataFromViewText( node ) → string` _(private)_

Takes text data from a given [`data`](module_engine_view_text-ViewText.md#member-data) and processes it so it is correctly displayed in the DOM.

Following changes are done:

* a space at the beginning is changed to `&nbsp;` if this is the first text node in its container element or if a previous text node ends with a space character,
* space at the end of the text node is changed to `&nbsp;` if there are two spaces at the end of a node or if next node starts with a space or if it is the last text node in its container,
* remaining spaces are replaced to a chain of spaces and `&nbsp;` (e.g. `'x x'` becomes `'x &nbsp; x'`).

Content of [`preElements`](#member-preElements) is not processed.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1699)

#### Parameters

* `node: ViewText | ViewTextProxy`

  View text node to process.

#### Returns

* `string`

  Processed text data.

<a id="function-_processDomInlineNodes">

### `_processDomInlineNodes( domParent, inlineNodes, options = { options.withChildren? } ) → void` _(private)_

Internal helper that walks the list of inline view nodes already generated from DOM nodes and handles whitespaces and NBSPs.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1559)

#### Parameters

* `domParent: HTMLElement | null`

  The DOM parent of the given inline nodes. This should be a document fragment or a block element to whitespace processing start cleaning.

* `inlineNodes: Array<ViewNode>`

  An array of recently encountered inline nodes truncated to the block element boundaries.

* `options: object`

  Properties

  * `options.withChildren?: boolean`

#### Returns

* `void`

<a id="function-_shouldRenameElement">

### `_shouldRenameElement( elementName ) → boolean` _(private)_

Checks whether a given element name should be renamed in a current rendering mode.

[See source](https://github.com/ckeditor/ckeditor5/blob/master/packages/ckeditor5-engine/src/view/domconverter.ts#L1884)

#### Parameters

* `elementName: string`

  The name of view element.

#### Returns

* `boolean`

---

Full index of the CKEditor 5 API reference: [llms.txt](llms.txt)