HTMLElement
Defined in: src/full-types.d.ts:574
Source
Section titled “Source”obsidian-typings/src/global/augmentations/HTMLElement.d.ts
Extends
Section titled “Extends”Properties
Section titled “Properties”_EVENTS?
Section titled “_EVENTS?”
optional
_EVENTS:object
Defined in: src/full-types.d.ts:579
The event listeners of the element.
abort?
Section titled “abort?”
optional
abort:EventListenerInfo
[]
animationcancel?
Section titled “animationcancel?”
optional
animationcancel:EventListenerInfo
[]
animationend?
Section titled “animationend?”
optional
animationend:EventListenerInfo
[]
animationiteration?
Section titled “animationiteration?”
optional
animationiteration:EventListenerInfo
[]
animationstart?
Section titled “animationstart?”
optional
animationstart:EventListenerInfo
[]
auxclick?
Section titled “auxclick?”
optional
auxclick:EventListenerInfo
[]
beforeinput?
Section titled “beforeinput?”
optional
beforeinput:EventListenerInfo
[]
beforetoggle?
Section titled “beforetoggle?”
optional
beforetoggle:EventListenerInfo
[]
optional
blur:EventListenerInfo
[]
cancel?
Section titled “cancel?”
optional
cancel:EventListenerInfo
[]
canplay?
Section titled “canplay?”
optional
canplay:EventListenerInfo
[]
canplaythrough?
Section titled “canplaythrough?”
optional
canplaythrough:EventListenerInfo
[]
change?
Section titled “change?”
optional
change:EventListenerInfo
[]
click?
Section titled “click?”
optional
click:EventListenerInfo
[]
close?
Section titled “close?”
optional
close:EventListenerInfo
[]
compositionend?
Section titled “compositionend?”
optional
compositionend:EventListenerInfo
[]
compositionstart?
Section titled “compositionstart?”
optional
compositionstart:EventListenerInfo
[]
compositionupdate?
Section titled “compositionupdate?”
optional
compositionupdate:EventListenerInfo
[]
contextlost?
Section titled “contextlost?”
optional
contextlost:EventListenerInfo
[]
contextmenu?
Section titled “contextmenu?”
optional
contextmenu:EventListenerInfo
[]
contextrestored?
Section titled “contextrestored?”
optional
contextrestored:EventListenerInfo
[]
optional
copy:EventListenerInfo
[]
cuechange?
Section titled “cuechange?”
optional
cuechange:EventListenerInfo
[]
optional
cut:EventListenerInfo
[]
dblclick?
Section titled “dblclick?”
optional
dblclick:EventListenerInfo
[]
optional
drag:EventListenerInfo
[]
dragend?
Section titled “dragend?”
optional
dragend:EventListenerInfo
[]
dragenter?
Section titled “dragenter?”
optional
dragenter:EventListenerInfo
[]
dragleave?
Section titled “dragleave?”
optional
dragleave:EventListenerInfo
[]
dragover?
Section titled “dragover?”
optional
dragover:EventListenerInfo
[]
dragstart?
Section titled “dragstart?”
optional
dragstart:EventListenerInfo
[]
optional
drop:EventListenerInfo
[]
durationchange?
Section titled “durationchange?”
optional
durationchange:EventListenerInfo
[]
emptied?
Section titled “emptied?”
optional
emptied:EventListenerInfo
[]
ended?
Section titled “ended?”
optional
ended:EventListenerInfo
[]
error?
Section titled “error?”
optional
error:EventListenerInfo
[]
focus?
Section titled “focus?”
optional
focus:EventListenerInfo
[]
focusin?
Section titled “focusin?”
optional
focusin:EventListenerInfo
[]
focusout?
Section titled “focusout?”
optional
focusout:EventListenerInfo
[]
formdata?
Section titled “formdata?”
optional
formdata:EventListenerInfo
[]
fullscreenchange?
Section titled “fullscreenchange?”
optional
fullscreenchange:EventListenerInfo
[]
fullscreenerror?
Section titled “fullscreenerror?”
optional
fullscreenerror:EventListenerInfo
[]
gotpointercapture?
Section titled “gotpointercapture?”
optional
gotpointercapture:EventListenerInfo
[]
input?
Section titled “input?”
optional
input:EventListenerInfo
[]
invalid?
Section titled “invalid?”
optional
invalid:EventListenerInfo
[]
keydown?
Section titled “keydown?”
optional
keydown:EventListenerInfo
[]
keypress?
Section titled “keypress?”
optional
keypress:EventListenerInfo
[]
keyup?
Section titled “keyup?”
optional
keyup:EventListenerInfo
[]
optional
load:EventListenerInfo
[]
loadeddata?
Section titled “loadeddata?”
optional
loadeddata:EventListenerInfo
[]
loadedmetadata?
Section titled “loadedmetadata?”
optional
loadedmetadata:EventListenerInfo
[]
loadstart?
Section titled “loadstart?”
optional
loadstart:EventListenerInfo
[]
lostpointercapture?
Section titled “lostpointercapture?”
optional
lostpointercapture:EventListenerInfo
[]
mousedown?
Section titled “mousedown?”
optional
mousedown:EventListenerInfo
[]
mouseenter?
Section titled “mouseenter?”
optional
mouseenter:EventListenerInfo
[]
mouseleave?
Section titled “mouseleave?”
optional
mouseleave:EventListenerInfo
[]
mousemove?
Section titled “mousemove?”
optional
mousemove:EventListenerInfo
[]
mouseout?
Section titled “mouseout?”
optional
mouseout:EventListenerInfo
[]
mouseover?
Section titled “mouseover?”
optional
mouseover:EventListenerInfo
[]
mouseup?
Section titled “mouseup?”
optional
mouseup:EventListenerInfo
[]
paste?
Section titled “paste?”
optional
paste:EventListenerInfo
[]
pause?
Section titled “pause?”
optional
pause:EventListenerInfo
[]
optional
play:EventListenerInfo
[]
playing?
Section titled “playing?”
optional
playing:EventListenerInfo
[]
pointercancel?
Section titled “pointercancel?”
optional
pointercancel:EventListenerInfo
[]
pointerdown?
Section titled “pointerdown?”
optional
pointerdown:EventListenerInfo
[]
pointerenter?
Section titled “pointerenter?”
optional
pointerenter:EventListenerInfo
[]
pointerleave?
Section titled “pointerleave?”
optional
pointerleave:EventListenerInfo
[]
pointermove?
Section titled “pointermove?”
optional
pointermove:EventListenerInfo
[]
pointerout?
Section titled “pointerout?”
optional
pointerout:EventListenerInfo
[]
pointerover?
Section titled “pointerover?”
optional
pointerover:EventListenerInfo
[]
pointerup?
Section titled “pointerup?”
optional
pointerup:EventListenerInfo
[]
progress?
Section titled “progress?”
optional
progress:EventListenerInfo
[]
ratechange?
Section titled “ratechange?”
optional
ratechange:EventListenerInfo
[]
reset?
Section titled “reset?”
optional
reset:EventListenerInfo
[]
resize?
Section titled “resize?”
optional
resize:EventListenerInfo
[]
scroll?
Section titled “scroll?”
optional
scroll:EventListenerInfo
[]
scrollend?
Section titled “scrollend?”
optional
scrollend:EventListenerInfo
[]
securitypolicyviolation?
Section titled “securitypolicyviolation?”
optional
securitypolicyviolation:EventListenerInfo
[]
seeked?
Section titled “seeked?”
optional
seeked:EventListenerInfo
[]
seeking?
Section titled “seeking?”
optional
seeking:EventListenerInfo
[]
select?
Section titled “select?”
optional
select:EventListenerInfo
[]
selectionchange?
Section titled “selectionchange?”
optional
selectionchange:EventListenerInfo
[]
selectstart?
Section titled “selectstart?”
optional
selectstart:EventListenerInfo
[]
slotchange?
Section titled “slotchange?”
optional
slotchange:EventListenerInfo
[]
stalled?
Section titled “stalled?”
optional
stalled:EventListenerInfo
[]
submit?
Section titled “submit?”
optional
submit:EventListenerInfo
[]
suspend?
Section titled “suspend?”
optional
suspend:EventListenerInfo
[]
timeupdate?
Section titled “timeupdate?”
optional
timeupdate:EventListenerInfo
[]
toggle?
Section titled “toggle?”
optional
toggle:EventListenerInfo
[]
touchcancel?
Section titled “touchcancel?”
optional
touchcancel:EventListenerInfo
[]
touchend?
Section titled “touchend?”
optional
touchend:EventListenerInfo
[]
touchmove?
Section titled “touchmove?”
optional
touchmove:EventListenerInfo
[]
touchstart?
Section titled “touchstart?”
optional
touchstart:EventListenerInfo
[]
transitioncancel?
Section titled “transitioncancel?”
optional
transitioncancel:EventListenerInfo
[]
transitionend?
Section titled “transitionend?”
optional
transitionend:EventListenerInfo
[]
transitionrun?
Section titled “transitionrun?”
optional
transitionrun:EventListenerInfo
[]
transitionstart?
Section titled “transitionstart?”
optional
transitionstart:EventListenerInfo
[]
volumechange?
Section titled “volumechange?”
optional
volumechange:EventListenerInfo
[]
waiting?
Section titled “waiting?”
optional
waiting:EventListenerInfo
[]
webkitanimationend?
Section titled “webkitanimationend?”
optional
webkitanimationend:EventListenerInfo
[]
webkitanimationiteration?
Section titled “webkitanimationiteration?”
optional
webkitanimationiteration:EventListenerInfo
[]
webkitanimationstart?
Section titled “webkitanimationstart?”
optional
webkitanimationstart:EventListenerInfo
[]
webkittransitionend?
Section titled “webkittransitionend?”
optional
webkittransitionend:EventListenerInfo
[]
wheel?
Section titled “wheel?”
optional
wheel:EventListenerInfo
[]
constructorWin
Section titled “constructorWin”constructorWin:
Window
Defined in: src/full-types.d.ts:1257
Global window object.
Inherited from
Section titled “Inherited from”doc:
Document
Defined in: src/full-types.d.ts:1263
The document this node belongs to, or the global document.
Inherited from
Section titled “Inherited from”innerHeight
Section titled “innerHeight”
readonly
innerHeight:number
Defined in: src/full-types.d.ts:587
Get the inner height of this element without padding.
innerWidth
Section titled “innerWidth”
readonly
innerWidth:number
Defined in: src/full-types.d.ts:593
Get the inner width of this element without padding.
win:
Window
Defined in: src/full-types.d.ts:1269
The window object this node belongs to, or the global window.
Inherited from
Section titled “Inherited from”Methods
Section titled “Methods”addClass()
Section titled “addClass()”addClass(…
classes
):void
Defined in: src/full-types.d.ts:181
Adds a class to the element.
Parameters
Section titled “Parameters”classes
Section titled “classes”…string
[]
The class to add.
Returns
Section titled “Returns”void
Example
Section titled “Example”const element = createEl('p');element.addClass('foo', 'bar');console.log(element.className); // foo@official
#### Inherited from
[`Element`](/obsidian-typings/api/obsidian-typings/namespaces/global/interfaces/element/).[`addClass`](/obsidian-typings/api/obsidian-typings/namespaces/global/interfaces/element/#addclass)
***
### addClasses()
> **addClasses**(`classes`): `void`
Defined in: src/full-types.d.ts:195
Adds multiple classes to the element.
#### Parameters
##### classes
`string`[]
The classes to add.
#### Returns
`void`
#### Example
```tsconst element = createEl('p');element.addClasses(['foo', 'bar']);console.log(element.className); // foo bar
Inherited from
Section titled “Inherited from”appendText()
Section titled “appendText()”appendText(
val
):void
Defined in: src/full-types.d.ts:1284
Appends a text node to the node.
Parameters
Section titled “Parameters”string
The text to append.
Returns
Section titled “Returns”void
Example
Section titled “Example”const parent = createEl('p');parent.createEl('strong', { text: 'foo' });parent.appendText('bar');console.log(parent); // <p><strong>foo</strong>bar</p>
Inherited from
Section titled “Inherited from”createDiv()
Section titled “createDiv()”createDiv(
o?
,callback?
):HTMLDivElement
Defined in: src/full-types.d.ts:1300
Creates a new <div>
element.
Parameters
Section titled “Parameters”The options object.
string
| DomElementInfo
callback?
Section titled “callback?”(el
) => void
A callback function to be called when the element is created.
Returns
Section titled “Returns”The created element.
Example
Section titled “Example”document.body.createDiv({ text: 'foo' }, (div) => { div.createEl('strong', { text: 'bar' });});
Inherited from
Section titled “Inherited from”createEl()
Section titled “createEl()”createEl<
K
>(tag
,o?
,callback?
):HTMLElementTagNameMap
[K
]
Defined in: src/full-types.d.ts:1318
Create an element and append it to this node.
Type Parameters
Section titled “Type Parameters”K
extends keyof HTMLElementTagNameMap
The type of the element to create.
Parameters
Section titled “Parameters”K
The tag name of the element to create.
The options object.
string
| DomElementInfo
callback?
Section titled “callback?”(el
) => void
A callback function to be called when the element is created.
Returns
Section titled “Returns”HTMLElementTagNameMap
[K
]
The created element.
Example
Section titled “Example”document.body.createEl('p', { text: 'foo' }, (div) => { div.createEl('strong', { text: 'bar' });});
Inherited from
Section titled “Inherited from”createSpan()
Section titled “createSpan()”createSpan(
o?
,callback?
):HTMLSpanElement
Defined in: src/full-types.d.ts:1338
Creates a new <span>
element.
Parameters
Section titled “Parameters”The options object.
string
| DomElementInfo
callback?
Section titled “callback?”(el
) => void
A callback function to be called when the element is created.
Returns
Section titled “Returns”The created element.
Example
Section titled “Example”document.body.createSpan({ text: 'foo' }, (span) => { span.createEl('strong', { text: 'bar' });});
Inherited from
Section titled “Inherited from”createSvg()
Section titled “createSvg()”createSvg<
K
>(tag
,o?
,callback?
):SVGElementTagNameMap
[K
]
Defined in: src/full-types.d.ts:1355
Creates a new svg element such as <svg>
, <circle>
, <rect>
, etc.
Type Parameters
Section titled “Type Parameters”K
extends keyof SVGElementTagNameMap
The type of the element to create.
Parameters
Section titled “Parameters”K
The tag name of the element to create.
The options object.
string
| SvgElementInfo
callback?
Section titled “callback?”(el
) => void
A callback function to be called when the element is created.
Returns
Section titled “Returns”SVGElementTagNameMap
[K
]
The created element.
Example
Section titled “Example”document.body.createSvg('svg', { cls: 'foo bar' }, (svg) => { svg.createSvg('circle');});@official
#### Inherited from
[`Element`](/obsidian-typings/api/obsidian-typings/namespaces/global/interfaces/element/).[`createSvg`](/obsidian-typings/api/obsidian-typings/namespaces/global/interfaces/element/#createsvg)
***
### detach()
> **detach**(): `void`
Defined in: src/full-types.d.ts:1373
Detaches the node from the DOM.
#### Returns
`void`
#### Example
```tsconst node = document.body.createEl('p');console.log(document.body.contains(node)); // truenode.detach();console.log(document.body.contains(node)); // false
Inherited from
Section titled “Inherited from”empty()
Section titled “empty()”empty():
void
Defined in: src/full-types.d.ts:1388
Empties the node.
Returns
Section titled “Returns”void
Example
Section titled “Example”const parent = createEl('p');parent.createEl('strong');console.log(parent.childNodes.length); // 1parent.empty();console.log(parent.childNodes.length); // 0
Inherited from
Section titled “Inherited from”find()
Section titled “find()”find(
selector
):null
|Element
Defined in: src/full-types.d.ts:211
Finds the first descendant element that matches the selector.
Parameters
Section titled “Parameters”selector
Section titled “selector”string
The selector to find the element with.
Returns
Section titled “Returns”null
| Element
The first descendant element that matches the selector, or null
if no match is found.
Example
Section titled “Example”const element = createEl('p');element.createEl('strong', { cls: 'foo' });console.log(element.find('.foo')); // <strong class="foo"></strong>console.log(element.find('.bar')); // null
Inherited from
Section titled “Inherited from”findAll()
Section titled “findAll()”findAll(
selector
):Element
[]
Defined in: src/full-types.d.ts:229
Finds all descendant elements that match the selector.
Parameters
Section titled “Parameters”selector
Section titled “selector”string
The selector to find the elements with.
Returns
Section titled “Returns”Element
[]
An array of all descendant elements that match the selector.
Example
Section titled “Example”const element = createEl('p');element.createEl('strong', { cls: 'foo' });element.createEl('strong', { cls: 'foo' });console.log(element.findAll('.foo')); // [<strong class="foo"></strong>, <strong class="foo"></strong>]console.log(element.findAll('.bar')); // []
Remarks
Section titled “Remarks”See bug https://forum.obsidian.md/t/bug-find-findall-findallself/98108.
Inherited from
Section titled “Inherited from”findAllSelf()
Section titled “findAllSelf()”findAllSelf(
selector
):Element
[]
Defined in: src/full-types.d.ts:246
Finds all descendant elements or self that match the selector.
Parameters
Section titled “Parameters”selector
Section titled “selector”string
The selector to find the elements with.
Returns
Section titled “Returns”Element
[]
An array of all descendant elements or self that match the selector.
Example
Section titled “Example”const element = createEl('p', { cls: 'foo' });element.createEl('strong', { cls: 'foo' });console.log(element.findAllSelf('.foo')); // [<p class="foo"></p>, <strong class="foo"></strong>]console.log(element.findAllSelf('.bar')); // []
Remarks
Section titled “Remarks”See bug https://forum.obsidian.md/t/bug-find-findall-findallself/98108.
Inherited from
Section titled “Inherited from”getAttr()
Section titled “getAttr()”getAttr(
qualifiedName
):null
|string
Defined in: src/full-types.d.ts:261
Gets an attribute from the element.
Parameters
Section titled “Parameters”qualifiedName
Section titled “qualifiedName”string
The name of the attribute to get.
Returns
Section titled “Returns”null
| string
The value of the attribute.
Example
Section titled “Example”const element = createEl('p');element.setAttr('data-foo', 'bar');console.log(element.getAttr('data-foo')); // bar
Inherited from
Section titled “Inherited from”getCssPropertyValue()
Section titled “getCssPropertyValue()”getCssPropertyValue(
property
,pseudoElement?
):string
Defined in: src/full-types.d.ts:278
Gets the value of a CSS property of the element.
Parameters
Section titled “Parameters”property
Section titled “property”string
The property to get the value of.
pseudoElement?
Section titled “pseudoElement?”string
The pseudo-element to get the value of.
Returns
Section titled “Returns”string
The value of the CSS property.
Example
Section titled “Example”const element = document.body.createEl('p');element.style.color = 'red';console.log(element.getCssPropertyValue('color')); // rgb(255, 0, 0)console.log(element.getCssPropertyValue('color', ':after')); // rgb(255, 0, 0)
Inherited from
Section titled “Inherited from”getText()
Section titled “getText()”getText():
string
Defined in: src/full-types.d.ts:293
Returns the text content of the element.
Returns
Section titled “Returns”string
The text content of the element.
Example
Section titled “Example”const element = createEl('p');element.createEl('strong', { text: 'foo' });element.createEl('strong', { text: 'bar' });console.log(element.getText()); // foobar
Inherited from
Section titled “Inherited from”hasClass()
Section titled “hasClass()”hasClass(
cls
):boolean
Defined in: src/full-types.d.ts:309
Checks if the element has a class.
Parameters
Section titled “Parameters”string
The class to check for.
Returns
Section titled “Returns”boolean
true
if the element has the class, false
otherwise.
Example
Section titled “Example”const element = createEl('p');element.addClass('foo', 'bar');console.log(element.hasClass('foo')); // trueconsole.log(element.hasClass('baz')); // false
Inherited from
Section titled “Inherited from”hide()
Section titled “hide()”hide():
void
Defined in: src/full-types.d.ts:604
Hides the element using css display
property.
Returns
Section titled “Returns”void
Example
Section titled “Example”document.body.hide();
indexOf()
Section titled “indexOf()”indexOf(
other
):number
Defined in: src/full-types.d.ts:1397
Returns the index of the node or -1
if the node is not found.
Parameters
Section titled “Parameters”The node to find.
Returns
Section titled “Returns”number
The index of the node or -1
if the node is not found.
Inherited from
Section titled “Inherited from”insertAfter()
Section titled “insertAfter()”insertAfter<
T
>(node
,child
):T
Defined in: src/full-types.d.ts:1418
Inserts a child node after the current node.
Type Parameters
Section titled “Type Parameters”T
extends Node
The type of the node to insert.
Parameters
Section titled “Parameters”T
The node to insert.
The child node to insert after.
null
| Node
Returns
Section titled “Returns”T
The inserted node.
Example
Section titled “Example”const parent = createEl('p');const child1 = parent.createEl('strong', { text: '1' });const child2 = parent.createEl('strong', { text: '2' });const child3 = parent.createEl('strong', { text: '3' });const newNode = createEl('em', { text: '4' });parent.insertAfter(newNode, child2);console.log(parent); // <p><strong>1</strong><strong>2</strong><em>4</em><strong>3</strong></p>
Inherited from
Section titled “Inherited from”instanceOf()
Section titled “instanceOf()”instanceOf<
T
>(type
):this is T
Defined in: src/full-types.d.ts:1436
Cross-window capable instanceof check, a drop-in replacement. for instanceof checks on DOM Nodes. Remember to also check for nulls when necessary.
Type Parameters
Section titled “Type Parameters”T
The type of the instance.
Parameters
Section titled “Parameters”() => T
The type to check.
Returns
Section titled “Returns”this is T
true
if the node is of the given type, false
otherwise.
Example
Section titled “Example”const node = createEl('p');console.log(node.instanceOf(HTMLParagraphElement)); // trueconsole.log(node.instanceOf(HTMLSpanElement)); // false
Inherited from
Section titled “Inherited from”isActiveElement()
Section titled “isActiveElement()”isActiveElement():
boolean
Defined in: src/full-types.d.ts:323
Checks if the element is the active element.
Returns
Section titled “Returns”boolean
true
if the element is the active element, false
otherwise.
Example
Section titled “Example”const element = document.body.createEl('p');console.log(element.isActiveElement()); // falseconsole.log(document.activeElement.isActiveElement()); // true
Inherited from
Section titled “Inherited from”isShown()
Section titled “isShown()”isShown():
boolean
Defined in: src/full-types.d.ts:621
Returns whether this element is shown, when the element is attached to the DOM and.
none of the parent and ancestor elements are hidden with display: none
.
Exception: Does not work on <body>
and <html>
, or on elements with position: fixed
.
Returns
Section titled “Returns”boolean
Example
Section titled “Example”const element = document.body.createEl('p');console.log(element.isShown()); // trueelement.hide();console.log(element.isShown()); // false
matchParent()
Section titled “matchParent()”matchParent(
selector
,lastParent?
):null
|Element
Defined in: src/full-types.d.ts:344
Matches the selector recursively up the DOM tree.
Parameters
Section titled “Parameters”selector
Section titled “selector”string
The selector to match the parent with.
lastParent?
Section titled “lastParent?”The last parent to stop matching against.
Returns
Section titled “Returns”null
| Element
The matched element or null
if no match is found.
Example
Section titled “Example”const element = createEl('p');console.log(element.matchParent('p')); // <p></p>console.log(element.matchParent('strong')); // nullconst child = element.createEl('strong');console.log(child.matchParent('strong')); // <strong></strong>console.log(child.matchParent('p')); // <p></p>const grandchild = child.createEl('em');console.log(grandchild.matchParent('p', child)); // null
Inherited from
Section titled “Inherited from”off<
K
>(this
,type
,selector
,listener
,options?
):void
Defined in: src/full-types.d.ts:638
Removes an event listener from the element.
Type Parameters
Section titled “Type Parameters”K
extends keyof HTMLElementEventMap
The type of the event to listen for.
Parameters
Section titled “Parameters”HTMLElement
The element to remove the event listener from.
K
The type of event to listen for.
selector
Section titled “selector”string
The selector of the event target.
listener
Section titled “listener”(this
, ev
, delegateTarget
) => any
The listener to call when the event is triggered.
options?
Section titled “options?”The options of the event listener.
boolean
| AddEventListenerOptions
Returns
Section titled “Returns”void
Example
Section titled “Example”document.body.off('click', 'div', document.body._EVENTS.click[0].listener);
on<
K
>(this
,type
,selector
,listener
,options?
):void
Defined in: src/full-types.d.ts:663
Adds an event listener to the element.
Type Parameters
Section titled “Type Parameters”K
extends keyof HTMLElementEventMap
The type of the event to listen for.
Parameters
Section titled “Parameters”HTMLElement
The element to add the event listener to.
K
The type of event to listen for.
selector
Section titled “selector”string
The selector of the event target.
listener
Section titled “listener”(this
, ev
, delegateTarget
) => any
The listener to call when the event is triggered.
options?
Section titled “options?”The options of the event listener.
boolean
| AddEventListenerOptions
Returns
Section titled “Returns”void
Example
Section titled “Example”document.body.on('click', 'div', (ev) => { console.log(ev);});
onClickEvent()
Section titled “onClickEvent()”onClickEvent(
this
,listener
,options?
):void
Defined in: src/full-types.d.ts:685
Adds a click event listener to the element.
Parameters
Section titled “Parameters”HTMLElement
The element to add the event listener to.
listener
Section titled “listener”(this
, ev
) => any
The listener to call when the click event is triggered.
options?
Section titled “options?”The options of the click event listener.
boolean
| AddEventListenerOptions
Returns
Section titled “Returns”void
Example
Section titled “Example”document.body.onClickEvent((ev) => { console.log(ev);});
onNodeInserted()
Section titled “onNodeInserted()”onNodeInserted(
this
,listener
,once?
): () =>void
Defined in: src/full-types.d.ts:705
Adds an event listener to the element when it is inserted into the DOM.
Parameters
Section titled “Parameters”HTMLElement
listener
Section titled “listener”() => any
the callback to call when this node is inserted into the DOM.
boolean
if true, this will only fire once and then unhook itself.
Returns
Section titled “Returns”destroy - a function to remove the event handler to avoid memory leaks.
():
void
Returns
Section titled “Returns”void
Example
Section titled “Example”document.body.onNodeInserted(() => { console.log('node inserted');});
onWindowMigrated()
Section titled “onWindowMigrated()”onWindowMigrated(
this
,listener
): () =>void
Defined in: src/full-types.d.ts:719
Adds an event listener to the element when it is migrated to another window.
Parameters
Section titled “Parameters”HTMLElement
listener
Section titled “listener”(win
) => any
the callback to call when this node has been migrated to another window.
Returns
Section titled “Returns”destroy - a function to remove the event handler to avoid memory leaks.
():
void
Returns
Section titled “Returns”void
Example
Section titled “Example”document.body.onWindowMigrated((win) => { console.log('window migrated');});@official
***
### removeClass()
> **removeClass**(...`classes`): `void`
Defined in: src/full-types.d.ts:359
Removes a class from the element.
#### Parameters
##### classes
...`string`[]
The class to remove.
#### Returns
`void`
#### Example
```tsconst element = createEl('p');element.addClass('foo bar');element.removeClass('foo', 'baz');console.log(element.className); // bar
Inherited from
Section titled “Inherited from”removeClasses()
Section titled “removeClasses()”removeClasses(
classes
):void
Defined in: src/full-types.d.ts:374
Removes multiple classes from the element.
Parameters
Section titled “Parameters”classes
Section titled “classes”string
[]
The classes to remove.
Returns
Section titled “Returns”void
Example
Section titled “Example”const element = createEl('p');element.addClass('foo bar');element.removeClasses(['foo', 'baz']);console.log(element.className); // bar
Inherited from
Section titled “Inherited from”setAttr()
Section titled “setAttr()”setAttr(
qualifiedName
,value
):void
Defined in: src/full-types.d.ts:389
Sets an attribute on the element.
Parameters
Section titled “Parameters”qualifiedName
Section titled “qualifiedName”string
The name of the attribute to set.
The value to set the attribute to.
null
| string
| number
| boolean
Returns
Section titled “Returns”void
Example
Section titled “Example”const element = createEl('p');element.setAttr('data-foo', 'bar');console.log(element.getAttr('data-foo')); // bar
Inherited from
Section titled “Inherited from”setAttrs()
Section titled “setAttrs()”setAttrs(
obj
):void
Defined in: src/full-types.d.ts:407
Sets multiple attributes on the element.
Parameters
Section titled “Parameters”The attributes to set.
Returns
Section titled “Returns”void
Example
Section titled “Example”const element = createEl('p');element.setAttrs({ 'data-foo': 'bar', 'data-baz': 'qux',});console.log(element.getAttr('data-foo')); // barconsole.log(element.getAttr('data-baz')); // qux
Inherited from
Section titled “Inherited from”setChildrenInPlace()
Section titled “setChildrenInPlace()”setChildrenInPlace(
children
):void
Defined in: src/full-types.d.ts:1455
Sets the children of the node.
Parameters
Section titled “Parameters”children
Section titled “children”Node
[]
The children to set.
Returns
Section titled “Returns”void
Example
Section titled “Example”const parent = createEl('p');const child1 = parent.createEl('strong', { text: '1' });const child2 = parent.createEl('strong', { text: '2' });const child3 = createEl('strong', { text: '3' });parent.setChildrenInPlace([child1, child3]);console.log(parent); // <p><strong>1</strong><strong>3</strong></p>
Inherited from
Section titled “Inherited from”setCssProps()
Section titled “setCssProps()”setCssProps(
props
):void
Defined in: src/full-types.d.ts:732
Sets the CSS properties of the element.
Parameters
Section titled “Parameters”Record
<string
, string
>
The properties to set.
Returns
Section titled “Returns”void
Example
Section titled “Example”const element = document.body.createEl('p');element.setCssProps({ color: 'red', 'font-size': '16px' });
setCssStyles()
Section titled “setCssStyles()”setCssStyles(
styles
):void
Defined in: src/full-types.d.ts:745
Sets the CSS styles of the element.
Parameters
Section titled “Parameters”styles
Section titled “styles”The styles to set.
Returns
Section titled “Returns”void
Example
Section titled “Example”const element = document.body.createEl('p');element.setCssStyles({ color: 'red', fontSize: '16px' });
setText()
Section titled “setText()”setText(
val
):void
Defined in: src/full-types.d.ts:427
Sets the text content of the element.
Parameters
Section titled “Parameters”The text content to set.
string
| DocumentFragment
Returns
Section titled “Returns”void
Example
Section titled “Example”const element = createEl('p');element.setText('foo');console.log(element); // <p>foo</p>const fragment = createFragment();fragment.createEl('strong', { text: 'bar' });element.setText(fragment);console.log(element); // <p><strong>bar</strong></p>
Inherited from
Section titled “Inherited from”show()
Section titled “show()”show():
void
Defined in: src/full-types.d.ts:756
Shows the element using css display
property.
Returns
Section titled “Returns”void
Example
Section titled “Example”document.body.show();
toggle()
Section titled “toggle()”toggle(
show
):void
Defined in: src/full-types.d.ts:769
Toggles the visibility of the element using css display
property.
Parameters
Section titled “Parameters”boolean
Whether to show the element.
Returns
Section titled “Returns”void
Example
Section titled “Example”document.body.toggle(true);document.body.toggle(false);
toggleClass()
Section titled “toggleClass()”toggleClass(
classes
,value
):void
Defined in: src/full-types.d.ts:449
Toggles a class on the element.
Parameters
Section titled “Parameters”classes
Section titled “classes”The class to toggle.
string
| string
[]
boolean
If true
, the class will be added, if false
, the class will be removed.
Returns
Section titled “Returns”void
Example
Section titled “Example”const element = createEl('p');element.addClass('foo', 'bar');element.toggleClass('foo', false);console.log(element.className); // barelement.toggleClass('foo', true);console.log(element.className); // bar fooelement.toggleClass('baz', false);console.log(element.className); // bar fooelement.toggleClass('baz', true);console.log(element.className); // bar foo baz
Inherited from
Section titled “Inherited from”toggleVisibility()
Section titled “toggleVisibility()”toggleVisibility(
visible
):void
Defined in: src/full-types.d.ts:782
Toggles the visibility of the element using css visibility
property.
Parameters
Section titled “Parameters”visible
Section titled “visible”boolean
Whether to show the element.
Returns
Section titled “Returns”void
Example
Section titled “Example”document.body.toggleVisibility(true);document.body.toggleVisibility(false);
trigger()
Section titled “trigger()”trigger(
eventType
):void
Defined in: src/full-types.d.ts:794
Triggers an event on the element.
Parameters
Section titled “Parameters”eventType
Section titled “eventType”string
the type of event to trigger.
Returns
Section titled “Returns”void
Example
Section titled “Example”document.body.trigger('click');