Class

Node (engine/view)

@ckeditor/ckeditor5-engine/src/view/node

class

Abstract view node class.

This is an abstract class. Its constructor should not be used directly. Use the DowncastWriter or UpcastWriter to create new instances of view nodes.

Filtering

Properties

  • document : Document

    readonly

    The document instance to which this node belongs.

  • index : Number | null

    readonly

    Index of the node in the parent element or null if the node has no parent.

    Accessing this property throws an error if this node's parent element does not contain it. This means that view tree got broken.

  • nextSibling : Node | null

    readonly

    Node's next sibling, or null if it is the last child.

  • parent : Element | DocumentFragment | null

    readonly

    Parent element. Null by default. Set by _insertChild.

  • previousSibling : Node | null

    readonly

    Node's previous sibling, or null if it is the first child.

  • root : Node | DocumentFragment

    readonly

    Top-most ancestor of the node. If the node has no parent it is the root itself.

Methods

  • constructor( document )

    protected

    Creates a tree view node.

    Parameters

    document : Document

    The document instance to which this node belongs.

  • getAncestors( options = { [options.includeSelf], [options.parentFirst] } ) → Array

    Returns ancestors array of this node.

    Parameters

    options : Object

    Options object.

    Properties
    [ options.includeSelf ] : Boolean

    When set to true this node will be also included in parent's array.

    Defaults to false

    [ options.parentFirst ] : Boolean

    When set to true, array will be sorted from node's parent to root element, otherwise root element will be the first item in the array.

    Defaults to false

    Returns

    Array

    Array with ancestors.

  • getCommonAncestor( node, options = { [options.includeSelf] } ) → Element | DocumentFragment | null

    Returns a Element or DocumentFragment which is a common ancestor of both nodes.

    Parameters

    node : Node

    The second node.

    options : Object

    Options object.

    Properties
    [ options.includeSelf ] : Boolean

    When set to true both nodes will be considered "ancestors" too. Which means that if e.g. node A is inside B, then their common ancestor will be B.

    Defaults to false

    Returns

    Element | DocumentFragment | null
  • getPath() → Array.<Number>

    Gets a path to the node. The path is an array containing indices of consecutive ancestors of this node, beginning from root, down to this node's index.

    const abc = downcastWriter.createText( 'abc' );
    const foo = downcastWriter.createText( 'foo' );
    const h1 = downcastWriter.createElement( 'h1', null, downcastWriter.createText( 'header' ) );
    const p = downcastWriter.createElement( 'p', null, [ abc, foo ] );
    const div = downcastWriter.createElement( 'div', null, [ h1, p ] );
    foo.getPath(); // Returns [ 1, 3 ]. `foo` is in `p` which is in `div`. `p` starts at offset 1, while `foo` at 3.
    h1.getPath(); // Returns [ 0 ].
    div.getPath(); // Returns [].

    Returns

    Array.<Number>

    The path.

  • is( type ) → Boolean

    Checks whether this object is of the given type.

    This method is useful when processing view objects that are of unknown type. For example, a function may return a DocumentFragment or a Node that can be either a text node or an element. This method can be used to check what kind of object is returned.

    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:

    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:

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

    The list of view objects which implement the is() method:

    Parameters

    type : String

    Type to check.

    Returns

    Boolean
  • isAfter( node ) → Boolean

    Returns whether this node is after given node. false is returned if nodes are in different trees (for example, in different DocumentFragments).

    Parameters

    node : Node

    Node to compare with.

    Returns

    Boolean
  • isAttached() → Boolean

    Returns true if the node is in a tree rooted in the document (is a descendant of one of its roots).

    Returns

    Boolean
  • isBefore( node ) → Boolean

    Returns whether this node is before given node. false is returned if nodes are in different trees (for example, in different DocumentFragments).

    Parameters

    node : Node

    Node to compare with.

    Returns

    Boolean
  • isSimilar() → Boolean

    Checks if provided node is similar to this node.

    Returns

    Boolean

    True if nodes are similar.

  • toJSON() → Object

    Custom toJSON method to solve child-parent circular dependencies.

    Returns

    Object

    Clone of this object with the parent property removed.

  • _clone() → Node

    protected

    Clones this node.

    Returns

    Node

    Clone of this node.

  • _fireChange( type, node )

    protected

    Parameters

    type : ChangeType

    Type of the change.

    node : Node

    Changed node.

    Fires

  • _remove()

    protected

    Removes node from parent.

Events

  • change( eventInfo )

    Parameters

    eventInfo : EventInfo

    An object containing information about the fired event.

  • change:attributes( eventInfo, changedNode )

    Fired when list of elements attributes changes.

    Change event is bubbled – it is fired on all ancestors.

    Parameters

    eventInfo : EventInfo

    An object containing information about the fired event.

    changedNode : Node
  • change:children( eventInfo, changedNode )

    Fired when list of elements children changes.

    Change event is bubbled – it is fired on all ancestors.

    Parameters

    eventInfo : EventInfo

    An object containing information about the fired event.

    changedNode : Node
  • change:text( eventInfo, changedNode )

    Fired when text nodes data changes.

    Change event is bubbled – it is fired on all ancestors.

    Parameters

    eventInfo : EventInfo

    An object containing information about the fired event.

    changedNode : Node