Interface DocumentFragment

    A minimal document object that has no parent. It is used as a lightweight version of Document that stores a segment of a document structure comprised of nodes just like a standard document. The key difference is that because the document fragment isn't part of the active document tree structure, changes made to the fragment don't affect the document, cause reflow, or incur any performance impact that can occur when changes are made.

    MDN Reference

    interface DocumentFragment {
        ATTRIBUTE_NODE: 2;
        baseURI: string;
        CDATA_SECTION_NODE: 4;
        childElementCount: number;
        childNodes: NodeListOf<ChildNode>;
        children: HTMLCollection;
        COMMENT_NODE: 8;
        DOCUMENT_FRAGMENT_NODE: 11;
        DOCUMENT_NODE: 9;
        DOCUMENT_POSITION_CONTAINED_BY: 16;
        DOCUMENT_POSITION_CONTAINS: 8;
        DOCUMENT_POSITION_DISCONNECTED: 1;
        DOCUMENT_POSITION_FOLLOWING: 4;
        DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
        DOCUMENT_POSITION_PRECEDING: 2;
        DOCUMENT_TYPE_NODE: 10;
        ELEMENT_NODE: 1;
        ENTITY_NODE: 6;
        ENTITY_REFERENCE_NODE: 5;
        firstChild: ChildNode;
        firstElementChild: Element;
        isConnected: boolean;
        lastChild: ChildNode;
        lastElementChild: Element;
        nextSibling: ChildNode;
        nodeName: string;
        nodeType: number;
        nodeValue: string;
        NOTATION_NODE: 12;
        ownerDocument: Document;
        parentElement: HTMLElement;
        parentNode: ParentNode;
        previousSibling: ChildNode;
        PROCESSING_INSTRUCTION_NODE: 7;
        TEXT_NODE: 3;
        textContent: string;
        addEventListener(
            type: string,
            callback: EventListenerOrEventListenerObject,
            options?: boolean | AddEventListenerOptions,
        ): void;
        append(...nodes: (string | Node)[]): void;
        appendChild<T extends Node>(node: T): T;
        cloneNode(deep?: boolean): Node;
        compareDocumentPosition(other: Node): number;
        contains(other: Node): boolean;
        dispatchEvent(event: Event): boolean;
        getElementById(elementId: string): HTMLElement;
        getRootNode(options?: GetRootNodeOptions): Node;
        hasChildNodes(): boolean;
        insertBefore<T extends Node>(node: T, child: Node): T;
        isDefaultNamespace(namespace: string): boolean;
        isEqualNode(otherNode: Node): boolean;
        isSameNode(otherNode: Node): boolean;
        lookupNamespaceURI(prefix: string): string;
        lookupPrefix(namespace: string): string;
        normalize(): void;
        prepend(...nodes: (string | Node)[]): void;
        querySelector<K extends keyof HTMLElementTagNameMap>(
            selectors: K,
        ): HTMLElementTagNameMap[K];
        querySelector<K extends keyof SVGElementTagNameMap>(
            selectors: K,
        ): SVGElementTagNameMap[K];
        querySelector<K extends keyof MathMLElementTagNameMap>(
            selectors: K,
        ): MathMLElementTagNameMap[K];
        querySelector<K extends keyof HTMLElementDeprecatedTagNameMap>(
            selectors: K,
        ): HTMLElementDeprecatedTagNameMap[K];
        querySelector<E extends Element = Element>(selectors: string): E;
        querySelectorAll<K extends keyof HTMLElementTagNameMap>(
            selectors: K,
        ): NodeListOf<HTMLElementTagNameMap[K]>;
        querySelectorAll<K extends keyof SVGElementTagNameMap>(
            selectors: K,
        ): NodeListOf<SVGElementTagNameMap[K]>;
        querySelectorAll<K extends keyof MathMLElementTagNameMap>(
            selectors: K,
        ): NodeListOf<MathMLElementTagNameMap[K]>;
        querySelectorAll<K extends keyof HTMLElementDeprecatedTagNameMap>(
            selectors: K,
        ): NodeListOf<HTMLElementDeprecatedTagNameMap[K]>;
        querySelectorAll<E extends Element = Element>(
            selectors: string,
        ): NodeListOf<E>;
        removeChild<T extends Node>(child: T): T;
        removeEventListener(
            type: string,
            callback: EventListenerOrEventListenerObject,
            options?: boolean | EventListenerOptions,
        ): void;
        replaceChild<T extends Node>(node: Node, child: T): T;
        replaceChildren(...nodes: (string | Node)[]): void;
    }
    Hierarchy

    Properties

    ATTRIBUTE_NODE baseURI CDATA_SECTION_NODE childElementCount childNodes children COMMENT_NODE DOCUMENT_FRAGMENT_NODE DOCUMENT_NODE DOCUMENT_POSITION_CONTAINED_BY DOCUMENT_POSITION_CONTAINS DOCUMENT_POSITION_DISCONNECTED DOCUMENT_POSITION_FOLLOWING DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC DOCUMENT_POSITION_PRECEDING DOCUMENT_TYPE_NODE ELEMENT_NODE ENTITY_NODE ENTITY_REFERENCE_NODE firstChild firstElementChild isConnected lastChild lastElementChild nextSibling nodeName nodeType nodeValue NOTATION_NODE ownerDocument parentElement parentNode previousSibling PROCESSING_INSTRUCTION_NODE TEXT_NODE textContent

    Methods

    addEventListener append appendChild cloneNode compareDocumentPosition contains dispatchEvent getElementById getRootNode hasChildNodes insertBefore isDefaultNamespace isEqualNode isSameNode lookupNamespaceURI lookupPrefix normalize prepend querySelector querySelectorAll removeChild removeEventListener replaceChild replaceChildren

    Properties

    ReadonlyATTRIBUTE_NODE

    ATTRIBUTE_NODE: 2

    ReadonlybaseURI

    baseURI: string

    Returns node's node document's document base URL.

    MDN Reference

    ReadonlyCDATA_SECTION_NODE

    CDATA_SECTION_NODE: 4

    node is a CDATASection node.

    ReadonlychildElementCount

    childElementCount: number

    MDN Reference

    ReadonlychildNodes

    childNodes: NodeListOf<ChildNode>

    Returns the children.

    MDN Reference

    Readonlychildren

    children: HTMLCollection

    Returns the child elements.

    MDN Reference

    ReadonlyCOMMENT_NODE

    COMMENT_NODE: 8

    node is a Comment node.

    ReadonlyDOCUMENT_FRAGMENT_NODE

    DOCUMENT_FRAGMENT_NODE: 11

    node is a DocumentFragment node.

    ReadonlyDOCUMENT_NODE

    DOCUMENT_NODE: 9

    node is a document.

    ReadonlyDOCUMENT_POSITION_CONTAINED_BY

    DOCUMENT_POSITION_CONTAINED_BY: 16

    Set when other is a descendant of node.

    ReadonlyDOCUMENT_POSITION_CONTAINS

    DOCUMENT_POSITION_CONTAINS: 8

    Set when other is an ancestor of node.

    ReadonlyDOCUMENT_POSITION_DISCONNECTED

    DOCUMENT_POSITION_DISCONNECTED: 1

    Set when node and other are not in the same tree.

    ReadonlyDOCUMENT_POSITION_FOLLOWING

    DOCUMENT_POSITION_FOLLOWING: 4

    Set when other is following node.

    ReadonlyDOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC

    DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32

    ReadonlyDOCUMENT_POSITION_PRECEDING

    DOCUMENT_POSITION_PRECEDING: 2

    Set when other is preceding node.

    ReadonlyDOCUMENT_TYPE_NODE

    DOCUMENT_TYPE_NODE: 10

    node is a doctype.

    ReadonlyELEMENT_NODE

    ELEMENT_NODE: 1

    node is an element.

    ReadonlyENTITY_NODE

    ENTITY_NODE: 6

    ReadonlyENTITY_REFERENCE_NODE

    ENTITY_REFERENCE_NODE: 5

    ReadonlyfirstChild

    firstChild: ChildNode

    Returns the first child.

    MDN Reference

    ReadonlyfirstElementChild

    firstElementChild: Element

    Returns the first child that is an element, and null otherwise.

    MDN Reference

    ReadonlyisConnected

    isConnected: boolean

    Returns true if node is connected and false otherwise.

    MDN Reference

    ReadonlylastChild

    lastChild: ChildNode

    Returns the last child.

    MDN Reference

    ReadonlylastElementChild

    lastElementChild: Element

    Returns the last child that is an element, and null otherwise.

    MDN Reference

    ReadonlynextSibling

    nextSibling: ChildNode

    Returns the next sibling.

    MDN Reference

    ReadonlynodeName

    nodeName: string

    Returns a string appropriate for the type of node.

    MDN Reference

    ReadonlynodeType

    nodeType: number

    Returns the type of node.

    MDN Reference

    nodeValue

    nodeValue: string

    MDN Reference

    ReadonlyNOTATION_NODE

    NOTATION_NODE: 12

    ReadonlyownerDocument

    ownerDocument: Document

    Returns the node document. Returns null for documents.

    MDN Reference

    ReadonlyparentElement

    parentElement: HTMLElement

    Returns the parent element.

    MDN Reference

    ReadonlyparentNode

    parentNode: ParentNode

    Returns the parent.

    MDN Reference

    ReadonlypreviousSibling

    previousSibling: ChildNode

    Returns the previous sibling.

    MDN Reference

    ReadonlyPROCESSING_INSTRUCTION_NODE

    PROCESSING_INSTRUCTION_NODE: 7

    node is a ProcessingInstruction node.

    ReadonlyTEXT_NODE

    TEXT_NODE: 3

    node is a Text node.

    textContent

    textContent: string

    MDN Reference

    Methods

    addEventListener

    • addEventListener(
          type: string,
          callback: EventListenerOrEventListenerObject,
          options?: boolean | AddEventListenerOptions,
      ): void

    • Appends an event listener for events whose type attribute value is type. The callback argument sets the callback that will be invoked when the event is dispatched.

      The options argument sets listener-specific options. For compatibility this can be a boolean, in which case the method behaves exactly as if the value was specified as options's capture.

      When set to true, options's capture prevents callback from being invoked when the event's eventPhase attribute value is BUBBLING_PHASE. When false (or not present), callback will not be invoked when event's eventPhase attribute value is CAPTURING_PHASE. Either way, callback will be invoked if event's eventPhase attribute value is AT_TARGET.

      When set to true, options's passive indicates that the callback will not cancel the event by invoking preventDefault(). This is used to enable performance optimizations described in § 2.8 Observing event listeners.

      When set to true, options's once indicates that the callback will only be invoked once after which the event listener will be removed.

      If an AbortSignal is passed for options's signal, then the event listener will be removed when signal is aborted.

      The event listener is appended to target's event listener list and is not appended if it has the same type, callback, and capture.

      MDN Reference

      Parameters

      Returns void

    append

    • append(...nodes: (string | Node)[]): void

    • Inserts nodes after the last child of node, while replacing strings in nodes with equivalent Text nodes.

      Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

      MDN Reference

      Parameters

      • ...nodes: (string | Node)[]

      Returns void

    appendChild

    cloneNode

    • cloneNode(deep?: boolean): Node

    • Returns a copy of node. If deep is true, the copy also includes the node's descendants.

      MDN Reference

      Parameters

      • Optionaldeep: boolean

      Returns Node

    compareDocumentPosition

    contains

    dispatchEvent

    • dispatchEvent(event: Event): boolean

    • Dispatches a synthetic event event to target and returns true if either event's cancelable attribute value is false or its preventDefault() method was not invoked, and false otherwise.

      MDN Reference

      Parameters

      Returns boolean

    getElementById

    getRootNode

    hasChildNodes

    insertBefore

    isDefaultNamespace

    isEqualNode

    isSameNode

    lookupNamespaceURI

    lookupPrefix

    normalize

    • normalize(): void

    • Removes empty exclusive Text nodes and concatenates the data of remaining contiguous exclusive Text nodes into the first of their nodes.

      MDN Reference

      Returns void

    prepend

    • prepend(...nodes: (string | Node)[]): void

    • Inserts nodes before the first child of node, while replacing strings in nodes with equivalent Text nodes.

      Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

      MDN Reference

      Parameters

      • ...nodes: (string | Node)[]

      Returns void

    querySelector

    querySelectorAll

    removeChild

    removeEventListener

    replaceChild

    replaceChildren

    • replaceChildren(...nodes: (string | Node)[]): void

    • Replace all children of node with nodes, while replacing strings in nodes with equivalent Text nodes.

      Throws a "HierarchyRequestError" DOMException if the constraints of the node tree are violated.

      MDN Reference

      Parameters

      • ...nodes: (string | Node)[]

      Returns void

    Settings

    Member Visibility

    On This Page

    Properties
    Methods