# ViewRange

class

Range in the view tree. A range is represented by its start and end [positions](module_engine_view_position-ViewPosition.md).

In order to create a new position instance use the `createPosition*()` factory methods available in:

* [`EditingView`](module_engine_view_view-EditingView.md)
* [`ViewDowncastWriter`](module_engine_view_downcastwriter-ViewDowncastWriter.md)
* [`ViewUpcastWriter`](module_engine_view_upcastwriter-ViewUpcastWriter.md)

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

<a id="properties">

## Properties

<a id="member-end">

### `end: ViewPosition` _(readonly)_

End position.

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

<a id="member-isCollapsed">

### `isCollapsed: boolean` _(readonly)_

Returns whether the range is collapsed, that is it start and end positions are equal.

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

<a id="member-isFlat">

### `isFlat: boolean` _(readonly)_

Returns whether this range is flat, that is if [start](#member-start) position and [end](#member-end) position are in the same [parent](module_engine_view_position-ViewPosition.md#member-parent).

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

<a id="member-root">

### `root: ViewNode | ViewDocumentFragment` _(readonly)_

Range root element.

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

<a id="member-start">

### `start: ViewPosition` _(readonly)_

Start position.

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

<a id="methods">

## Methods

<a id="function-constructor">

### `constructor( start, end )`

Creates a range spanning from `start` position to `end` position.

**Note:** Constructor creates it's own [`ViewPosition`](module_engine_view_position-ViewPosition.md) instances basing on passed values.

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

#### Parameters

* `start: ViewPosition`

  Start position.

* `end: ViewPosition | null`

  End position. If not set, range will be collapsed at the `start` position.

  Defaults to `null`

<a id="function-Symbol.iterator">

### `Symbol.iterator() → IterableIterator<ViewTreeWalkerValue>`

Iterable interface.

Iterates over all [view items](module_engine_view_item-ViewItem.md) that are in this range and returns them together with additional information like length or [positions](module_engine_view_position-ViewPosition.md), grouped as [`ViewTreeWalkerValue`](module_engine_view_treewalker-ViewTreeWalkerValue.md).

This iterator uses [TreeWalker](module_engine_view_treewalker-ViewTreeWalker.md) with `boundaries` set to this range and `ignoreElementEnd` option set to `true`.

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

#### Returns

* `IterableIterator<ViewTreeWalkerValue>`

<a id="function-clone">

### `clone() → ViewRange`

Clones this range.

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

#### Returns

* `ViewRange`

<a id="function-containsPosition">

### `containsPosition( position ) → boolean`

Checks whether this range contains given [position](module_engine_view_position-ViewPosition.md).

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

#### Parameters

* `position: ViewPosition`

  Position to check.

#### Returns

* `boolean`

  `true` if given [position](module_engine_view_position-ViewPosition.md) is contained in this range, `false` otherwise.

<a id="function-containsRange">

### `containsRange( otherRange, loose ) → boolean`

Checks whether this range contains given [range](module_engine_view_range-ViewRange.md).

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

#### Parameters

* `otherRange: ViewRange`

  Range to check.

* `loose: boolean`

  Whether the check is loose or strict. If the check is strict (`false`), compared range cannot start or end at the same position as this range boundaries. If the check is loose (`true`), compared range can start, end or even be equal to this range. Note that collapsed ranges are always compared in strict mode.

  Defaults to `false`

#### Returns

* `boolean`

  `true` if given [range](module_engine_view_range-ViewRange.md) boundaries are contained by this range, `false` otherwise.

<a id="function-getCommonAncestor">

### `getCommonAncestor() → ViewNode | ViewDocumentFragment | null`

Returns a [`ViewNode`](module_engine_view_node-ViewNode.md) or [`ViewDocumentFragment`](module_engine_view_documentfragment-ViewDocumentFragment.md) which is a common ancestor of range's both ends (in which the entire range is contained).

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

#### Returns

* `ViewNode | ViewDocumentFragment | null`

<a id="function-getContainedElement">

### `getContainedElement() → ViewElement | null`

Returns an [Element](module_engine_view_element-ViewElement.md) contained by the range. The element will be returned when it is the **only** node within the range and **fully–contained** at the same time.

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

#### Returns

* `ViewElement | null`

<a id="function-getDifference">

### `getDifference( otherRange ) → Array<ViewRange>`

Computes which part(s) of this [range](module_engine_view_range-ViewRange.md) is not a part of given [range](module_engine_view_range-ViewRange.md). Returned array contains zero, one or two [ranges](module_engine_view_range-ViewRange.md).

Examples:

```typescript
let foo = downcastWriter.createText( 'foo' );
let img = downcastWriter.createContainerElement( 'img' );
let bar = downcastWriter.createText( 'bar' );
let p = downcastWriter.createContainerElement( 'p', null, [ foo, img, bar ] );

let range = view.createRange( view.createPositionAt( foo, 2 ), view.createPositionAt( bar, 1 ); // "o", img, "b" are in range.
let otherRange = view.createRange( // "oo", img, "ba" are in range.
	view.createPositionAt( foo, 1 ),
	view.createPositionAt( bar, 2 )
);
let transformed = range.getDifference( otherRange );
// transformed array has no ranges because `otherRange` contains `range`

otherRange = view.createRange( view.createPositionAt( foo, 1 ), view.createPositionAt( p, 2 ); // "oo", img are in range.
transformed = range.getDifference( otherRange );
// transformed array has one range: from ( p, 2 ) to ( bar, 1 )

otherRange = view.createRange( view.createPositionAt( p, 1 ), view.createPositionAt( p, 2 ) ); // img is in range.
transformed = range.getDifference( otherRange );
// transformed array has two ranges: from ( foo, 1 ) to ( p, 1 ) and from ( p, 2 ) to ( bar, 1 )
```

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

#### Parameters

* `otherRange: ViewRange`

  Range to differentiate against.

#### Returns

* `Array<ViewRange>`

  The difference between ranges.

<a id="function-getEnlarged">

### `getEnlarged() → ViewRange`

Creates a maximal range that has the same content as this range but is expanded in both ways (at the beginning and at the end).

For example:

```html
<p>Foo</p><p><b>{Bar}</b></p> -> <p>Foo</p>[<p><b>Bar</b>]</p>
<p><b>foo</b>{bar}<span></span></p> -> <p><b>foo[</b>bar<span></span>]</p>
```

Note that in the sample above:

* `<p>` have type of [`ViewContainerElement`](module_engine_view_containerelement-ViewContainerElement.md),
* `<b>` have type of [`ViewAttributeElement`](module_engine_view_attributeelement-ViewAttributeElement.md),
* `<span>` have type of [`ViewUIElement`](module_engine_view_uielement-ViewUIElement.md).

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

#### Returns

* `ViewRange`

  Enlarged range.

<a id="function-getIntersection">

### `getIntersection( otherRange ) → ViewRange | null`

Returns an intersection of this [range](module_engine_view_range-ViewRange.md) and given [range](module_engine_view_range-ViewRange.md). Intersection is a common part of both of those ranges. If ranges has no common part, returns `null`.

Examples:

```typescript
let foo = downcastWriter.createText( 'foo' );
let img = downcastWriter.createContainerElement( 'img' );
let bar = downcastWriter.createText( 'bar' );
let p = downcastWriter.createContainerElement( 'p', null, [ foo, img, bar ] );

let range = view.createRange( view.createPositionAt( foo, 2 ), view.createPositionAt( bar, 1 ); // "o", img, "b" are in range.
let otherRange = view.createRange( view.createPositionAt( foo, 1 ), view.createPositionAt( p, 2 ); // "oo", img are in range.
let transformed = range.getIntersection( otherRange ); // range from ( foo, 1 ) to ( p, 2 ).

otherRange = view.createRange( view.createPositionAt( bar, 1 ), view.createPositionAt( bar, 3 ); "ar" is in range.
transformed = range.getIntersection( otherRange ); // null - no common part.
```

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

#### Parameters

* `otherRange: ViewRange`

  Range to check for intersection.

#### Returns

* `ViewRange | null`

  A common part of given ranges or `null` if ranges have no common part.

<a id="function-getItems">

### `getItems( options ) → IterableIterator<ViewItem>`

Returns an iterator that iterates over all [view items](module_engine_view_item-ViewItem.md) that are in this range and returns them.

This method uses [`ViewTreeWalker`](module_engine_view_treewalker-ViewTreeWalker.md) with `boundaries` set to this range and `ignoreElementEnd` option set to `true`. However it returns only [items](module_engine_view_item-ViewItem.md), not [`ViewTreeWalkerValue`](module_engine_view_treewalker-ViewTreeWalkerValue.md).

You may specify additional options for the tree walker. See [`ViewTreeWalker`](module_engine_view_treewalker-ViewTreeWalker.md) for a full list of available options.

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

#### Parameters

* `options: ViewTreeWalkerOptions`

  Object with configuration options. See [`ViewTreeWalker`](module_engine_view_treewalker-ViewTreeWalker.md).

  Defaults to `{}`

#### Returns

* `IterableIterator<ViewItem>`

<a id="function-getPositions">

### `getPositions( options ) → IterableIterator<ViewPosition>`

Returns an iterator that iterates over all [positions](module_engine_view_position-ViewPosition.md) that are boundaries or contained in this range.

This method uses [`ViewTreeWalker`](module_engine_view_treewalker-ViewTreeWalker.md) with `boundaries` set to this range. However it returns only [positions](module_engine_view_position-ViewPosition.md), not [`ViewTreeWalkerValue`](module_engine_view_treewalker-ViewTreeWalkerValue.md).

You may specify additional options for the tree walker. See [`ViewTreeWalker`](module_engine_view_treewalker-ViewTreeWalker.md) for a full list of available options.

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

#### Parameters

* `options: ViewTreeWalkerOptions`

  Object with configuration options. See [`ViewTreeWalker`](module_engine_view_treewalker-ViewTreeWalker.md).

  Defaults to `{}`

#### Returns

* `IterableIterator<ViewPosition>`

<a id="function-getTrimmed">

### `getTrimmed() → ViewRange`

Creates a minimum range that has the same content as this range but is trimmed in both ways (at the beginning and at the end).

For example:

```html
<p>Foo</p>[<p><b>Bar</b>]</p> -> <p>Foo</p><p><b>{Bar}</b></p>
<p><b>foo[</b>bar<span></span>]</p> -> <p><b>foo</b>{bar}<span></span></p>
```

Note that in the sample above:

* `<p>` have type of [`ViewContainerElement`](module_engine_view_containerelement-ViewContainerElement.md),
* `<b>` have type of [`ViewAttributeElement`](module_engine_view_attributeelement-ViewAttributeElement.md),
* `<span>` have type of [`ViewUIElement`](module_engine_view_uielement-ViewUIElement.md).

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

#### Returns

* `ViewRange`

  Shrunk range.

<a id="function-getWalker">

### `getWalker( options ) → ViewTreeWalker`

Creates a [TreeWalker](module_engine_view_treewalker-ViewTreeWalker.md) instance with this range as a boundary.

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

#### Parameters

* `options: ViewTreeWalkerOptions`

  Object with configuration options. See [`ViewTreeWalker`](module_engine_view_treewalker-ViewTreeWalker.md).

  Defaults to `{}`

#### Returns

* `ViewTreeWalker`

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

### `is( type ) → this is ViewElement | ViewAttributeElement | ViewContainerElement | ViewEditableElement | ViewEmptyElement | ViewRawElement | ViewRootEditableElement | ViewUIElement` _(inherited)_

Checks whether this object is of type [`ViewElement`](module_engine_view_element-ViewElement.md) or its subclass.

```typescript
element.is( 'element' ); // -> true
element.is( 'node' ); // -> true
element.is( 'view:element' ); // -> true
element.is( 'view:node' ); // -> true

element.is( 'model:element' ); // -> false
element.is( 'documentSelection' ); // -> false
```

Assuming that the object being checked is an element, you can also check its [name](module_engine_view_element-ViewElement.md#member-name):

```typescript
element.is( 'element', 'img' ); // -> true if this is an <img> element
text.is( 'element', 'img' ); -> false
```

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

#### Parameters

* `type: 'element' | 'view:element'`

#### Returns

* `this is ViewElement | ViewAttributeElement | ViewContainerElement | ViewEditableElement | ViewEmptyElement | ViewRawElement | ViewRootEditableElement | ViewUIElement`

<a id="function-is:CONTAINER_ELEMENT">

### `is( type ) → this is ViewContainerElement | ViewEditableElement | ViewRootEditableElement` _(inherited)_

Checks whether this object is of type [`ViewContainerElement`](module_engine_view_containerelement-ViewContainerElement.md) or its subclass.

```typescript
containerElement.is( 'containerElement' ); // -> true
containerElement.is( 'element' ); // -> true
containerElement.is( 'node' ); // -> true
containerElement.is( 'view:containerElement' ); // -> true
containerElement.is( 'view:element' ); // -> true
containerElement.is( 'view:node' ); // -> true

containerElement.is( 'model:element' ); // -> false
containerElement.is( 'documentFragment' ); // -> false
```

Assuming that the object being checked is a container element, you can also check its [name](module_engine_view_containerelement-ViewContainerElement.md#member-name):

```typescript
containerElement.is( 'element', 'div' ); // -> true if this is a div container element
containerElement.is( 'contaienrElement', 'div' ); // -> same as above
text.is( 'element', 'div' ); -> false
```

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

#### Parameters

* `type: 'containerElement' | 'view:containerElement'`

#### Returns

* `this is ViewContainerElement | ViewEditableElement | ViewRootEditableElement`

<a id="function-is:EDITABLE_ELEMENT">

### `is( type ) → this is ViewEditableElement | ViewRootEditableElement` _(inherited)_

Checks whether this object is of type [`ViewEditableElement`](module_engine_view_editableelement-ViewEditableElement.md) or its subclass.

```typescript
editableElement.is( 'editableElement' ); // -> true
editableElement.is( 'element' ); // -> true
editableElement.is( 'node' ); // -> true
editableElement.is( 'view:editableElement' ); // -> true
editableElement.is( 'view:element' ); // -> true
editableElement.is( 'view:node' ); // -> true

editableElement.is( 'model:element' ); // -> false
editableElement.is( 'documentFragment' ); // -> false
```

Assuming that the object being checked is an editbale element, you can also check its [name](module_engine_view_editableelement-ViewEditableElement.md#member-name):

```typescript
editableElement.is( 'element', 'div' ); // -> true if this is a div element
editableElement.is( 'editableElement', 'div' ); // -> same as above
text.is( 'element', 'div' ); -> false
```

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

#### Parameters

* `type: 'editableElement' | 'view:editableElement'`

#### Returns

* `this is ViewEditableElement | ViewRootEditableElement`

<a id="function-is:ATTRIBUTE_ELEMENT">

### `is( type ) → this is ViewAttributeElement` _(inherited)_

Checks whether this object is of type [`ViewAttributeElement`](module_engine_view_attributeelement-ViewAttributeElement.md).

```typescript
attributeElement.is( 'attributeElement' ); // -> true
attributeElement.is( 'element' ); // -> true
attributeElement.is( 'node' ); // -> true
attributeElement.is( 'view:attributeElement' ); // -> true
attributeElement.is( 'view:element' ); // -> true
attributeElement.is( 'view:node' ); // -> true

attributeElement.is( 'model:element' ); // -> false
attributeElement.is( 'documentFragment' ); // -> false
```

Assuming that the object being checked is an attribute element, you can also check its [name](module_engine_view_attributeelement-ViewAttributeElement.md#member-name):

```typescript
attributeElement.is( 'element', 'b' ); // -> true if this is a bold element
attributeElement.is( 'attributeElement', 'b' ); // -> same as above
text.is( 'element', 'b' ); -> false
```

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

#### Parameters

* `type: 'attributeElement' | 'view:attributeElement'`

#### Returns

* `this is ViewAttributeElement`

<a id="function-is:ROOT_ELEMENT">

### `is( type ) → this is ViewRootEditableElement` _(inherited)_

Checks whether this object is of type [`ViewRootEditableElement`](module_engine_view_rooteditableelement-ViewRootEditableElement.md).

```typescript
rootEditableElement.is( 'rootElement' ); // -> true
rootEditableElement.is( 'editableElement' ); // -> true
rootEditableElement.is( 'element' ); // -> true
rootEditableElement.is( 'node' ); // -> true
rootEditableElement.is( 'view:editableElement' ); // -> true
rootEditableElement.is( 'view:element' ); // -> true
rootEditableElement.is( 'view:node' ); // -> true

rootEditableElement.is( 'model:element' ); // -> false
rootEditableElement.is( 'documentFragment' ); // -> false
```

Assuming that the object being checked is a root editable element, you can also check its [name](module_engine_view_rooteditableelement-ViewRootEditableElement.md#member-name):

```typescript
rootEditableElement.is( 'element', 'div' ); // -> true if this is a div root editable element
rootEditableElement.is( 'rootElement', 'div' ); // -> same as above
text.is( 'element', 'div' ); -> false
```

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

#### Parameters

* `type: 'rootElement' | 'view:rootElement'`

#### Returns

* `this is ViewRootEditableElement`

<a id="function-is:TEXT_PROXY">

### `is( type ) → this is ViewTextProxy` _(inherited)_

Checks whether this object is of type [`ViewTextProxy`](module_engine_view_textproxy-ViewTextProxy.md).

```typescript
textProxy.is( '$textProxy' ); // -> true
textProxy.is( 'view:$textProxy' ); // -> true

textProxy.is( 'model:$textProxy' ); // -> false
textProxy.is( 'element' ); // -> false
textProxy.is( 'range' ); // -> false
```

**Note:** Until version 20.0.0 this method wasn't accepting `'$textProxy'` type. The legacy `'textProxy'` type is still accepted for backward compatibility.

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

#### Parameters

* `type: '$textProxy' | 'view:$textProxy'`

#### Returns

* `this is ViewTextProxy`

<a id="function-is:POSITION">

### `is( type ) → this is ViewPosition` _(inherited)_

Checks whether this object is of type [`ViewPosition`](module_engine_view_position-ViewPosition.md).

```typescript
position.is( 'position' ); // -> true
position.is( 'view:position' ); // -> true

position.is( 'model:position' ); // -> false
position.is( 'element' ); // -> false
position.is( 'range' ); // -> false
```

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

#### Parameters

* `type: 'position' | 'view:position'`

#### Returns

* `this is ViewPosition`

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

### `is( type ) → this is ViewDocumentFragment` _(inherited)_

hecks whether this object is of type [`ViewDocumentFragment`](module_engine_view_documentfragment-ViewDocumentFragment.md).

```typescript
docFrag.is( 'documentFragment' ); // -> true
docFrag.is( 'view:documentFragment' ); // -> true

docFrag.is( 'model:documentFragment' ); // -> false
docFrag.is( 'element' ); // -> false
docFrag.is( 'node' ); // -> false
```

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

#### Parameters

* `type: 'documentFragment' | 'view:documentFragment'`

#### Returns

* `this is ViewDocumentFragment`

<a id="function-is:TEXT">

### `is( type ) → this is ViewText` _(inherited)_

Checks whether this object is of type [`ViewText`](module_engine_view_text-ViewText.md).

```typescript
text.is( '$text' ); // -> true
text.is( 'node' ); // -> true
text.is( 'view:$text' ); // -> true
text.is( 'view:node' ); // -> true

text.is( 'model:$text' ); // -> false
text.is( 'element' ); // -> false
text.is( 'range' ); // -> false
```

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

#### Parameters

* `type: '$text' | 'view:$text'`

#### Returns

* `this is ViewText`

<a id="function-is:UI_ELEMENT">

### `is( type ) → this is ViewUIElement` _(inherited)_

Checks whether this object is of type [`ViewUIElement`](module_engine_view_uielement-ViewUIElement.md).

```typescript
uiElement.is( 'uiElement' ); // -> true
uiElement.is( 'element' ); // -> true
uiElement.is( 'node' ); // -> true
uiElement.is( 'view:uiElement' ); // -> true
uiElement.is( 'view:element' ); // -> true
uiElement.is( 'view:node' ); // -> true

uiElement.is( 'model:element' ); // -> false
uiElement.is( 'documentFragment' ); // -> false
```

Assuming that the object being checked is an ui element, you can also check its [name](module_engine_view_uielement-ViewUIElement.md#member-name):

```typescript
uiElement.is( 'element', 'span' ); // -> true if this is a span ui element
uiElement.is( 'uiElement', 'span' ); // -> same as above
text.is( 'element', 'span' ); -> false
```

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

#### Parameters

* `type: 'uiElement' | 'view:uiElement'`

#### Returns

* `this is ViewUIElement`

<a id="function-is:RAW_ELEMENT">

### `is( type ) → this is ViewRawElement` _(inherited)_

Checks whether this object is of type [`ViewRawElement`](module_engine_view_rawelement-ViewRawElement.md).

```typescript
rawElement.is( 'rawElement' ); // -> true
rawElement.is( 'element' ); // -> true
rawElement.is( 'node' ); // -> true
rawElement.is( 'view:rawElement' ); // -> true
rawElement.is( 'view:element' ); // -> true
rawElement.is( 'view:node' ); // -> true

rawElement.is( 'model:element' ); // -> false
rawElement.is( 'documentFragment' ); // -> false
```

Assuming that the object being checked is a raw element, you can also check its [name](module_engine_view_rawelement-ViewRawElement.md#member-name):

```typescript
rawElement.is( 'img' ); // -> true if this is an img element
rawElement.is( 'rawElement', 'img' ); // -> same as above
text.is( 'img' ); -> false
```

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

#### Parameters

* `type: 'rawElement' | 'view:rawElement'`

#### Returns

* `this is ViewRawElement`

<a id="function-is:EMPTY_ELEMENT">

### `is( type ) → this is ViewEmptyElement` _(inherited)_

Checks whether this object is of type [`ViewEmptyElement`](module_engine_view_emptyelement-ViewEmptyElement.md).

```typescript
emptyElement.is( 'emptyElement' ); // -> true
emptyElement.is( 'element' ); // -> true
emptyElement.is( 'node' ); // -> true
emptyElement.is( 'view:emptyElement' ); // -> true
emptyElement.is( 'view:element' ); // -> true
emptyElement.is( 'view:node' ); // -> true

emptyElement.is( 'model:element' ); // -> false
emptyElement.is( 'documentFragment' ); // -> false
```

Assuming that the object being checked is an empty element, you can also check its [name](module_engine_view_emptyelement-ViewEmptyElement.md#member-name):

```typescript
emptyElement.is( 'element', 'img' ); // -> true if this is a img element
emptyElement.is( 'emptyElement', 'img' ); // -> same as above
text.is( 'element', 'img' ); -> false
```

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

#### Parameters

* `type: 'emptyElement' | 'view:emptyElement'`

#### Returns

* `this is ViewEmptyElement`

<a id="function-is:RANGE">

### `is( type ) → this is ViewRange` _(inherited)_

Checks whether this object is of type [`ViewRange`](module_engine_view_range-ViewRange.md).

```typescript
range.is( 'range' ); // -> true
range.is( 'view:range' ); // -> true

range.is( 'model:range' ); // -> false
range.is( 'element' ); // -> false
range.is( 'selection' ); // -> false
```

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

#### Parameters

* `type: 'range' | 'view:range'`

#### Returns

* `this is ViewRange`

<a id="function-is:DOCUMENT_SELECTION">

### `is( type ) → this is ViewDocumentSelection` _(inherited)_

Checks whether this object is of type [`ViewDocumentSelection`](module_engine_view_documentselection-ViewDocumentSelection.md).

```typescript
`docSelection.is( 'selection' ); // -> true
docSelection.is( 'documentSelection' ); // -> true
docSelection.is( 'view:selection' ); // -> true
docSelection.is( 'view:documentSelection' ); // -> true

docSelection.is( 'model:documentSelection' ); // -> false
docSelection.is( 'element' ); // -> false
docSelection.is( 'node' ); // -> false
```

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

#### Parameters

* `type: 'documentSelection' | 'view:documentSelection'`

#### Returns

* `this is ViewDocumentSelection`

<a id="function-is:ATTRIBUTE_ELEMENT_NAME">

### `is( type, name ) → boolean` _(inherited)_

Checks whether the object is of type [`ViewAttributeElement`](module_engine_view_attributeelement-ViewAttributeElement.md) and has the specified `name`.

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

#### Type parameters

* `N: extends string`

#### Parameters

* `type: 'attributeElement' | 'view:attributeElement'`
* `name: N`

#### Returns

* `boolean`

<a id="function-is:EDITABLE_ELEMENT_NAME">

### `is( type, name ) → boolean` _(inherited)_

Checks whether the object is of type [`ViewEditableElement`](module_engine_view_editableelement-ViewEditableElement.md) or its subclass and has the specified `name`.

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

#### Type parameters

* `N: extends string`

#### Parameters

* `type: 'editableElement' | 'view:editableElement'`
* `name: N`

#### Returns

* `boolean`

<a id="function-is:RAW_ELEMENT_NAME">

### `is( type, name ) → boolean` _(inherited)_

Checks whether the object is of type [`ViewRawElement`](module_engine_view_rawelement-ViewRawElement.md) and has the specified `name`.

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

#### Type parameters

* `N: extends string`

#### Parameters

* `type: 'rawElement' | 'view:rawElement'`
* `name: N`

#### Returns

* `boolean`

<a id="function-is:UI_ELEMENT_NAME">

### `is( type, name ) → boolean` _(inherited)_

Checks whether the object is of type [`ViewUIElement`](module_engine_view_uielement-ViewUIElement.md) and has the specified `name`.

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

#### Type parameters

* `N: extends string`

#### Parameters

* `type: 'uiElement' | 'view:uiElement'`
* `name: N`

#### Returns

* `boolean`

<a id="function-is:ROOT_ELEMENT_NAME">

### `is( type, name ) → boolean` _(inherited)_

Checks whether the object is of type [`ViewRootEditableElement`](module_engine_view_rooteditableelement-ViewRootEditableElement.md) and has the specified `name`.

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

#### Type parameters

* `N: extends string`

#### Parameters

* `type: 'rootElement' | 'view:rootElement'`
* `name: N`

#### Returns

* `boolean`

<a id="function-is:EMPTY_ELEMENT_NAME">

### `is( type, name ) → boolean` _(inherited)_

Checks whether the object is of type [`ViewEmptyElement`](module_engine_view_emptyelement-ViewEmptyElement.md) has the specified `name`.

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

#### Type parameters

* `N: extends string`

#### Parameters

* `type: 'emptyElement' | 'view:emptyElement'`
* `name: N`

#### Returns

* `boolean`

<a id="function-is:CONTAINER_ELEMENT_NAME">

### `is( type, name ) → boolean` _(inherited)_

Checks whether the object is of type [`ViewContainerElement`](module_engine_view_containerelement-ViewContainerElement.md) or its subclass and has the specified `name`.

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

#### Type parameters

* `N: extends string`

#### Parameters

* `type: 'containerElement' | 'view:containerElement'`
* `name: N`

#### Returns

* `boolean`

<a id="function-is:ELEMENT_NAME">

### `is( type, name ) → boolean` _(inherited)_

Checks whether the object is of type [`ViewElement`](module_engine_view_element-ViewElement.md) or its subclass and has the specified `name`.

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

#### Type parameters

* `N: extends string`

#### Parameters

* `type: 'element' | 'view:element'`
* `name: N`

#### Returns

* `boolean`

<a id="function-is:SELECTION">

### `is( type ) → this is ViewSelection | ViewDocumentSelection` _(inherited)_

Checks whether this object is of type [`ViewSelection`](module_engine_view_selection-ViewSelection.md) or [`ViewDocumentSelection`](module_engine_view_documentselection-ViewDocumentSelection.md).

```typescript
selection.is( 'selection' ); // -> true
selection.is( 'view:selection' ); // -> true

selection.is( 'model:selection' ); // -> false
selection.is( 'element' ); // -> false
selection.is( 'range' ); // -> false
```

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

#### Parameters

* `type: 'selection' | 'view:selection'`

#### Returns

* `this is ViewSelection | ViewDocumentSelection`

<a id="function-is:NODE">

### `is( type ) → this is ViewText | ViewNode | ViewElement | ViewAttributeElement | ViewContainerElement | ViewEditableElement | ViewEmptyElement | ViewRawElement | ViewRootEditableElement | ViewUIElement` _(inherited)_

Checks whether this object is of type [`ViewNode`](module_engine_view_node-ViewNode.md) or its subclass.

This method is useful when processing view objects that are of unknown type. For example, a function may return a [`ViewDocumentFragment`](module_engine_view_documentfragment-ViewDocumentFragment.md) or a [`ViewNode`](module_engine_view_node-ViewNode.md) that can be either a text node or an element. This method can be used to check what kind of object is returned.

```typescript
someObject.is( 'element' ); // -> true if this is an element
someObject.is( 'node' ); // -> true if this is a node (a text node or an element)
someObject.is( 'documentFragment' ); // -> true if this is a document fragment
```

Since this method is also available on a range of model objects, you can prefix the type of the object with `model:` or `view:` to check, for example, if this is the model's or view's element:

```typescript
viewElement.is( 'view:element' ); // -> true
viewElement.is( 'model:element' ); // -> false
```

By using this method it is also possible to check a name of an element:

```typescript
imgElement.is( 'element', 'img' ); // -> true
imgElement.is( 'view:element', 'img' ); // -> same as above, but more precise
```

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

#### Parameters

* `type: 'node' | 'view:node'`

#### Returns

* `this is ViewText | ViewNode | ViewElement | ViewAttributeElement | ViewContainerElement | ViewEditableElement | ViewEmptyElement | ViewRawElement | ViewRootEditableElement | ViewUIElement`

<a id="function-isEqual">

### `isEqual( otherRange ) → boolean`

Two ranges are equal if their start and end positions are equal.

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

#### Parameters

* `otherRange: ViewRange`

  Range to compare with.

#### Returns

* `boolean`

  `true` if ranges are equal, `false` otherwise

<a id="function-isIntersecting">

### `isIntersecting( otherRange ) → boolean`

Checks and returns whether this range intersects with the given range.

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

#### Parameters

* `otherRange: ViewRange`

  Range to compare with.

#### Returns

* `boolean`

  True if ranges intersect.

<a id="function-toJSON">

### `toJSON() → unknown`

Converts `ViewRange` instance to plain object and returns it.

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

#### Returns

* `unknown`

  `ViewRange` instance converted to plain object.

#### Static methods

<a id="static-function-_createFromParentsAndOffsets">

### `_createFromParentsAndOffsets( startElement, startOffset, endElement, endOffset ) → ViewRange` _(internal)_

Creates a range from the given parents and offsets.

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

#### Parameters

* `startElement: ViewElement | ViewDocumentFragment`

  Start position parent element.

* `startOffset: number`

  Start position offset.

* `endElement: ViewElement | ViewDocumentFragment`

  End position parent element.

* `endOffset: number`

  End position offset.

#### Returns

* `ViewRange`

  Created range.

<a id="static-function-_createFromPositionAndShift">

### `_createFromPositionAndShift( position, shift ) → ViewRange` _(internal)_

Creates a new range, spreading from specified [position](module_engine_view_position-ViewPosition.md) to a position moved by given `shift`. If `shift` is a negative value, shifted position is treated as the beginning of the range.

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

#### Parameters

* `position: ViewPosition`

  Beginning of the range.

* `shift: number`

  How long the range should be.

#### Returns

* `ViewRange`

<a id="static-function-_createIn">

### `_createIn( element ) → ViewRange` _(internal)_

Creates a range inside an [element](module_engine_view_element-ViewElement.md) which starts before the first child of that element and ends after the last child of that element.

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

#### Parameters

* `element: ViewElement | ViewDocumentFragment`

  Element which is a parent for the range.

#### Returns

* `ViewRange`

<a id="static-function-_createOn">

### `_createOn( item ) → ViewRange` _(internal)_

Creates a range that starts before given [view item](module_engine_view_item-ViewItem.md) and ends after it.

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

#### Parameters

* `item: ViewItem`

#### Returns

* `ViewRange`

---

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