Class DomQuery

Monadic DomNode representation, ala jquery This is a thin wrapper over querySelectorAll to get slim monadic support to reduce implementation code on the users side. This is vital for frameworks which want to rely on plain dom but still do not want to lose the reduced code footprint of querying dom trees and traversing by using functional patterns.

Also, a few convenience methods are added to reduce the code footprint of standard dom processing operations like eval

in most older systems Note parts of this code still stem from the Dom.js I have written 10 years ago, those parts look a bit ancient and will be replaced over time.

Hierarchy

Implements

Constructors

  • Parameters

    • Rest ...rootNode: (string | any[] | Document | Element | DomQuery | ShadowRoot)[]

    Returns DomQuery

Properties

_limits: number = -1
pos: number = -1
absent: DomQuery = ...
global: (() => any | null) = _global$

Type declaration

    • (): any | null
    • reference to the environmental global object

      Returns any | null

Accessors

  • get checked(): boolean
  • Returns boolean

  • set checked(newChecked: boolean): void
  • Parameters

    • newChecked: boolean

    Returns void

  • get global(): any
  • reference to the systems global object (globalThis, window, global, depending on the environment)

    Returns any

  • get innerHTML(): string
  • getter abbreviation to use innerHTML directly

    Returns string

  • set innerHTML(newInnerHTML: string): void
  • abbreviation property to use innerHTML directly like on the dom tree

    Parameters

    • newInnerHTML: string

      the new inner html which should be attached to "this" domQuery

    Returns void

  • get innerHtml(): string
  • same here, getter for allowing innerHtml directly

    Returns string

  • set innerHtml(newInnerHtml: string): void
  • since the dom allows both innerHTML and innerHtml we also have to implement both

    Parameters

    • newInnerHtml: string

      see above

    Returns void

  • get nodeId(): string
  • convenience for dq.id.value to make the code a little tighter

    Returns string

  • set nodeId(value: string): void
  • convenience for dq.id.value to make the code a little tighter

    Parameters

    • value: string

    Returns void

  • get type(): Optional<string>
  • convenience property for type

    returns null in case of no type existing otherwise the type of the first element

    Returns Optional<string>

  • get val(): string | boolean
  • abbreviation for inputValue.value to make the code terser

    Returns string | boolean

  • set val(value: string | boolean): void
  • abbreviation for inputValue.value to make the code terser

    Parameters

    • value: string | boolean

    Returns void

Methods

  • Implementation of an iterator to allow loops over dom query collections

    Returns Iterator<DomQuery, any, undefined>

  • adds an event listener

    Parameters

    • type: string
    • listener: ((evt: Event) => void)
        • (evt: Event): void
        • Parameters

          • evt: Event

          Returns void

    • Optional options: boolean | EventListenerOptions

    Returns DomQuery

  • attach shadow elements 1:1 mapping from attach shadow

    Parameters

    • params: {
          [key: string]: string;
      } = ...
      • [key: string]: string

    Returns DomQuery

  • attr accessor, usage myQuery.attr("class").value = "bla" or let value myQuery.attr("class").value

    Parameters

    • attr: string

      the attribute to set

    • defaultValue: string = null

      the default value in case nothing is presented (defaults to null)

    Returns ElementAttribute

  • core byId method

    Parameters

    • id: string

      the id to search for

    • Optional includeRoot: boolean

      also match the root element?

    Returns DomQuery

  • same as byId just for the tag name

    Parameters

    • tagName: string

      the tag-name to search for

    • Optional includeRoot: boolean

      shall the root element be part of this search

    • Optional deep: boolean

      do we also want to go into shadow dom areas

    Returns DomQuery

  • Concatenates the elements of two Dom Queries into a single one

    Parameters

    • toAttach: DomQuery

      the elements to attach

    • filterDoubles: boolean = true

      filter out possible double elements (aka same markup)

    Returns DomQuery

  • returns the current element, returns the same element as the previous next call if there is no next before current called then we will call next as initial element

    Returns DomQuery | ITERATION_STATUS

  • remove all affected nodes from this query object from the dom tree

    Returns void

  • detaches a set of nodes from their parent elements in a browser independent manner

    Returns

    an array of nodes with the detached dom nodes

    Returns DomQuery

  • iterate over each element and perform something on the element (Dom element is passed instead of DomQuery)

    Parameters

    • func: ((item: Element, cnt?: number) => any)
        • (item: Element, cnt?: number): any
        • Parameters

          • item: Element
          • Optional cnt: number

          Returns any

    Returns DomQuery

  • encodes all input elements properly into respective config entries, this can be used for legacy systems, for newer use-cases, use the HTML5 Form class which all newer browsers provide

    Returns

    a copy pf

    Parameters

    • toMerge: {} = {}

      optional config which can be merged in

      Returns {
          [key: string]: any;
      }

      • [key: string]: any
    • returns the files from a given element

      Parameters

      • index: number

      Returns any[]

    • filters the current dom query elements upon a given selector

      Parameters

      • selector: string

      Returns DomQuery

    • fires an event

      Parameters

      • eventName: string
      • options: {
            [key: string]: any;
        } = {}
        • [key: string]: any

      Returns void

    • returns a new dom query containing only the first element max

      Parameters

      • func: ((item: DomQuery, cnt?: number) => any) = ...

        a an optional callback function to perform an operation on the first element

          • (item: DomQuery, cnt?: number): any
          • Parameters

            Returns any

      Returns DomQuery

    • perform an operation on the first element returns a DomQuery on the first element only

      Parameters

      • func: ((item: Element, cnt?: number) => any) = ...
          • (item: Element, cnt?: number): any
          • Parameters

            • item: Element
            • Optional cnt: number

            Returns any

      Returns DomQuery

    • returns the nth element as DomQuery from the internal elements note if you try to reach a non-existing element position you will get back an absent entry

      Parameters

      • index: number

        the nth index

      Returns DomQuery

    • returns the nth element as optional of an Element object

      Parameters

      • index: number

        the number from the index

      • defaults: Optional<any> = Optional.absent

        the default value if the index is overrun default Optional.absent

      Returns Optional<Element>

    • easy node traversal, you can pass a set of node selectors which are joined as direct children

      Note!!! The root nodes are not in the getIf, those are always the child nodes

      Parameters

      • Rest ...nodeSelector: string[]

      Returns DomQuery

    • global eval head appendix method no other methods are supported anymore

      Parameters

      • code: string

        the code to be evaluated

      • Optional nonce: string

        optional nonce key for higher security

      Returns DomQuery

    • global eval head appendix method no other methods are supported anymore

      Parameters

      • code: string

        the code to be evaluated

      • Optional nonce: string

        optional nonce key for higher security

      Returns DomQuery

    • Checks for an existing class in the class attributes

      Parameters

      • clazz: string

        the class to search for

      Returns boolean

    • innerHtml equivalent to jQueries html as setter the html is set and the DomQuery is given back as getter the html string is returned

      Parameters

      • Optional newInnerHTML: string

        the inner html to be inserted

      Returns DomQuery | Optional<string>

    • checks whether we have a multipart element in our children or are one

      Parameters

      • deep: boolean = false

      Returns boolean

    • should make the code clearer note if you pass a function this refers to the active DomQuery object

      Parameters

      • Optional presentRunnable: ((elem?: DomQuery) => void)

      Returns boolean

    • returns true if the elements have the tag tagName as tag embedded ( highest level )

      Parameters

      • tagName: string

      Returns boolean

    • returns a new dom query containing only the first element max

      Parameters

      • func: ((item: DomQuery, cnt?: number) => any) = ...

        a an optional callback function to perform an operation on the first element

          • (item: DomQuery, cnt?: number): any
          • Parameters

            Returns any

      Returns DomQuery

    • perform an operation on the first element returns a DomQuery on the first element only

      Parameters

      • func: ((item: Element, cnt?: number) => any) = ...
          • (item: Element, cnt?: number): any
          • Parameters

            • item: Element
            • Optional cnt: number

            Returns any

      Returns DomQuery

    • loads and evaluates a script from a source uri

      Parameters

      • src: string

        the source to be loaded and evaluated

      • delay: number = 0

        in milliseconds execution default (0 == no delay)

      • Optional nonce: string

        optional nonce value to allow increased security via nonce crypto token

      Returns DomQuery

    • loads and evaluates a script from a source uri

      Parameters

      • src: string

        the source to be loaded and evaluated

      • delay: number = 0

        in milliseconds execution default (0 == no delay)

      • Optional nonce: string

        optional nonce parameter for increased security via nonce crypto token

      Returns DomQuery

    • looks ahead cnt without changing the internal data "pointers" of the data source (this is mostly needed by possibly infinite constructs like lazy streams, because they do not know by definition their boundaries)

      Returns

      either the element or ITERATION_STATUS.EO_STRM if we hit the end of the stream before finding the "cnt" element

      Parameters

      • cnt: number = 1

        the elements to look ahead

      Returns DomQuery | ITERATION_STATUS

    • checks whether any item in this domQuery level matches the selector if there is one element only attached, as root the match is only performed on this element.

      Parameters

      • selector: string

      Returns boolean

    • in case the DomQuery is pointing to nothing the else value is taken into consideration als alternative

      Parameters

      • Rest ...elseValue: any

        the else value

      Returns DomQuery

    • the same with lazy evaluation for cases where getting the else value is a heavy operation

      Parameters

      • func: (() => any)

        the else provider function

          • (): any
          • Returns any

      Returns DomQuery

    • outerHTML convenience method browsers only support innerHTML but for instance for your jsf.js we have a full replace pattern which needs outerHTML processing

      Parameters

      • markup: string

        the markup which should replace the root element

      • Optional runEmbeddedScripts: boolean

        if true the embedded scripts are executed

      • Optional runEmbeddedCss: boolean

        if true the embedded css are executed

      • deep: boolean = false

        should this also work for shadow dom (run scripts etc...)

      Returns DomQuery

    • a deep search which treats the single isolated shadow dom areas separately and runs the query on each shadow dom

      Parameters

      • queryStr: string

      Returns DomQuery

    • Parameters

      • name: string

      Returns void

    • removes an event listener

      Parameters

      • type: string
      • listener: ((evt: Event) => void)
          • (evt: Event): void
          • Parameters

            • evt: Event

            Returns void

      • Optional options: boolean | EventListenerOptions

      Returns DomQuery

    • Run through the given nodes in the DomQuery execute the inline scripts

      Parameters

      • sticky: boolean = false

        if set to true the evaluated elements will stick to the head, default false

      • whitelisted: ((val: string) => boolean) = DEFAULT_WHITELIST
          • (val: string): boolean
          • Parameters

            • val: string

            Returns boolean

      Returns DomQuery

    • style accessor

      Parameters

      • cssProperty: string
      • defaultValue: string = null

        the default value in case nothing is presented (defaults to null)

      Returns Style

    • helper to fix a common dom problem we have to wait until a certain condition is met, in most of the cases we just want to know whether an element is present in the sub dom-tree before being able to proceed

      Parameters

      • condition: ((element: DomQuery) => boolean)
      • options: WAIT_OPTS = ...

      Returns Promise<DomQuery>

    • byId producer

      Returns

      a DomQuery containing the found elements

      Parameters

      • selector: string | Element | DomQuery

        id

      • deep: boolean = false

        true if you want to go into shadow areas

      Returns DomQuery

    • builds the ie nodes properly in a placeholder and bypasses a non script insert bug that way

      Parameters

      • markup: string

        the markup code to be executed from

      Returns DomQuery

    • Parameters

      • ctrl: any

      Returns number

    • easy query selector all producer

      Returns

      a results dom query object

      Parameters

      • selector: string

        the selector

      Returns DomQuery

    • sets the caret position

      Parameters

      • ctrl: any

        the control to set the caret position to

      • pos: number

        the position to set

        note if the control does not have any selectable and focusable behavior calling this method does nothing (silent fail)

      Returns void

    Generated using TypeDoc