Construct a new xjs_HTMLMetaElement object.
the node to wrap
This wrapper’s node.
This element’s tag name in lowercase.
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`
the classname(s) to add
this
ChildNode#after, but return this object when done.
This method exists simply for chaining.
the contents to insert after this node
this
Get and set attributes of this element.
If no argument is provided, this method does nothing and 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
the name of the attribute to get (nonempty string)
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:
checked=""
]), provide the empty string ''
as the value.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
the name of the attribute to set (nonempty string)
the value to assign to the attribute, or null
to remove it
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
the name of the attribute to set (nonempty string)
the function to call when assigning a value to the attribute
optionally pass in another object to use as this
inside the given function
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`
an object with ValueType type values
this
ChildNode#before, but return this object when done.
This method exists simply for chaining.
the contents to insert before this node
this
Get Element#className.
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
the value to set for the class
attribute, or null
to remove it
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
the function to call when assigning a value to the attribute
optionally pass in another object to use as this
inside the given function
this
Reflect the content
content attribute.
the value of the attribute, or null
if it hasn’t been set
the value to set, or null
to remove
this
the function to call when setting the value
optionally pass in another object to use as this
inside the given function
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.
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
the suffix of the [data-*]
attribute to get (nonempty string)
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
the suffix of the [data-*]
attribute to set (nonempty string)
the value to assign to the attribute, or null
to remove it
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
the suffix of the [data-*]
attribute to set (nonempty string)
the function to call when assigning a value to the attribute
optionally pass in another object to use as this
inside the given function
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`
an object with ValueType type values
this
Reflect the dir
content attribute.
the value of the attribute, or null
if it hasn’t been set
the value to set, or null
to remove
this
the function to call when setting the value
optionally pass in another object to use as this
inside the given function
this
Remove all child nodes from this node, and return it.
this
the function to call in the context of this
this
Reflect the hidden
content attribute.
the value of the attribute, or null
if it hasn’t been set
the value to set, or null
to remove
this
the function to call when setting the value
optionally pass in another object to use as this
inside the given function
this
Get Element#id.
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
the value to set for the id
attribute, or null
to remove it
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
the function to call when assigning a value to the attribute
optionally pass in another object to use as this
inside the given function
this
the condition to evaluate; will be converted to boolean
the executable to call (in the context of this
) if the condition is truthy
the executable to call (in the context of this
) if the condition is falsy
this
Get Element#innerHTML.
the innerHTML
of this element
the html to set
this
Reflect the lang
content attribute.
the value of the attribute, or null
if it hasn’t been set
the value to set, or null
to remove
this
the function to call when setting the value
optionally pass in another object to use as this
inside the given function
this
Reflect the name
content attribute.
the value of the attribute, or null
if it hasn’t been set
the value to set, or null
to remove
this
the function to call when setting the value
optionally pass in another object to use as this
inside the given function
this
Get Element#outerHTML.
the outerHTML
of this element
Set Element#outerHTML, and returns this object when done.
This method exists simply for chaining.
the html to set
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`
classname(s) to remove
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>
the segment of this element’s [class]
attribute value to remove; might not be a complete token
the string with which to replace the removed segment
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.
the function to call, taking this
as its only argument, and returning void
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.
the condition to evaluate; will be converted to boolean
the callback to call (with this
as its parameter) if the condition is truthy
the callback to call (with this
as its parameter) if the condition is falsy
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.
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
the name of the css property to get (nonempty string)
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
the name of the css property to set (nonempty string)
the value to assign to the property, or null
or ''
to remove it
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
the name of the css property to set (nonempty string)
the function to call when assigning a value to the property
optionally pass in another object to use as this
inside the given function
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`
an object with ValueType type values
this
Reflect the tabindex
content attribute.
the value of the attribute, or null
if it hasn’t been set
the value to set, or null
to remove
this
the function to call when setting the value
optionally pass in another object to use as this
inside the given function
this
Get Node#textContent.
the textContent
of this node
Set Node#textContent, and returns this object when done.
This method exists simply for chaining.
the content to set
this
Reflect the title
content attribute.
the value of the attribute, or null
if it hasn’t been set
the value to set, or null
to remove
this
the function to call when setting the value
optionally pass in another object to use as this
inside the given function
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>`
this
Generated using TypeDoc
Wrapper for HTML
meta
element.https://www.w3.org/TR/html52/document-metadata.html#htmlmetaelement