jj
    Preparing search index...

    Class JJSE<T>

    Wraps a DOM SVGElement.

    This class extends JJE to provide specific functionality for SVG elements, including namespace-aware creation and helper methods for common SVG attributes.

    SVGElement

    Type Parameters

    • T extends SVGElement = SVGElement

    Hierarchy

    • JJEx<T>
      • JJSE
    Index

    Constructors

    constructor

    Accessors

    ref shadow

    Methods

    addChild addChildMap addClass addText clone closest disable empty enable find findAll getAria getAttr getClass getData getHTML getText hasAria hasAttr hasClass hasData hide initShadow off on preChild preChildMap replaceClass rmAria rmAttr rmClass rmData run setAria setAttr setChildren setClass setD setData setFill setHeight setHTML setStroke setStrokeWidth setText setTransform setViewBox setWidth show toggleClass trigger create from isWrapable unwrap unwrapAll wrap wrapAll

    Constructors

    • Creates an instance of JJSE.

      Type Parameters

      • T extends SVGElement = SVGElement

      Parameters

      • ref: T

        The SVGElement to wrap.

      Returns JJSE<T>

      If ref is not an SVGElement.

    Accessors

    • get ref(): T

      Gets the underlying DOM object.

      Returns T

    • get shadow(): JJSR<ShadowRoot> | null

      Gets a wrapper around the Element's Shadow Root, if it exists.

      Returns JJSR<ShadowRoot> | null

      A JJSR instance wrapping the shadow root, or null if no shadow root exists.

    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 JJSE<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).

    • Adds one or more classes to the Element.

      Parameters

      • ...classNames: string[]

        The classes to add.

      Returns this

      This instance for chaining.

      el.addClass('btn', 'btn-primary')

      If any class name is not a string.

    • 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

    • Finds the closest ancestor (or self) that matches a CSS selector.

      Parameters

      • selector: string

        The CSS selector to search for.

      Returns Wrapped | null

      A JJE wrapping the closest match, or null when none exists.

      Returns null when no matching ancestor is found.

      const button = JJE.from(document.querySelector('button'))
      const card = button.closest('.card')
      if (card) {
          card.addClass('has-action')
      }

      If selector is not a string.

      Element.closest

    • Removes all children from this Element.

      Returns this

      This instance for chaining.

      el.empty()

      Element.setChildren

    • Enables the Element by removing the disabled and aria-disabled attributes.

      Returns this

      This instance for chaining.

    • 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

    • Gets the value of an ARIA attribute.

      Parameters

      • name: string

        The ARIA attribute suffix (e.g., 'label' for 'aria-label').

      Returns string | null

      The attribute value, or null if not present.

      Automatically prepends aria- to the name.

      el.getAria('label') // gets 'aria-label'

      If name is not a string.

      ARIA Attributes

    • Gets the value of an attribute.

      Parameters

      • name: string

        The name of the attribute.

      Returns string | null

      The attribute value, or null if not present.

      If name is not a string.

      Element.getAttribute

    • Gets the class attribute.

      Returns string | null

      The class attribute value, or null if not present.

      Element.className

    • Gets a data attribute from the HTMLElement.

      Parameters

      • name: string

        The data attribute name (in camelCase).

      Returns string | undefined

      The value of the attribute, or undefined if not set.

      const value = el.getData('my-key')

      If name is not a string.

      HTMLElement.dataset

    • Gets the inner HTML of the Element.

      Returns string

      The inner HTML string.

      This method operates on innerHTML. The method name is kept short for convenience.

      Element.innerHTML

    • Gets the text content of the SVGElement.

      Returns string

      The text content.

      This method operates on textContent. The method name is kept short for convenience.

      const text = svg.getText()

      Node.textContent

    • Checks if an ARIA attribute exists.

      Parameters

      • name: string

        The ARIA attribute suffix.

      Returns boolean

      true if the attribute exists.

      If name is not a string.

    • Checks if an attribute exists.

      Parameters

      • name: string

        The name of the attribute.

      Returns boolean

      true if the attribute exists, otherwise false.

      If name is not a string.

      Element.hasAttribute

    • Checks if the Element has a specific class.

      Parameters

      • className: string

        The class to check for.

      Returns boolean

      true if the element has the class.

      If className is not a string.

    • Checks if a data attribute exists on the HTMLElement.

      Parameters

      • name: string

        The data attribute name (in camelCase).

      Returns boolean

      True if the attribute exists, false otherwise.

      if (el.hasData('my-key')) {
        // ...
      }

      If name is not a string.

      HTMLElement.dataset

    • Attaches a Shadow DOM to the Element and optionally sets its content and styles.

      Parameters

      • mode: ShadowRootMode = 'open'

        The encapsulation mode ('open' or 'closed'). Defaults to 'open'.

      • Optionalconfig: ShadowConfig

        Optional configuration object containing template (HTML string) and styles (array of CSSStyleSheet).

      Returns this

      This instance for chaining.

      We prevent FOUC by assigning the template and CSS in one go. Note: You can't attach a shadow root to every type of element. There are some that can't have a shadow DOM for security reasons (for example <a>).

    • 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 JJSE<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).

    • Replaces a class with another one

      Parameters

      • oldClassName: string

        The class name to remove

      • newClassName: string

        The class name to add

      Returns this

      If the oldClassName doesn't exist, the newClassName isn't added

      If either className is not a string.

    • Removes one or more ARIA attributes from the Element.

      Parameters

      • ...names: string[]

        The ARIA attribute suffix(es) to remove.

      Returns this

      This instance for chaining.

      el.rmAria('hidden')  // Remove single
      el.rmAria('label', 'hidden')  // Remove multiple

      If any name is not a string.

    • Removes one or more attributes from the Element.

      Parameters

      • ...names: string[]

        The name(s) of the attribute(s) to remove.

      Returns this

      This instance for chaining.

      el.rmAttr('disabled')  // Remove single
      el.rmAttr('hidden', 'aria-hidden')  // Remove multiple

      If any name is not a string.

      Element.removeAttribute

    • Removes one or more classes from the Element.

      Parameters

      • ...classNames: string[]

        The classes to remove.

      Returns this

      This instance for chaining.

      el.rmClass('active')  // Remove single
      el.rmClass('btn', 'btn-primary')  // Remove multiple

      If any class name is not a string.

    • Removes one or more data attributes from the HTMLElement.

      Parameters

      • ...names: string[]

        The data attribute name(s) (in camelCase).

      Returns this

      This instance for chaining.

      el.rmData('myKey')  // Remove single
      el.rmData('myKey', 'otherKey')  // Remove multiple

      If any name is not a string.

      HTMLElement.dataset

    • 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.

    • Sets one or more ARIA attributes on the Element.

      Parameters

      • name: string
      • value: any

      Returns this

      el.setAria('hidden', 'true')  // Single: sets aria-hidden="true"
      el.setAria({ label: 'Close', hidden: 'false' })  // Multiple
      el.setAria('level', 2)  // Numbers are automatically converted

      ARIA Attributes

    • Sets one or more ARIA attributes on the Element.

      Parameters

      • obj: Record<string, any>

      Returns this

      el.setAria('hidden', 'true')  // Single: sets aria-hidden="true"
      el.setAria({ label: 'Close', hidden: 'false' })  // Multiple
      el.setAria('level', 2)  // Numbers are automatically converted

      ARIA Attributes

    • Sets one or more attributes on the Element.

      Parameters

      • name: string
      • value: any

      Returns this

      el.setAttr('id', 'my-id')  // Single attribute
      el.setAttr({ id: 'my-id', class: 'my-class' })  // Multiple attributes
      el.setAttr('x', 50)  // Numbers are automatically converted

      If arguments are invalid types.

      Element.setAttribute

    • Sets one or more attributes on the Element.

      Parameters

      • obj: Record<string, any>

      Returns this

      el.setAttr('id', 'my-id')  // Single attribute
      el.setAttr({ id: 'my-id', class: 'my-class' })  // Multiple attributes
      el.setAttr('x', 50)  // Numbers are automatically converted

      If arguments are invalid types.

      Element.setAttribute

    • 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

    • Sets the class attribute or conditionally adds/removes classes.

      Parameters

      • className: string

      Returns this

      • Pass a string to replace the entire class attribute
      • Pass an object with class names as keys and boolean values to conditionally add/remove classes
      • To remove all classes, pass an empty string: setClass('')
      el.setClass('btn btn-primary')  // Set classes as string
      el.setClass({                   // Conditional classes (Vue.js style)
        'active': true,               // adds 'active'
        'disabled': false,            // removes 'disabled'
        'highlight': isHighlighted    // adds/removes based on condition
      })

    • Sets the class attribute or conditionally adds/removes classes.

      Parameters

      • classMap: Record<string, boolean | unknown>

      Returns this

      • Pass a string to replace the entire class attribute
      • Pass an object with class names as keys and boolean values to conditionally add/remove classes
      • To remove all classes, pass an empty string: setClass('')
      el.setClass('btn btn-primary')  // Set classes as string
      el.setClass({                   // Conditional classes (Vue.js style)
        'active': true,               // adds 'active'
        'disabled': false,            // removes 'disabled'
        'highlight': isHighlighted    // adds/removes based on condition
      })

    • Sets the d attribute (path data).

      Parameters

      • value: string | (string | number)[]

        The path data string or array of segments.

      Returns this

      This instance for chaining.

      d

    • Sets one or more data attributes on the HTMLElement.

      Parameters

      • name: string
      • value: any

      Returns this

      el.setData('myKey', 'myValue')  // Single
      el.setData({ myKey: 'myValue', otherKey: 'otherValue' })  // Multiple
      el.setData('count', 42)  // Numbers are automatically converted

      If arguments are invalid types.

      HTMLElement.dataset

    • Sets one or more data attributes on the HTMLElement.

      Parameters

      • obj: Record<string, any>

      Returns this

      el.setData('myKey', 'myValue')  // Single
      el.setData({ myKey: 'myValue', otherKey: 'otherValue' })  // Multiple
      el.setData('count', 42)  // Numbers are automatically converted

      If arguments are invalid types.

      HTMLElement.dataset

    • Sets the fill attribute.

      Parameters

      • value: string

        The fill color/value.

      Returns this

      This instance for chaining.

      fill

    • Sets the height attribute.

      Parameters

      • value: string | number

        The height.

      Returns this

      This instance for chaining.

      height

    • Sets the inner HTML of the Element.

      Parameters

      • html: string | null | undefined

        The HTML string to set, or null/undefined to clear.

      • Optionalunsafe: boolean

        explicit opt-in to set innerHTML. must be true if html is provided.

      Returns this

      This instance for chaining.

      This method operates on innerHTML. The method name is kept short for convenience. Pass an empty string, null, or undefined to clear the content.

      Element.innerHTML

    • Sets the stroke attribute.

      Parameters

      • value: string

        The stroke color/value.

      Returns this

      This instance for chaining.

      stroke

    • Sets the stroke-width attribute.

      Parameters

      • value: string | number

        The width.

      Returns this

      This instance for chaining.

      stroke-width

    • Sets the text content of the SVGElement.

      Parameters

      • Optionaltext: any

        The text to set, or null/undefined to clear.

      Returns this

      This instance for chaining.

      This method operates on textContent. The method name is kept short for convenience. Pass an empty string, null, or undefined to clear the content. Numbers and booleans are automatically converted to strings.

      svg.setText('Hello SVG')
      svg.setText(null)  // Clear content
      svg.setText(42)  // Numbers are converted

      Node.textContent

    • Sets the transform attribute.

      Parameters

      • value: string

        The transform string.

      Returns this

      This instance for chaining.

      transform

    • Sets the viewBox attribute.

      Parameters

      • p1: string | number | (string | number)[]

        Min-x or string/array value.

      • Optionalp2: number

        Min-y.

      • Optionalp3: number

        Width.

      • Optionalp4: number

        Height.

      Returns this

      This instance for chaining.

      svg.setViewBox(0, 0, 100, 100)
      svg.setViewBox('0 0 100 100')

      viewBox

    • Sets the width attribute.

      Parameters

      • value: string | number

        The width.

      Returns this

      This instance for chaining.

      width

    • Shows the Element by removing the hidden and aria-hidden attributes.

      Returns this

      This instance for chaining.

    • Toggles a class on the Element.

      Parameters

      • className: string

        The class to toggle.

      Returns this

      This instance for chaining.

      If className is not a string.

    • 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 JJSE instance from a tag name (in the SVG namespace).

      Parameters

      • tagName: string

        The tag name.

      • Optionaloptions: ElementCreationOptions

        Element creation options.

      Returns JJSE

      A new JJSE instance.

      Automatically uses the correct SVG namespace URI: http://www.w3.org/2000/svg.

      const circle = JJSE.create('circle')

      If tagName is not a string.

      document.createElementNS

    • Creates a JJSE instance from an SVGElement reference.

      Parameters

      • ref: SVGElement

        The SVGElement.

      Returns JJSE

      A new JJSE instance.

      const svg = JJSE.from(myCircle)

      SVGElement

    • 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