xjs_Element | extrajs-dom

Wrapper for an Element.

see: https://www.w3.org/TR/dom/#element

Hierarchy

xjs_Node
- xjs_Element
  - xjs_HTMLElement

Implements

xjs_ParentNode

Index

Constructors

constructor

Accessors

node
tagName

Methods

Constructors

constructor

new xjs_Element(node: Element): xjs_Element

Overrides xjs_Node.constructor
- Defined in class/Element.class.ts:39
Construct a new xjs_Element object.

Parameters
- node: Element
  
  the node to wrap
Returns xjs_Element

Accessors

node

get node(): Element

Overrides xjs_Node.node
- Defined in class/Element.class.ts:50
This wrapper’s node.

Returns Element

tagName

get tagName(): string

- Defined in class/Element.class.ts:57
This element’s tag name in lowercase.

see

https://www.w3.org/TR/dom/#dom-element-tagname

Returns 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

- Defined in class/Element.class.ts:162
ChildNode#after, but return this object when done.

This method exists simply for chaining.

todo

TODO xjs.ChildNode#after

see

https://dom.spec.whatwg.org/#dom-childnode-after

Parameters
- Rest ...contents: Content[]
  
  the contents to insert after this node
Returns this

this

append

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

Implementation of xjs_ParentNode.append
- Defined in class/Element.class.ts:113
implements

xjs_ParentNode

Parameters
- Rest ...contents: Content[]
Returns 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

- Defined in class/Element.class.ts:176
Get and set attributes of this element.

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

Returns this

this
- Defined in class/Element.class.ts:196
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)
- Defined in class/Element.class.ts:235
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

- Defined in class/Element.class.ts:281
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
- attr: ValueObject | null
  
  an object with ValueType type values
Returns this

this

before

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

- Defined in class/Element.class.ts:143
ChildNode#before, but return this object when done.

This method exists simply for chaining.

todo

TODO xjs.ChildNode#before

see

https://dom.spec.whatwg.org/#dom-childnode-before

Parameters
- Rest ...contents: Content[]
  
  the contents to insert before this node
Returns this

this

class

class(): string | null
class(value: ValueType): this
class(value: ValueFunction, this_arg?: unknown): this

- Defined in class/Element.class.ts:356
Get Element#className.

see

https://www.w3.org/TR/dom/#dom-element-classname

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

- Defined in class/Element.class.ts:388
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

empty

empty(): this

Inherited from xjs_Node.empty
- Defined in class/Node.class.ts:158
Remove all child nodes from this node, and return it.

Returns this

this

exe

exe(executable: function): this

Inherited from xjs_Node.exe
- Defined in class/Node.class.ts:73
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

id

id(): string | null
id(value: ValueType): this
id(value: ValueFunction, this_arg?: unknown): this

- Defined in class/Element.class.ts:311
Get Element#id.

see

https://www.w3.org/TR/dom/#dom-element-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

- Defined in class/Element.class.ts:343
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

Inherited from xjs_Node.ifElse
- Defined in class/Node.class.ts:103
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

- Defined in class/Element.class.ts:64
Get Element#innerHTML.

see

https://www.w3.org/TR/DOM-Parsing/#widl-Element-innerHTML

Returns string

the innerHTML of this element
- Defined in class/Element.class.ts:75
deprecated

WARNING DEPRECATED - setting the innerHTML of an element is a security risk. If setting plain text, use textContent instead; if adding HTML, use other DOM manipulation methods such as append.

Set Element#innerHTML, and returns this object when done.

This method exists simply for chaining.

Parameters
- markup: string
  
  the html to set
Returns this

this

outerHTML

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

- Defined in class/Element.class.ts:88
Get Element#outerHTML.

see

https://www.w3.org/TR/DOM-Parsing/#widl-Element-outerHTML

Returns string

the outerHTML of this element
- Defined in class/Element.class.ts:97
Set Element#outerHTML, and returns this object when done.

This method exists simply for chaining.

todo

TODO: setter is not defined yet; only use this method as a getter.

Parameters
- markup: string
  
  the html to set
Returns this

this

prepend

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

Implementation of xjs_ParentNode.prepend
- Defined in class/Element.class.ts:104
implements

xjs_ParentNode

Parameters
- Rest ...contents: Content[]
Returns this

querySelector

querySelector(selector: string): xjs_Element | null

Implementation of xjs_ParentNode.querySelector
- Defined in class/Element.class.ts:122
implements

xjs_ParentNode

Parameters
- selector: string
Returns xjs_Element | null

querySelectorAll

querySelectorAll(selector: string): xjs_Element[]

Implementation of xjs_ParentNode.querySelectorAll
- Defined in class/Element.class.ts:128
implements

xjs_ParentNode

Parameters
- selector: string
Returns xjs_Element[]

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

- Defined in class/Element.class.ts:457
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

Inherited from xjs_Node.run
- Defined in class/Node.class.ts:87
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

Inherited from xjs_Node.select
- Defined in class/Node.class.ts:117
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

textContent

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

Inherited from xjs_Node.textContent
- Defined in class/Node.class.ts:48
Get Node#textContent.

see

https://www.w3.org/TR/dom/#dom-node-textcontent

Returns string | null

the textContent of this node
Inherited from xjs_Node.textContent
- Defined in class/Node.class.ts:56
Set Node#textContent, and returns this object when done.

This method exists simply for chaining.

Parameters
- text: string
  
  the content to set
Returns this

this

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

Hierarchy

Implements

Index

Constructors

Accessors

Methods

Constructors

constructor

Parameters

node: Element

Returns xjs_Element

Accessors

node

Returns Element

tagName

Returns string

Methods

addClass

Parameters

Rest ...tokens: string[]

Returns this

after

Parameters

Rest ...contents: Content[]

Returns this

append

Parameters

Rest ...contents: Content[]

Returns this

attr

Returns this

Parameters

attr: string

Returns string | null

Parameters

attr: string

value: ValueType

Returns this

Parameters

attr: string

value: ValueFunction

Optional this_arg: unknown

Returns this

Parameters

attr: ValueObject | null

Returns this

before

Parameters

Rest ...contents: Content[]

Returns this

class

Returns string | null

Parameters

value: ValueType

Returns this

Parameters

value: ValueFunction

Optional this_arg: unknown

Returns this

empty

Returns this

exe

Parameters

executable: function

Parameters

this: this

Returns void

Returns this

id

Returns string | null

Parameters

value: ValueType

Returns this

Parameters

value: ValueFunction

Optional this_arg: unknown

Returns this

ifElse

Parameters

condition: any