Options
All
  • Public
  • Public/Protected
  • All
Menu

Class xjs_HTMLOListElement

Hierarchy

Index

Constructors

constructor

Properties

Static NodeType

NodeType: NodeType = NodeType

Accessors

node

  • get node(): dev_HTMLOListElement

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 <ol> element must have a <template> child, which in turn has a single child that is an <li>.

    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 <li> 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_HTMLOListElement(document.querySelector('ol')) .populate(data, function (f, d, o) { f.querySelector('a').href = d.url f.querySelector('a').textContent = d.text }) new xjs_HTMLOListElement(document.querySelector('ol')) .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 <ol> does not contain a <template>, or if that <template> does not contain exactly 1 <li>.

    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

Static template

  • summary

    Return a new xjs.HTMLTemplateElement object that renders a <ol> filled with <li>s.

    example

    const my_tpl = (await xjs.HTMLOListElement.template()) .exe(function () { new xjs.HTMLUListElement(this.content().querySelector('ol')).addClass('o-List') new xjs.HTMLLIElement(this.content().querySelector('template').content.querySelector('li')).addClass('o-List__Item') }) .setRenderer(function (frag, data, opts) { new xjs.HTMLOListElement(frag.querySelector('ol')).populate(data, function (f, d, o) { f.querySelector('li').append(d) }, null, opts) }) my_tpl.render([1,2,3,4,5]) // returns: // html // <ol class="o-List"> // <template> // <li class="o-List__Item">1</li> // <li class="o-List__Item">2</li> // <li class="o-List__Item">3</li> // <li class="o-List__Item">4</li> // <li class="o-List__Item">5</li> // </template> // </ol> //

    Returns Promise<xjs_HTMLTemplateElement>

    a template rendering a <ol> element

Static templateSync

Generated using TypeDoc