HTMLElement
Defined in: src/full-types.d.ts:15096
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:15101
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:15404
Global window object.
Inherited from
Section titled “Inherited from”doc:
Document
Defined in: src/full-types.d.ts:15410
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:15109
Get the inner height of this element without padding.
innerWidth
Section titled “innerWidth”
readonly
innerWidth:number
Defined in: src/full-types.d.ts:15115
Get the inner width of this element without padding.
win:
Window
Defined in: src/full-types.d.ts:15416
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:15755
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:15769
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:15431
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:15447
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:15465
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:15485
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:15502
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:15520
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:15535
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:15785
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:15803
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:15820
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:15835
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:15852
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:15867
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:15883
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:15126
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:15544
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:15565
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:15583
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:15897
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:15143
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:15918
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:15160
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:15185
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:15207
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:15227
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:15241
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:15933
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:15948
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:15963
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:15981
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:15602
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:15254
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:15267
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:16001
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:15278
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:15291
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:16023
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:15304
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:15316
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');