Options
All
  • Public
  • Public/Protected
  • All
Menu

Class xjs_HTMLTableSectionElement

Wrapper for HTML thead, tfoot, and tbody elements.

see

https://www.w3.org/TR/html52/tabular-data.html#htmltablesectionelement

Hierarchy

Index

Constructors

constructor

Properties

Static NodeType

NodeType: NodeType = NodeType

Accessors

node

  • get node(): dev_HTMLTableSectionElement

tagName

  • get tagName(): string

Methods

addClass

  • addClass(...tokens: string[]): this
  • summary

    Append one or more tokens to this element’s [class] attribute.

    description

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

    example

    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

append

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

    ParentNode#append, but returns this object when done.

    description

    This method exists simply for chaining.

    example

    let strong = document.createElement('strong') strong.textContent = 'hello' let em = document.createElement('em') let mark = document.createElement('mark')

    let snippet = new xjs.Element(document.createElement('div')) .append(...[ strong, // DOM Node to the, // string new Comment(great), // DOM Node <small>big</small>, // string with HTML new xjs.Element(em).addContent(world).node, // DOM Node (unwrapped) null, // null new xjs.Element(mark).addContent(!), // wrapped DOM Node ]).innerHTML() return snippet === <strong>hello</strong> to the <!--great--><small>big</small> <em>world</em><mark>!</mark>

    todo

    TODO xjs.ParentNode#append

    see

    https://dom.spec.whatwg.org/#dom-parentnode-append

    Parameters

    • Rest ...contents: Content[]

      the contents to append

    Returns this

    this

attr

  • attr(): this
  • attr(attr: string): string | null
  • attr(attr: string, value: ValueType): this
  • attr(attr: string, value: ValueFunction, this_arg?: any): this
  • attr(attr: ValueObject | null): this
  • summary

    Get and set attributes of this element.

    description

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

    Returns this

    this

  • summary

    Get an attribute of this element.

    description

    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.

    example

    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 the empty string 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)

  • summary

    Set or remove an attribute of this element.

    description

    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.

    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 })
      
    example

    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

    throws

    {RangeError} if the empty string is passed as the attribute name

    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

  • summary

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

    description

    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.

    example

    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

    throws

    {RangeError} if the empty string 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: any

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

    Returns this

    this

  • summary

    Set or remove attributes of this element.

    description

    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.

    example

    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

class

  • Returns string | null

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

  • summary

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

    description

    This method exists simply for chaining. This method also takes arguments usable in {@link xjs_Element#attr}.

    example

    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

  • summary

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

    description

    This method exists simply for chaining. This method also takes arguments usable in {@link xjs_Element#attr}.

    example

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

      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?: any): this
  • data(data_attr: ValueObject | null): this
  • summary

    HTMLElement#dataset, with extended functionality.

    description

    This method is similar to {@link 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 {@link 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 {@link xjs_Element#attr} method instead, and pass 'data-has-js' as the attribute name.

    Returns this

    this

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

    example

    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 the empty string 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)

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

    example

    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.attr('', 42) // throws, since '' is not an attribute

    see

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

    throws

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

    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

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

    example

    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

    see

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

    throws

    {RangeError} if the empty string 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: any

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

    Returns this

    this

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

    example

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

    Execute a function acting on this node, and then return this node.

    description

    Simplifies chaining when performing void tasks, especially tasks that have not been defined in this implementation.

    Parameters

    • executable: function

      any function that takes 0 arguments and returns undefined (or does not have a return statement)

    Returns this

    this

hidden

id

  • Returns string | null

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

  • summary

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

    description

    This method exists simply for chaining. This method also takes arguments usable in {@link xjs_Element#attr}.

    example

    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

  • summary

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

    description

    This method exists simply for chaining. This method also takes arguments usable in {@link xjs_Element#attr}.

    example

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

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

    Returns this

    this

innerHTML

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

lang

outerHTML

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

populate

  • populate(dataset: any[], renderer?: RenderingFunction, this_arg?: any, options?: object): this
  • summary

    Populate this list with items containing data.

    description

    This method appends items to the end of this list. The items are the result of rendering the given data. In order to determine how the data is rendered, this <thead/tfoot/tbody> element must have a <template> child, which in turn has a single child that is an <tr>.

    Notes:

    • This element may contain multiple <template> children, but this method uses only the first one.
    • This element may also already have any number of <tr> children; they are not affected.
    example

    let {document} = new jsdom.JSDOM(`

    ).window let data = [ { "url": "#0", "text": "Career Connections" }, { "url": "#1", "text": "Getting Licensed & Certified" }, { "url": "#2", "text": "Career resources" }, { "url": "#3", "text": "Code of Ethics" } ] new xjs_HTMLTableSectionElement(document.querySelector('tbody')) .populate(data, function (f, d, o) { f.querySelectorAll('td')[0].textContent = d.url f.querySelectorAll('td')[1].textContent = d.text }) new xjs_HTMLTableSectionElement(document.querySelector('tbody')) .populate(data, function (f, d, o) { // some code involvingthis` }, other_context)

    todo

    WARNING: in the next breaking release (v5), the order of params will be: dataset, renderer, options, this_arg

    todo

    WARNING: in the next breaking release (v5), param renderer will be required

    throws

    {ReferenceError} if this <thead/tfoot/tbody> does not contain a <template>, or if that <template> does not contain exactly 1 <tr>.

    Parameters

    • dataset: any[]

      any array of things

    • Default value renderer: RenderingFunction = (f,d,o) => {}

      a typical rendering function

    • Default value this_arg: any = this

      provide a this context to the rendering function

    • Default value options: object = {}

      additional rendering options for all items

    Returns this

    this

    prepend

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

      ParentNode#prepend, but returns this object when done.

      description

      This method exists simply for chaining.

      example

      let strong = document.createElement('strong') strong.textContent = 'hello' let em = document.createElement('em') let mark = document.createElement('mark')

      let snippet = new xjs.Element(document.createElement('div')) .prepend(...[ strong, // DOM Node to the, // string new Comment(great), // DOM Node <small>big</small>, // string with HTML new xjs.Element(em).addContent(world).node, // DOM Node (unwrapped) null, // null new xjs.Element(mark).addContent(!), // wrapped DOM Node ]).innerHTML() return snippet === <strong>hello</strong> to the <!--great--><small>big</small> <em>world</em><mark>!</mark>

      todo

      TODO xjs.ParentNode#prepend

      see

      https://dom.spec.whatwg.org/#dom-parentnode-prepend

      Parameters

      • Rest ...contents: Content[]

        the contents to prepend

      Returns this

      this

    removeClass

    • removeClass(...tokens: string[]): this
    • summary

      Remove one or more tokens from this element’s [class] attribute.

      description

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

      example

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

      Replace a segment of this element’s class string with a new string segment.

      example

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

      Parameters

      • old_: string

        the segment of this element’s [class] attribute value to remove

      • new_: string

        the string with which to replace the removed segment

      Returns this

      this

    style

    • style(): this
    • style(prop: string): string | null
    • style(prop: string, value: ValueType): this
    • style(prop: string, value: ValueFunction, this_arg?: any): this
    • style(prop: ValueObject | null): this
    • summary

      HTMLElement#style, with extended functionality.

      description

      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

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

      example

      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 the empty string 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)

    • If the key is a string and the value is a non-null ValueType type, except for the empty string '', 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 the empty string '', then the CSS property identified by the key is removed from this element.

      example

      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

      see

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

      throws

      {RangeError} if the empty string is passed as the property name

      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

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

      example

      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

      see

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

      throws

      {RangeError} if the empty string 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: any

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

      Returns this

      this

    • 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 to remove).

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

      example

      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

    textContent

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

    title

    trimInner

    • trimInner(): this
    • summary

      Remove all inner whitespace text nodes from this node, and return it.

      example

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

      Returns this

      this

    Legend

    • Module
    • Object literal
    • Variable
    • Function
    • Function with type parameter
    • Index signature
    • Type alias
    • Enumeration
    • Enumeration member
    • Property
    • Method
    • Interface
    • Interface with type parameter
    • Constructor
    • Property
    • Method
    • Index signature
    • Class
    • Class with type parameter
    • Constructor
    • Property
    • Method
    • Accessor
    • Index signature
    • Inherited constructor
    • Inherited property
    • Inherited method
    • Inherited accessor
    • Protected property
    • Protected method
    • Protected accessor
    • Private property
    • Private method
    • Private accessor
    • Static property
    • Static method

    Generated using TypeDoc