jj
    Preparing search index...

    Class JJT<T>

    Wraps a DOM Text Node.

    The Text interface represents the textual content of Element or Attr. If an element has no markup within its content, it has a single child implementing Text that contains the element's text.

    Text

    Type Parameters

    • T extends Text = Text

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Accessors

    children parent ref

    Methods

    addText clone empty getText off on rm run setText trigger triggerCustomEvent create from isWrappable unwrap unwrapAll wrap wrapAll

    Constructors

    • Creates an instance of JJT.

      Type Parameters

      • T extends Text = Text

      Parameters

      • ref: T

        The Text node or a string to create a Text node from.

      Returns JJT<T>

      const text = new JJT('Hello World')

      If ref is not a Text node or string.

      • JJT.from for wrapping an existing Text node.
      • JJT.create for creating from a plain string.

    Accessors

    • get children(): Wrapped[]

      Gets the child nodes wrapped in the most specific JJ wrappers available.

      Returns Wrapped[]

      The wrapped child nodes.

      Returns an empty array when this node has no children.

      const el = JJHE.create('div').addChild('hello', JJHE.create('span'))
      const children = el.children // [JJT, JJHE]

      Node.childNodes

    • get parent(): Wrapped | null

      Gets the parent node wrapped in the most specific JJ wrapper available.

      Returns Wrapped | null

      The wrapped parent node, or null if this node has no parent.

      Returns null when this node is detached and therefore has no parent.

      const text = JJT.create('hello')
      JJHE.create('div').addChild(text)
      const parent = text.parent // JJHE

      Node.parentNode

    • get ref(): T

      Gets the underlying DOM object.

      Returns T

      run for fluent callbacks that can also access this same wrapped target.

    Methods

    • Appends text to the existing content.

      Parameters

      • ...textArr: unknown[]

        The string to add to the existing contents. If null or undefined, nothing is added.

      Returns this

      This instance for chaining.

      text.setText('hello')
      text.addText(' world')
      console.log(text.getText()) // 'hello world'

      Node.textContent

    • Gets the text content of the Text node.

      Returns string

      The text content.

      const content = text.getText()

      Node.textContent

    • 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 onResize = () => {
          console.log('resized')
      }

      const win = JJET.from(window)
      win.on('resize', onResize)
      win.off('resize', onResize)

      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.

      const onResize = () => {
          console.log('resized')
      }

      JJET.from(window).on('resize', onResize)

      const target = {
          count: 0,
          increment() {
              this.count++
          },
      }

      JJET.from(window).on('click', target.increment.bind(target))

      EventTarget.addEventListener

    • Removes this node from its parent.

      Returns this

      This instance for chaining.

      If the node has no parent, this method does nothing.

      const doc = JJD.from(document)
      const el = JJHE.create('div')
      doc.body.addChild(el)
      el.rm()

      Node.removeChild

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

      Parameters

      • fn: (this: this, context: this) => void

        The synchronous function to run. this inside the function will refer to this JJET instance, and the wrapped instance is also passed as the first argument.

      Returns this

      This instance for chaining.

      node
        .run(function (context) {
          console.log(this.ref)
          console.log(context.ref)
        })
        .trigger(new Event('ready'))

      Use this to make synchronous adjustments while staying in a fluent chain. The callback return value is ignored. If you want to access the current JJ* instance using this, use a function rather than an arrow function.

      • ref for direct access to the wrapped native target.
      • on for event listener chaining.
      • trigger for dispatching events in-chain.

    • Sets the text content of the Text node.

      Parameters

      • Optionaltext: unknown

        The text to set. Set it to null or undefined to remove all text

      Returns this

      This instance for chaining.

      text.setText('New content')

      Node.textContent

    • Creates and dispatches a CustomEvent on the wrapped target.

      Type Parameters

      • T = unknown

      Parameters

      • eventName: string

        The event type name.

      • Optionaldetail: T

        Optional payload exposed as event.detail.

      • Optionaloptions: Omit<CustomEventInit<T>, "detail">

        Additional CustomEvent options excluding detail.

      Returns this

      This instance for chaining.

      This is a convenience wrapper around trigger for the common case of dispatching a payload-bearing custom event.

      The created event defaults to bubbles: true and composed: true. Pass options to override those defaults.

      If eventName is not a string.

      JJET.from(window).triggerCustomEvent('panel-ready', { id: '123' })

      JJET.from(this).triggerCustomEvent('todo-toggle', {
          id: '123',
          done: true,
      })

      CustomEvent()

    • Creates a JJT instance from a string.

      Parameters

      • text: string | number | bigint | boolean | symbol | object | null | undefined

        The string to convert into a Text node.

      Returns JJT

      A new JJT instance wrapping a Text node.

    • Creates a JJT instance from a Text node.

      Parameters

      • text: Text

        The Text node.

      Returns JJT

      A new JJT instance.

      Use JJT.create to create a Text node from a string. For other Node types, use JJN.from or the specific wrapper type.

      const textNode = document.createTextNode('foo')
      const text = JJT.from(textNode)

      If text is not a Text node.

      JJT.create for creating from string input.

    • 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 descendent), JJN (or its descendent)

      This is useful for filtering the array that is passed to append(), prepend() or setChildren(). See Wrappable type for the full definition.

      • JJN.wrap for converting Wrappable into wrappers.
      • JJN.unwrap for converting Wrappable into native nodes.

    • 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 JJ wrapper, its underlying node is returned. Otherwise, the input is coerced into a Text node. Plain objects are stringified with JSON when possible, and fall back to String(...).

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

    • 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 factory function acts as an intelligent wrapper, inspecting the input type and returning the appropriate subclass of JJN (e.g., JJHE for HTMLElement, JJT for Text, JJSE for SVGElement, etc.). Strings are automatically converted to Text nodes wrapped in JJT.

      If the input is already a JJ wrapper, it is returned unchanged (no double-wrapping). See the full implementation in src/wrappers/JJN.ts which extends this with support for internal wrapper types.

      const bodyWrapper = JJN.wrap(document.body) // Returns JJHE<HTMLBodyElement>
      const textWrapper = JJN.wrap('Hello') // Returns JJT wrapping a new Text node
      const existing = JJN.wrap(alreadyWrapped) // Returns alreadyWrapped unchanged

    • 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