Options
All
  • Public
  • Public/Protected
  • All
Menu

Class xjs_DocumentFragment

Wrapper for a DocumentFragment.

see

https://www.w3.org/TR/dom/#documentfragment

Hierarchy

Index

Constructors

constructor

Properties

Static NodeType

NodeType: NodeType = NodeType

Accessors

node

  • get node(): dev_DocumentFragment

Methods

append

  • append(...contents: Content[]): this
  • summary

    ParentNode#append, but returns this object when done.

    description

    This method exists simply for chaining.

    example

    let strong = document.createElement('strong') strong.textContent = 'hello' let em = document.createElement('em') let mark = document.createElement('mark')

    let snippet = new xjs.DocumentFragment(new DocumentFragment()) .append(...[ strong, // DOM Node to the, // string new Comment(great), // DOM Node <small>big</small>, // string with HTML new xjs.Element(em).addContent(world).node, // DOM Node (unwrapped) null, // null new xjs.Element(mark).addContent(!), // wrapped DOM Node ]).innerHTML() return snippet === <strong>hello</strong> to the <!--great--><small>big</small> <em>world</em><mark>!</mark>

    todo

    TODO xjs.ParentNode#append

    see

    https://dom.spec.whatwg.org/#dom-parentnode-append

    Parameters

    • Rest ...contents: Content[]

      the contents to append

    Returns this

    this

empty

  • empty(): this

exe

  • exe(executable: function): this
  • summary

    Execute a function acting on this node, and then return this node.

    description

    Simplifies chaining when performing void tasks, especially tasks that have not been defined in this implementation.

    Parameters

    • executable: function

      any function that takes 0 arguments and returns undefined (or does not have a return statement)

    Returns this

    this

importLinks

  • importLinks(dirpath: string): this
  • summary

    Replace all link[rel~="import"][data-import] elements with contents from their documents.

    description

    This method finds all link[rel~="import"][data-import]s in this document fragment, and then replaces those links with another DocumentFragment holding some contents. These contents depend on the value set for data-import:

    • if [data-import="document"], then the replaced contents will be the contents of the link’s imported document itself
    • if [data-import="template"], then the replaced contents will be the contents of the first template descendant in the link’s imported document
    • if the [data-import] attribute value is neither "document" nor "template", or if it is absent, then the link element is completely ignored and left as-is

    Note: If HTMLLinkElement#import is supported (by the browser or jsdom), then when [data-import="document"] is set, the appended contents will instead be a Document object, as defined by HTML Imports, rather than a DocumentFragment object.

    Note: DocumentFragment#querySelectorAll does not traverse inside <template> elements, so any <link> elements inside <template> elements will be left untouched. To modify those, you will need to call this method on that <template>’s contents (another DocumentFragment).

    In the example below, The link[rel="import"] in this fragment has [data-import="template"], and so is replaced with the contents of template#sect-template in x-linked-doc.tpl.html---namely, a DocumentFragment containing only the section element. However, if the link had had [data-import="document"], then the replaced content would consist of a DocumentFragment containing the entirety of x-linked-doc.tpl.html, including both the h1 along with the template#sect-template.

    example

    // x-linked-doc.tpl.html:

    top-level hed

    // main.js: // assume this is an xjs.DocumentFragment instance. this.innerHTML() === <ol> <template id="list-template"> <li> <link rel="import" data-import="template" href="./x-linked-doc.tpl.html"/> </li> </template> </ol>

    // This call will do nothing, as there are no direct <link> descendants: // .querySelectorAll does not traverse inside <template>s. this.importLinks(__dirname)

    // This call will work as intended. let innerfrag = new xjs.DocumentFragment(this.node.querySelector('template').content) innerfrag.importLinks(__dirname)

    Parameters

    • dirpath: string

      the absolute path to the directory of the template file containing the link element

    Returns this

    this

importLinksAsync

  • importLinksAsync(dirpath: string): Promise<void[]>
  • summary

    Asynchronous version of {@link xjs_DocumentFragment#importLinks}.

    Parameters

    • dirpath: string

      the absolute path to the directory of the template file containing the link element

    Returns Promise<void[]>

innerHTML

  • innerHTML(): string
  • summary

    Get the "innerHTML" of this document fragment.

    Returns string

    a concatenation of all the outerHTML and/or data of the fragment’s node children

prepend

  • prepend(...contents: Content[]): this
  • summary

    ParentNode#prepend, but returns this object when done.

    description

    This method exists simply for chaining.

    example

    let strong = document.createElement('strong') strong.textContent = 'hello' let em = document.createElement('em') let mark = document.createElement('mark')

    let snippet = new xjs.DocumentFragment(new DocumentFragment()) .prepend(...[ strong, // DOM Node to the, // string new Comment(great), // DOM Node <small>big</small>, // string with HTML new xjs.Element(em).addContent(world).node, // DOM Node (unwrapped) null, // null new xjs.Element(mark).addContent(!), // wrapped DOM Node ]).innerHTML() return snippet === <strong>hello</strong> to the <!--great--><small>big</small> <em>world</em><mark>!</mark>

    todo

    TODO xjs.ParentNode#prepend

    see

    https://dom.spec.whatwg.org/#dom-parentnode-prepend

    Parameters

    • Rest ...contents: Content[]

      the contents to prepend

    Returns this

    this

textContent

  • textContent(): string | null
  • textContent(text: string): this

trimInner

  • trimInner(): this
  • summary

    Remove all inner whitespace text nodes from this node, and return it.

    example

    let snip = new HTMLElement(document.createElement('div')).addContent(<h1> <em>Hello </em> <b>Worl d</b> </h1>) let snipTrimmed = new xjs.Node(snip).trimInner() return snip.node.innerHTML === <h1> <em>Hello </em> <b>Worl d</b> </h1> && snipTrimmed.node.innerHTML = <h1><em>Hello </em><b>Worl d</b></h1>

    Returns this

    this

Static concat

  • concat(...contents: (string | Node | xjs_Node)[]): string
  • summary

    Concatenate multiple contents into text.

    example

    xjs.DocumentFragment.concat( new xjs.Element(document.createElement('strong')).append(hello), new xjs.Element(document.createElement('em' )).append(world), new xjs.Element(document.createElement('mark' )).append(!) ) // 'hello world!'

    Parameters

    • Rest ...contents: (string | Node | xjs_Node)[]

      the contents to concatenate

    Returns string

    the resulting output of concatenation

Static fromFile

  • summary

    Read an HTML file and return a document fragment with its contents.

    description

    The DocumentFragment object will be wrapped in an xjs.DocumentFragment object. To access the actual element, call {@link xjs_DocumentFragment#node}.

    Parameters

    • filepath: string

      the path to the file

    Returns Promise<xjs_DocumentFragment>

    the fragment, wrapped

Static fromFileSync

Generated using TypeDoc