Options
All
  • Public
  • Public/Protected
  • All
Menu

Class xjs_HTMLTableCellElement

Hierarchy

Implements

Index

Constructors

constructor

Accessors

node

  • get node(): HTMLTableCellElement

tagName

  • get tagName(): string

Methods

addClass

  • addClass(...tokens: string[]): this
  • Append one or more tokens to this element’s [class] attribute.

    Argument(s) can also be space-separated tokens.

    this.addClass('o-Object', 'c-Component')          // add token(s) to the [class] attribute
    this.addClass('o-Object c-Component', 'h-Helper') // spaces are allowed; they will just be split
    this.addClass('')                                 // do nothing; return `this`
    this.addClass()                                   // do nothing; return `this`

    Parameters

    • Rest ...tokens: string[]

      the classname(s) to add

    Returns this

    this

after

  • after(...contents: Content[]): this

append

  • append(...contents: Content[]): this

attr

  • attr(): this
  • attr(attr: string): string | null
  • attr(attr: string, value: ValueType): this
  • attr(attr: string, value: ValueFunction, this_arg?: unknown): this
  • attr(attr: ValueObject | null): this
  • Get and set attributes of this element.

    If no argument is provided, this method does nothing and returns this.

    Returns this

    this

  • Get an attribute of this element.

    If the key is a string and the value is not provided (or undefined), then this method returns the string value of the attribute identified by the key. If the attribute exists but is a boolean attribute, the empty string '' is returned. If no such attribute exists, then null is returned.

    If the key is '', this method throws an error.

    this.attr('itemtype') // get the value of the attribute (or `null` if it had not been set)
    this.attr('')         // throws, since `''` is not an attribute
    throws

    {RangeError} if '' is passed as the attribute name

    Parameters

    • attr: string

      the name of the attribute to get (nonempty string)

    Returns string | null

    the value of the attribute specified (or null if that attribute hasn’t been set)

  • Set or remove an attribute of this element.

    If the key given is a string, and the value is a non-null ValueType type, then the attribute will be set (or modified) with the result of the value.

    If the key is a string and the value is null, then the attribute identified by the key is removed from this element.

    If the value is NaN, this method throws an error.

    Notes:

    • If the attribute is a boolean attribute and is present (such as [checked=""]), provide the empty string '' as the value.
    • Since this method returns this, it can be chained, e.g.,
      my_elem.attr('itemscope', '').attr('itemtype','Thing').attr('itemprop', null)
      However, it may be simpler to use an object argument:
      my_elem.attr({ itemscope:'', itemtype:'Thing', itemprop:null })
    this.attr('itemtype', 'Person') // set an attribute (string)
    this.attr('data-nthchild', 3)   // set an attribute (number)  (the value will be `"3"`)
    this.attr('data-block', true)   // set an attribute (boolean) (the value will be `"true"`)
    this.attr('itemscope', '')      // set a boolean attribute
    this.attr('itemprop', null)     // remove an attribute
    this.attr('', 42)               // throws, since `''` is not an attribute
    this.attr('data-nthchild', NaN) // throws, since `NaN` is not permitted
    throws

    {RangeError} if '' is passed as the attribute name

    throws

    {NaNError} if NaN is passed as the attribute value

    Parameters

    • attr: string

      the name of the attribute to set (nonempty string)

    • value: ValueType

      the value to assign to the attribute, or null to remove it

    Returns this

    this

  • Set or remove an attribute of this element, using a function.

    If the key given is a string, and the value is a ValueFunction type, then the attribute will be set (or modified) with the result of the given function.

    this.attr('data-id', function () { return this.id() })                    // set an attribute using a function in this xjs.Element’s context
    this.attr('data-id', function () { return this.id }, { id: 'custom-id' }) // set an attribute using a function in another given context
    this.attr(''       , function () {})                                      // throws, since `''` is not an attribute
    this.attr('data-id', function () { return NaN })                          // throws, since `NaN` is not permitted
    throws

    {RangeError} if '' is passed as the attribute name

    Parameters

    • attr: string

      the name of the attribute to set (nonempty string)

    • value: ValueFunction

      the function to call when assigning a value to the attribute

    • Optional this_arg: unknown

      optionally pass in another object to use as this inside the given function

    Returns this

    this

  • Set or remove attributes of this element, using an object.

    If an object is provided as the key, then no argument may be provided as the value. The object must have values of the ValueType type; thus for each key-value pair in the object, this method assigns corresponding attributes. You may use this method with a single object argument to set and/or remove multiple attributes (using null to remove).

    If the key is {} or null, this method does nothing and returns this.

    this.attr({            // set/remove multiple attributes all at once
      itemprop : 'name',
      itemscope: '',
      itemtype : 'Person',
      'data-id': null,
    })
    this.attr({})   // do nothing; return `this`
    this.attr(null) // do nothing; return `this`

    Parameters

    Returns this

    this

before

  • before(...contents: Content[]): this

class

  • Returns string | null

    the value of the class attribute, or null if it had not been set

  • Set Element#className, and return this object when done.

    This method exists simply for chaining. This method also takes arguments usable in xjs_Element.attr.

    this.class('o-Object c-Component') // set the [class] attribute (string)
    this.class(42)                     // set the [class] attribute (number)  (the value will be `"42"`)
    this.class(false)                  // set the [class] attribute (boolean) (the value will be `"false"`)
    this.class('')                     // set the [class] attribute to the empty string: `[class=""]`
    this.class(null)                   // remove the [class] attribute

    Parameters

    • value: ValueType

      the value to set for the class attribute, or null to remove it

    Returns this

    this

  • Set Element#className, and return this object when done.

    This method exists simply for chaining. This method also takes arguments usable in xjs_Element.attr.

    this.class(function () { return this.tagName })                             // set the [class] attribute using a function in this xjs.Element’s context
    this.class(function () { return this.tagName }, { tagName: 'custom-name' }) // set the [class] attribute using a function in another given context

    Parameters

    • value: ValueFunction

      the function to call when assigning a value to the attribute

    • Optional this_arg: unknown

      optionally pass in another object to use as this inside the given function

    Returns this

    this

data

  • data(): this
  • data(data_attr: string): string | null
  • data(data_attr: string, value: ValueType): this
  • data(data_attr: string, value: ValueFunction, this_arg?: unknown): this
  • data(data_attr: ValueObject | null): this
  • HTMLElement#dataset, with extended functionality.

    This method is similar to xjs_Element.attr in that it sets/gets attributes, except that this method only sets/gets attributes starting with the data- prefix, and that the attribute names passed to this method differ from the those passed to xjs_Element.attr.

    If no argument is provided, this method does nothing and returns this.

    When the given key is a string, it represents the data- attribute to get. It must not include the prefix 'data-', and it must be given in camelCase format (e.g. 'hasJs'), as specified in HTML 5.2 | DOMStringMap setter. Note that if you wish to use the HTML attribute syntax kebab-case format, as specified in HTML 5.2 | custom data attributes, you should use the xjs_Element.attr method instead, and pass 'data-has-js' as the attribute name.

    Returns this

    this

  • Get a data- attribute of this element.

    If the key is a string and the value is not provided (or undefined), then this method returns the string value of the data- attribute identified by the key. If the attribute exists but is a boolean attribute, the empty string '' is returned. If no such attribute exists, then null is returned.

    If the key is '', this method throws an error.

    this.data('instanceOf') // get the value of the `[data-instance-of]` attribute (`null` if it had not been set)
    this.data('')           // throws, since `''` is not an attribute
    see

    https://www.w3.org/TR/html52/dom.html#dom-htmlelement-dataset

    throws

    {RangeError} if '' is passed as the data-attribute name

    Parameters

    • data_attr: string

      the suffix of the [data-*] attribute to get (nonempty string)

    Returns string | null

    the value of the attribute specified (or null if that attribute hasn’t been set)

  • Set or remove a data- attribute of this element.

    If the key is a string and the value is a non-null ValueType type, then the data- attribute will be set (or modified) with the result of the given value.

    If the key is a string and the value is null, then the data- attribute identified by the key is removed from this element.

    If the value is NaN, this method throws an error.

    this.data('typeof', 'my type')  // set the `[data-typeof]` attribute (string)
    this.data('typeof', 42)         // set the `[data-typeof]` attribute (number)  (the value will be `"42"`)
    this.data('typeof', true)       // set the `[data-typeof]` attribute (boolean) (the value will be `"true"`)
    this.data('typeOf', 'my type')  // set the `[data-type-of]` attribute
    this.data('type-of', 'my type') // ERROR! "Uncaught DOMException: Failed to set the 'type-of' property on 'DOMStringMap': 'type-of' is not a valid property name."
    this.data('ID', 'my-id')        // set the `[data--i-d]` attribute *(probably not intended)*
    this.data('typeOf', '')         // set the `[data-type-of]` attribute to the empty string: `[data-type-of=""]`
    this.data('instanceOf', null)   // remove the `[data-instance-of]` attribute
    this.data('', 42)               // throws, since `''` is not an attribute
    this.data('typeof', NaN)        // throws, since `NaN` is not permitted
    see

    https://www.w3.org/TR/html52/dom.html#dom-htmlelement-dataset

    throws

    {RangeError} if '' is passed as the data-attribute name

    throws

    {Error} if NaN is passed as the data-attribute value

    Parameters

    • data_attr: string

      the suffix of the [data-*] attribute to set (nonempty string)

    • value: ValueType

      the value to assign to the attribute, or null to remove it

    Returns this

    this

  • Set or remove a data- attribute of this element, using a function.

    If the key is a string and the value is a ValueFunction type, then the data- attribute will be set (or modified) with the result of the given function.

    this.data('id', function () { return this.id() })                    // set the `[data-id]` attribute using a function in this xjs.HTMLElement’s context
    this.data('id', function () { return this.id }, { id: 'custom-id' }) // set the `[data-id]` attribute using a function in another given context
    this.data(''  , function () {})                                      // throws, since `''` is not an attribute
    this.data('id', function () { return NaN })                          // throws, since `NaN` is not permitted
    see

    https://www.w3.org/TR/html52/dom.html#dom-htmlelement-dataset

    throws

    {RangeError} if '' is passed as the data-attribute name

    Parameters

    • data_attr: string

      the suffix of the [data-*] attribute to set (nonempty string)

    • value: ValueFunction

      the function to call when assigning a value to the attribute

    • Optional this_arg: unknown

      optionally pass in another object to use as this inside the given function

    Returns this

    this

  • Set or remove a data- attribute of this element, using an object.

    If an object is provided as the key, then no argument may be provided as the value. The object’s keys must be in camelCase format, as if each key were passed separately. The object must have values of the ValueType type; thus for each key-value pair in the object, this method assigns corresponding data- attributes. You may use this method with a single object argument to set and/or remove multiple attributes (using null to remove).

    If the key is {} or null, this method does nothing and returns this.

    this.data({         // set/remove multiple `[data-*]` attributes all at once
      prop  : 'name',
      scope : '',
      typeOf: 'Person',
      id    : null,
    })
    this.data({})   // do nothing; return `this`
    this.data(null) // do nothing; return `this`
    see

    https://www.w3.org/TR/html52/dom.html#dom-htmlelement-dataset

    Parameters

    Returns this

    this

dir

empty

  • empty(): this

exe

  • exe(executable: function): this
  • deprecated

    DEPRECATED: Use .run() instead. Execute a function acting on this node, and then return this node.

    Simplifies chaining when performing void tasks, especially tasks that have not been defined in this implementation. Note that this function is not asynchronous, and does not accept asynchronous arguments.

    Parameters

    • executable: function

      the function to call in the context of this

        • (this: this): void
        • Parameters

          • this: this

          Returns void

    Returns this

    this

headers

  • headers(): string | null
  • headers(val: ValueType): this
  • headers(val: ValueFunction, this_arg?: unknown): this

hidden

id

  • Returns string | null

    the value of the id attribute, or null if it had not been set

  • Set Element#id, and return this object when done.

    This method exists simply for chaining. This method also takes arguments usable in xjs_Element.attr.

    this.id('section1') // set the [id] attribute (string)
    this.id(42)         // set the [id] attribute (number)  (the value will be `"42"`)
    this.id(false)      // set the [id] attribute (boolean) (the value will be `"false"`)
    this.id('')         // set the [id] attribute to the empty string: `[id=""]`
    this.id(null)       // remove the [id] attribute

    Parameters

    • value: ValueType

      the value to set for the id attribute, or null to remove it

    Returns this

    this

  • Set Element#id, and return this object when done.

    This method exists simply for chaining. This method also takes arguments usable in xjs_Element.attr.

    this.id(function () { return this.tagName })                             // set the [id] attribute using a function in this xjs.Element’s context
    this.id(function () { return this.tagName }, { tagName: 'custom-name' }) // set the [id] attribute using a function in another given context

    Parameters

    • value: ValueFunction

      the function to call when assigning a value to the attribute

    • Optional this_arg: unknown

      optionally pass in another object to use as this inside the given function

    Returns this

    this

ifElse

  • ifElse(condition: any, onResolve: function, onReject?: function): this
  • deprecated

    DEPRECATED: Use .select() instead. Execute a function based on a condition.

    Given a condition, execute one function upon passing, or execute another upon failure. Note that this function is not asynchronous, and does not accept asynchronous arguments.

    Parameters

    • condition: any

      the condition to evaluate; will be converted to boolean

    • onResolve: function

      the executable to call (in the context of this) if the condition is truthy

        • (this: this): void
        • Parameters

          • this: this

          Returns void

    • Default value onReject: function = () => {}

      the executable to call (in the context of this) if the condition is falsy

        • (this: this): void
        • Parameters

          • this: this

          Returns void

    Returns this

    this

innerHTML

  • innerHTML(): string
  • innerHTML(markup: string): this

lang

outerHTML

  • outerHTML(): string
  • outerHTML(markup: string): this

prepend

  • prepend(...contents: Content[]): this

querySelector

querySelectorAll

removeClass

  • removeClass(...tokens: string[]): this
  • Remove one or more tokens from this element’s [class] attribute.

    Argument(s) can also be space-separated tokens.

    this.removeClass('o-Object', 'c-Component')          // remove token(s) from the [class] attribute
    this.removeClass('o-Object c-Component', 'h-Helper') // spaces are allowed; they will just be split
    this.removeClass('')                                 // do nothing; return `this`
    this.removeClass()                                   // do nothing; return `this`

    Parameters

    • Rest ...tokens: string[]

      classname(s) to remove

    Returns this

    this

replaceClassString

  • replaceClassString(old_: string, new_: string): this
  • Replace a segment of this element’s class string with a new string segment.

    Note: this is not the same as replacing one class token for another. For that, use this.node.classList.replace(old_, new_).

    let element = jsdom.JSDOM.fragment(`<i class="glyphicons glphicons-{{ icon }}"></i>`).querySelector('i')
    new xjs.Element(element).replaceClassString('{{ icon }}', 'mobile')
    element.outerHTML // <i class="glyphicons glphicons-mobile"></i>

    Parameters

    • old_: string

      the segment of this element’s [class] attribute value to remove; might not be a complete token

    • new_: string

      the string with which to replace the removed segment

    Returns this

    this

run

  • run(callback: function): this
  • Execute a callback acting on this node, and then return this node.

    Simplifies chaining when performing void tasks, especially tasks that have not been defined in this implementation. Note that this function is not asynchronous, and does not accept asynchronous arguments.

    Parameters

    • callback: function

      the function to call, taking this as its only argument, and returning void

        • (arg: this): void
        • Parameters

          • arg: this

          Returns void

    Returns this

    this

select

  • select(condition: unknown, onTrue: function, onFalse?: function): this
  • Execute a function based on a condition.

    Given a condition, execute one function upon passing, or execute another upon failure. Note that this function is not asynchronous, and does not accept asynchronous arguments.

    Parameters

    • condition: unknown

      the condition to evaluate; will be converted to boolean

    • onTrue: function

      the callback to call (with this as its parameter) if the condition is truthy

        • (arg: this): void
        • Parameters

          • arg: this

          Returns void

    • Default value onFalse: function = () => {}

      the callback to call (with this as its parameter) if the condition is falsy

        • (arg: this): void
        • Parameters

          • arg: this

          Returns void

    Returns this

    this

style

  • style(): this
  • style(prop: string): string | null
  • style(prop: string, value: ValueType): this
  • style(prop: string, value: ValueFunction, this_arg?: unknown): this
  • style(prop: ValueObject | null): this
  • HTMLElement#style, with extended functionality.

    This method manipulates an element’s associated CSSStyleDeclaration object.

    If no argument is provided, this method does nothing and returns this.

    When the given key is a string, it represents the CSS property name to get. It must be given in kebab-case format (e.g. 'text-align'), as specified in CSS 2.1 | Declarations and properties.

    Returns this

    this

  • Get a style of this element.

    If the key is a string and the value is not provided (or undefined), then this method returns the string value of the CSS property identified by the key. If no such property exists, then null is returned. (Note that css properties default to the unset value---either inherit or initial, depending on whether the property is inherited or not.)

    If the key is '', this method throws an error.

    this.style('text-align') // get the value of the `text-align` property (or `null` if it had not been set)
    this.style('')           // throws, since `''` is not a property
    see

    https://www.w3.org/TR/cssom-1/#dom-elementcssinlinestyle-style

    throws

    {RangeError} if '' is passed as the property name

    Parameters

    • prop: string

      the name of the css property to get (nonempty string)

    Returns string | null

    the value of the property specified (or null if that property hasn’t been set)

  • Set or remove a style of this element.

    If the key is a string and the value is a non-null or non-empty string ValueType type, then the CSS property will be set (or modified) with the result of the given value.

    If the key is a string and the value is null or '', then the CSS property identified by the key is removed from this element.

    If the value is NaN, this method throws an error.

    this.style('background', 'red')     // set the `background` property (string) (the value will be `red`)
    this.style('opacity', 0.5)          // set the `opacity` property (number)
    this.style('content', false)        // set the `content` property (boolean)
    this.style('content', '\'truthy\'') // set the `content` property (quoted string, must be escaped) (the value will be `'truthy'`)
    this.style('content', '"truthy"')   // or you could use double-quotes
    this.style('content', `'truthy'`)   // or you could use a template literal
    this.style('font-weight', 'bold')   // set the `font-weight` property
    this.style('font-style', null)      // remove the `font-style` property
    this.style('font-style', '')        // remove the `font-style` property // *note that this syntax differs from the typical syntax shown by xjs.Element#attr
    this.attr('', 42)                   // throws, since `''` is not a property
    this.style('opacity', NaN)          // throws, since `NaN` is not permitted
    see

    https://www.w3.org/TR/cssom-1/#dom-elementcssinlinestyle-style

    throws

    {RangeError} if '' is passed as the property name

    throws

    {NaNError} if NaN is passed as the property value

    Parameters

    • prop: string

      the name of the css property to set (nonempty string)

    • value: ValueType

      the value to assign to the property, or null or '' to remove it

    Returns this

    this

  • Set or remove a style of this element, using a function.

    If the key is a string and the value is a ValueFunction type, then the CSS property will be set (or modified) with the result of the given function.

    this.style('justify-content', function () { return this.data('jc') })                 // set the `justify-content` property using a function in this xjs.HTMLElement’s context
    this.style('justify-content', function () { return this.jc }, { jc: 'space-around' }) // set the `justify-content` property using a function in another given context
    this.style(''               , function () {})                                         // throws, since `''` is not a property
    this.style('justify-content', function () { return NaN })                             // throws, since `NaN` is not permitted
    see

    https://www.w3.org/TR/cssom-1/#dom-elementcssinlinestyle-style

    throws

    {RangeError} if '' is passed as the property name

    Parameters

    • prop: string

      the name of the css property to set (nonempty string)

    • value: ValueFunction

      the function to call when assigning a value to the property

    • Optional this_arg: unknown

      optionally pass in another object to use as this inside the given function

    Returns this

    this

  • Set or remove a style of this element, using an object.

    If an object is provided as the key, then no argument may be provided as the value. The object must have values of the ValueType type; thus for each key-value pair in the object, this method assigns corresponding CSS properties. You may use this method with a single object argument to set and/or remove multiple properties (using null or '' to remove).

    If the key is {} or null, this method does nothing and returns this.

    this.style({            // set/remove multiple properties all at once
      background  : 'red',
      margin      : '1rem',
      opacity     : 0.5,
      content     : `''`,   // sets the css `content: '';`
      visibility  : null,   // remove the `visibility` property
      'text-align': '',     // remove the `text-align` property
    })
    this.style({})   // do nothing; return `this`
    this.style(null) // do nothing; return `this`
    see

    https://www.w3.org/TR/cssom-1/#dom-elementcssinlinestyle-style

    Parameters

    Returns this

    this

tabIndex

  • tabIndex(): string | null
  • tabIndex(val: ValueType): this
  • tabIndex(val: ValueFunction, this_arg?: unknown): this

textContent

  • textContent(): string | null
  • textContent(text: string): this

title

trimInner

  • trimInner(): this
  • Remove all inner whitespace text nodes from this node, and return it.

    let div = document.createElement('div')
    div.innerHTML = `
      <h1>
        <em>Hello </em>
        <b>Worl d</b>
      </h1>
    `
    let trimmed_div = new xjs.Node(div).trimInner().node
    return div.innerHTML === `
      <h1>
        <em>Hello </em>
        <b>Worl d</b>
      </h1>
    `
      && trimmed_div.innerHTML = `<h1><em>Hello </em><b>Worl d</b></h1>`

    Returns this

    this

Generated using TypeDoc