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
    • various environments handle the global variable different we have to deal with this.

      Returns any | null

Accessors

  • get checked(): boolean
  • Returns boolean

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

    • newChecked: boolean

    Returns void

  • get disabled(): boolean
  • disabled flag

    Returns boolean

  • set disabled(disabled: boolean): void
  • Parameters

    • disabled: boolean

    Returns void

  • get global(): any
  • 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 inputValue(): ValueEmbedder<string | boolean>
  • convenience property for value

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

    Returns ValueEmbedder<string | boolean>

  • get lazyStream(): LazyStream<DomQuery>
  • fetches a lazy stream representation lazy should be applied if you have some filters etc. in between, this can reduce the number of post filter operations and ram usage significantly because the operations are done lazily and stop once they hit a dead end.

    Returns LazyStream<DomQuery>

  • get length(): number
  • length of the entire query set

    Returns number

  • get name(): ValueEmbedder<string>
  • convenience property for name

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

    Returns ValueEmbedder<string>

  • get nodeId(): string
  • Returns string

  • set nodeId(value: string): void
  • Parameters

    • value: string

    Returns void

  • get offsetHeight(): number
  • Returns number

  • get offsetLeft(): number
  • Returns number

  • get offsetTop(): number
  • Returns number

  • get offsetWidth(): number
  • Returns number

  • 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
  • Returns string | boolean

  • set val(value: string | boolean): void
  • Parameters

    • value: string | boolean

    Returns void

  • get values(): Element[]
  • Returns Element[]

Methods

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

    Returns Iterator<DomQuery, any, undefined>

  • appends a class string if not already in the element(s)

    Parameters

    • clazz: string

      the style class to append

    Returns DomQuery

  • Parameters

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

          • evt: Event

          Returns void

    • Optional options: boolean | EventListenerOptions

    Returns DomQuery

  • returns the value array< of all elements

    Returns Element[]

  • find all parents in the hierarchy for which the selector matches

    Parameters

    • selector: string

    Returns DomQuery

  • appends the current set of elements to the element or first element passed via elem

    Parameters

    Returns DomQuery

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

  • 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

  • Standard dispatch event method, delegated from node

    Parameters

    • evt: Event

    Returns 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: Config = ...

      optional config which can be merged in

    Returns Config

  • 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

  • Parameters

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

          • item: Element
          • Optional cnt: number

          Returns any

    Returns DomQuery

  • finds the first parent in the hierarchy for which the selector matches

    Parameters

    • selector: string

    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>

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

    Parameters

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

    Returns DomQuery

  • Parameters

    • joinString: string = ""

    Returns string

  • absent no values reached?

    Returns boolean

  • 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

  • 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

  • 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

  • returns the next element in the stream difference to next is, that the internal data position is not changed, so next still will deliver the next item from the current data position. Look ahead is mostly needed internally by possible endless data constructs which have no fixed data boundary, or index positions. (aka infinite sets, or flatmapped constructs)

    Parameters

    • cnt: number = 1

    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

  • Parameters

    • func: (() => any)
        • (): 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

  • fetches all parents as long as the filter criterium matches

    Parameters

    • selector: string

    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

  • remove the style class if in the class definitions

    Parameters

    • clazz: string

    Returns DomQuery

  • Parameters

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

          • evt: Event

          Returns void

    • Optional options: boolean | EventListenerOptions

    Returns DomQuery

  • replace convenience function, replaces one or more elements with a set of elements passed as DomQuery

    Parameters

    • toReplace: DomQuery

      the replaced nodes as reference (original node has been replaced)

    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

  • Parameters

    • cssProperty: string
    • defaultValue: string = null

    Returns Style

  • Parameters

    • from: number
    • Optional to: number

    Returns DomQuery

  • Parameters

    • joinString: string = ""

    Returns string

  • 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