jj
    Preparing search index...

    Class JJD<T>

    Wraps a Document (which is a descendant of Node).

    This class provides a wrapper around the native Document interface, inheriting the fluent API capabilities of JJN. It also supports querying (find) and manipulation (addChild, preChild) methods.

    To find elements by class name, use: doc.find('.my-class')

    To set the document title, use: doc.ref.title = 'New Title'

    const doc = JJD.from(document)
    doc.on('DOMContentLoaded', () => console.log('Ready'))
    doc.ref.title = 'My Page Title'  // Set document title

    Document

    Type Parameters

    • T extends Document = Document

    Hierarchy

    • JJNx<T>
      • JJD
    Index

    Constructors

    constructor

    Accessors

    body head ref

    Methods

    addChild addChildMap addText clone empty find findAll off on preChild preChildMap run setChildren trigger from isWrapable unwrap unwrapAll wrap wrapAll

    Constructors

    • Creates an instance of JJD.

      Type Parameters

      • T extends Document = Document

      Parameters

      • ref: T

        The Document instance to wrap.

      Returns JJD<T>

      If ref is not a Document.

    Accessors

    body

    • get head(): JJHE<HTMLHeadElement>

      Gets the <head> element of the document wrapped in a JJHE instance.

      Returns JJHE<HTMLHeadElement>

      The wrapped head element.

      Document.head

    • get ref(): T

      Gets the underlying DOM object.

      Returns T

    Methods

    • Appends children to this Element.

      Parameters

      • ...children: Wrappable[]

        The children to append.

      Returns this

      This instance for chaining.

      el.addChild(h('span', null, 'hello'))

      To make template codes easier, this function ignores any child that is not possible to wrap() (e.g. undefined, null, false).

      Element.append

    • Maps an array to children and appends them.

      Parameters

      Returns JJD<T>

      This instance for chaining.

      node.addChildMap(['a', 'b'], item => h('li', null, item))

      To make template codes easier, this function ignores any child that is not possible to wrap() (e.g. undefined, null, false).

    • Creates a Text node from a string and appends it to this Node.

      Parameters

      • Optionaltext: string | null

        The text to add. If null or undefined, nothing is added.

      Returns this

      This instance for chaining.

      This method is overridden in JJT to append to the existing text content instead.

      el.addText('Hello ')
      el.addText('World')

      document.createTextNode

    • Removes all children from this Element.

      Returns this

      This instance for chaining.

      el.empty()

      Element.setChildren

    • Finds the first element matching a selector within this Element.

      Parameters

      • selector: string

        The CSS selector.

      • required: boolean = false

        Whether to throw an error if not found. Defaults to false.

      Returns Wrapped | null

      The wrapped element, or null if not found and required is false.

      const span = el.find('span')  // Returns null if not found
      const span = el.find('span', true)  // Throws if not found

      If selector is not a string or element not found and required is true.

      Element.querySelector

    • Finds all elements matching a selector within this Element.

      Parameters

      • selector: string

        The CSS selector.

      Returns Wrapped[]

      An array of wrapped elements.

      const items = el.findAll('li')

      If selector is not a string.

      Element.querySelectorAll

    • Removes an event listener.

      Parameters

      • eventName: string

        The name of the event.

      • handler: EventListenerOrEventListenerObject | null

        The event handler.

      • Optionaloptions: boolean | EventListenerOptions

        Optional event listener options or boolean.

      Returns this

      This instance for chaining.

      Pass the same handler reference that was used in on() to properly remove the listener.

      const handler = function() { console.log(this) }
      JJET.from(window).on('resize', handler)
      JJET.from(window).off('resize', handler)

      EventTarget.removeEventListener

    • Adds an event listener.

      Parameters

      • eventName: string

        The name of the event.

      • handler: EventListenerOrEventListenerObject | null

        The event handler.

      • Optionaloptions: AddEventListenerOptions

        Optional event listener options.

      Returns this

      This instance for chaining.

      The handler is automatically bound to this JJET instance, so this inside the handler refers to the JJET instance, not the DOM element. To access the DOM element, use this.ref.

      JJET.from(window).on('resize', function() {
        console.log(this) // JJET instance
        console.log(this.ref) // window object
      })

      EventTarget.addEventListener

    • Prepends children to this Element.

      Parameters

      • ...children: Wrappable[]

        The children to prepend.

      Returns this

      This instance for chaining.

      el.preChild(h('span', null, 'first'))

      To make template codes easier, this function ignores any child that is not possible to wrap() (e.g. undefined, null, false).

      Element.prepend

    • Maps an array to children and prepends them.

      Parameters

      Returns JJD<T>

      This instance for chaining.

      node.preChildMap(['a', 'b'], item => JJHE.create('li').setText(item))

      To make template codes easier, this function ignores any child that is not possible to wrap() (e.g. undefined, null, false).

    • Runs a function in the context of this JJET instance.

      Type Parameters

      • R
      • Args extends any[]

      Parameters

      • fn: (this: this, ...args: Args) => R

        The function to run. this inside the function will refer to this JJET instance.

      • ...args: Args

        Arguments to pass to the function.

      Returns R

      The return value of the function.

      node.run(function() {
        console.log(this.ref)
      })

      If you want to access the current JJ* instance using this keyword, you SHOULD use a function not an arrow function. If the function throws, run() doesn't swallow the exception. So if you're expecting an error, make sure to wrap it in a try..catch block and handle the exception. If the function returns a promise, you can await on the response.

    • Replaces the existing children of an Element with a specified new set of children.

      Parameters

      • ...children: Wrappable[]

        The children to replace with.

      Returns this

      This instance for chaining.

      If no children are provided, it empties the Element. To make template codes easier, this function ignores any child that is not possible to wrap() (e.g. undefined, null, false).

      el.setChildren(h('p', null, 'New Content'))

      Element.replaceChildren

    • Dispatches an Event at the specified EventTarget.

      Parameters

      • event: Event

        The Event object to dispatch.

      Returns this

      This instance for chaining.

      EventTarget.dispatchEvent

    • Creates a JJD instance from a Document reference.

      Parameters

      • ref: Document

        The Document instance.

      Returns JJD

      A new JJD instance.

      const doc = JJD.from(document)

      Document

    • Checks if a value can be passed to the wrap() or unwrap() function.

      Parameters

      • x: unknown

        an unknown value

      Returns x is Wrappable

      true if x is a string, Node (or its descendents), JJN (or its descendents)

      This is useful for filtering the array that is passed to append(), prepend() or setChildren()

    • Extracts the underlying native DOM node from a wrapper.

      Parameters

      Returns Unwrapped

      The underlying DOM node.

      If the input is already a native Node, it is returned as is. If the input is a string, a new Text node is created and returned.

      const rawElement = JJN.unwrap(myJJHE) // Returns HTMLElement

      If the input cannot be unwrapped.

    • Unwraps an iterable object (e.g. an array or HTMLCollection).

      Parameters

      • iterable: Iterable<Wrappable>

        The iterable to unwrap.

      Returns Unwrapped[]

      An array of native DOM nodes.

      const nodes = JJN.unwrapAll(wrappedList)

    • Wraps a native DOM node or string into the most specific JJ wrapper available.

      Parameters

      • raw: Wrappable

        The object to wrap. If it's already Wrapped, it'll be returned without any change. We don't double-wrap or clone it.

      Returns Wrapped

      The most granular Wrapped subclass instance. If the input is already wrapped, it'll be returned as is without cloning.

      This function acts as a factory, inspecting the input type and returning the appropriate subclass of JJN (e.g., JJHE for HTMLElement, JJT for Text).

      const bodyWrapper = JJN.wrap(document.body) // Returns JJHE
      const textWrapper = JJN.wrap('Hello') // Returns JJT wrapping a new Text node

      If the input is not a Node, string, or JJ wrapper.

    • Wraps an iterable object (e.g. an array of wrapped or DOM elements).

      Parameters

      • iterable: Iterable<Wrappable>

        The iterable to wrap.

      Returns Wrapped[]

      An array of wrapped instances.

      const wrappedList = JJN.wrapAll(document.querySelectorAll('div'))

    Settings

    Member Visibility

    On This Page

    Constructors
    Accessors
    Methods