HTMLElement
Defined in: src/full-types.d.ts:718
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:723
The event listeners of the element.
abort?
Section titled “abort?”
optionalabort:EventListenerInfo[]
animationcancel?
Section titled “animationcancel?”
optionalanimationcancel:EventListenerInfo[]
animationend?
Section titled “animationend?”
optionalanimationend:EventListenerInfo[]
animationiteration?
Section titled “animationiteration?”
optionalanimationiteration:EventListenerInfo[]
animationstart?
Section titled “animationstart?”
optionalanimationstart:EventListenerInfo[]
auxclick?
Section titled “auxclick?”
optionalauxclick:EventListenerInfo[]
beforeinput?
Section titled “beforeinput?”
optionalbeforeinput:EventListenerInfo[]
beforetoggle?
Section titled “beforetoggle?”
optionalbeforetoggle:EventListenerInfo[]
optionalblur:EventListenerInfo[]
cancel?
Section titled “cancel?”
optionalcancel:EventListenerInfo[]
canplay?
Section titled “canplay?”
optionalcanplay:EventListenerInfo[]
canplaythrough?
Section titled “canplaythrough?”
optionalcanplaythrough:EventListenerInfo[]
change?
Section titled “change?”
optionalchange:EventListenerInfo[]
click?
Section titled “click?”
optionalclick:EventListenerInfo[]
close?
Section titled “close?”
optionalclose:EventListenerInfo[]
compositionend?
Section titled “compositionend?”
optionalcompositionend:EventListenerInfo[]
compositionstart?
Section titled “compositionstart?”
optionalcompositionstart:EventListenerInfo[]
compositionupdate?
Section titled “compositionupdate?”
optionalcompositionupdate:EventListenerInfo[]
contextlost?
Section titled “contextlost?”
optionalcontextlost:EventListenerInfo[]
contextmenu?
Section titled “contextmenu?”
optionalcontextmenu:EventListenerInfo[]
contextrestored?
Section titled “contextrestored?”
optionalcontextrestored:EventListenerInfo[]
optionalcopy:EventListenerInfo[]
cuechange?
Section titled “cuechange?”
optionalcuechange:EventListenerInfo[]
optionalcut:EventListenerInfo[]
dblclick?
Section titled “dblclick?”
optionaldblclick:EventListenerInfo[]
optionaldrag:EventListenerInfo[]
dragend?
Section titled “dragend?”
optionaldragend:EventListenerInfo[]
dragenter?
Section titled “dragenter?”
optionaldragenter:EventListenerInfo[]
dragleave?
Section titled “dragleave?”
optionaldragleave:EventListenerInfo[]
dragover?
Section titled “dragover?”
optionaldragover:EventListenerInfo[]
dragstart?
Section titled “dragstart?”
optionaldragstart:EventListenerInfo[]
optionaldrop:EventListenerInfo[]
durationchange?
Section titled “durationchange?”
optionaldurationchange:EventListenerInfo[]
emptied?
Section titled “emptied?”
optionalemptied:EventListenerInfo[]
ended?
Section titled “ended?”
optionalended:EventListenerInfo[]
error?
Section titled “error?”
optionalerror:EventListenerInfo[]
focus?
Section titled “focus?”
optionalfocus:EventListenerInfo[]
focusin?
Section titled “focusin?”
optionalfocusin:EventListenerInfo[]
focusout?
Section titled “focusout?”
optionalfocusout:EventListenerInfo[]
formdata?
Section titled “formdata?”
optionalformdata:EventListenerInfo[]
fullscreenchange?
Section titled “fullscreenchange?”
optionalfullscreenchange:EventListenerInfo[]
fullscreenerror?
Section titled “fullscreenerror?”
optionalfullscreenerror:EventListenerInfo[]
gotpointercapture?
Section titled “gotpointercapture?”
optionalgotpointercapture:EventListenerInfo[]
input?
Section titled “input?”
optionalinput:EventListenerInfo[]
invalid?
Section titled “invalid?”
optionalinvalid:EventListenerInfo[]
keydown?
Section titled “keydown?”
optionalkeydown:EventListenerInfo[]
keypress?
Section titled “keypress?”
optionalkeypress:EventListenerInfo[]
keyup?
Section titled “keyup?”
optionalkeyup:EventListenerInfo[]
optionalload:EventListenerInfo[]
loadeddata?
Section titled “loadeddata?”
optionalloadeddata:EventListenerInfo[]
loadedmetadata?
Section titled “loadedmetadata?”
optionalloadedmetadata:EventListenerInfo[]
loadstart?
Section titled “loadstart?”
optionalloadstart:EventListenerInfo[]
lostpointercapture?
Section titled “lostpointercapture?”
optionallostpointercapture:EventListenerInfo[]
mousedown?
Section titled “mousedown?”
optionalmousedown:EventListenerInfo[]
mouseenter?
Section titled “mouseenter?”
optionalmouseenter:EventListenerInfo[]
mouseleave?
Section titled “mouseleave?”
optionalmouseleave:EventListenerInfo[]
mousemove?
Section titled “mousemove?”
optionalmousemove:EventListenerInfo[]
mouseout?
Section titled “mouseout?”
optionalmouseout:EventListenerInfo[]
mouseover?
Section titled “mouseover?”
optionalmouseover:EventListenerInfo[]
mouseup?
Section titled “mouseup?”
optionalmouseup:EventListenerInfo[]
paste?
Section titled “paste?”
optionalpaste:EventListenerInfo[]
pause?
Section titled “pause?”
optionalpause:EventListenerInfo[]
optionalplay:EventListenerInfo[]
playing?
Section titled “playing?”
optionalplaying:EventListenerInfo[]
pointercancel?
Section titled “pointercancel?”
optionalpointercancel:EventListenerInfo[]
pointerdown?
Section titled “pointerdown?”
optionalpointerdown:EventListenerInfo[]
pointerenter?
Section titled “pointerenter?”
optionalpointerenter:EventListenerInfo[]
pointerleave?
Section titled “pointerleave?”
optionalpointerleave:EventListenerInfo[]
pointermove?
Section titled “pointermove?”
optionalpointermove:EventListenerInfo[]
pointerout?
Section titled “pointerout?”
optionalpointerout:EventListenerInfo[]
pointerover?
Section titled “pointerover?”
optionalpointerover:EventListenerInfo[]
pointerup?
Section titled “pointerup?”
optionalpointerup:EventListenerInfo[]
progress?
Section titled “progress?”
optionalprogress:EventListenerInfo[]
ratechange?
Section titled “ratechange?”
optionalratechange:EventListenerInfo[]
reset?
Section titled “reset?”
optionalreset:EventListenerInfo[]
resize?
Section titled “resize?”
optionalresize:EventListenerInfo[]
scroll?
Section titled “scroll?”
optionalscroll:EventListenerInfo[]
scrollend?
Section titled “scrollend?”
optionalscrollend:EventListenerInfo[]
securitypolicyviolation?
Section titled “securitypolicyviolation?”
optionalsecuritypolicyviolation:EventListenerInfo[]
seeked?
Section titled “seeked?”
optionalseeked:EventListenerInfo[]
seeking?
Section titled “seeking?”
optionalseeking:EventListenerInfo[]
select?
Section titled “select?”
optionalselect:EventListenerInfo[]
selectionchange?
Section titled “selectionchange?”
optionalselectionchange:EventListenerInfo[]
selectstart?
Section titled “selectstart?”
optionalselectstart:EventListenerInfo[]
slotchange?
Section titled “slotchange?”
optionalslotchange:EventListenerInfo[]
stalled?
Section titled “stalled?”
optionalstalled:EventListenerInfo[]
submit?
Section titled “submit?”
optionalsubmit:EventListenerInfo[]
suspend?
Section titled “suspend?”
optionalsuspend:EventListenerInfo[]
timeupdate?
Section titled “timeupdate?”
optionaltimeupdate:EventListenerInfo[]
toggle?
Section titled “toggle?”
optionaltoggle:EventListenerInfo[]
touchcancel?
Section titled “touchcancel?”
optionaltouchcancel:EventListenerInfo[]
touchend?
Section titled “touchend?”
optionaltouchend:EventListenerInfo[]
touchmove?
Section titled “touchmove?”
optionaltouchmove:EventListenerInfo[]
touchstart?
Section titled “touchstart?”
optionaltouchstart:EventListenerInfo[]
transitioncancel?
Section titled “transitioncancel?”
optionaltransitioncancel:EventListenerInfo[]
transitionend?
Section titled “transitionend?”
optionaltransitionend:EventListenerInfo[]
transitionrun?
Section titled “transitionrun?”
optionaltransitionrun:EventListenerInfo[]
transitionstart?
Section titled “transitionstart?”
optionaltransitionstart:EventListenerInfo[]
volumechange?
Section titled “volumechange?”
optionalvolumechange:EventListenerInfo[]
waiting?
Section titled “waiting?”
optionalwaiting:EventListenerInfo[]
webkitanimationend?
Section titled “webkitanimationend?”
optionalwebkitanimationend:EventListenerInfo[]
webkitanimationiteration?
Section titled “webkitanimationiteration?”
optionalwebkitanimationiteration:EventListenerInfo[]
webkitanimationstart?
Section titled “webkitanimationstart?”
optionalwebkitanimationstart:EventListenerInfo[]
webkittransitionend?
Section titled “webkittransitionend?”
optionalwebkittransitionend:EventListenerInfo[]
wheel?
Section titled “wheel?”
optionalwheel:EventListenerInfo[]
constructorWin
Section titled “constructorWin”constructorWin:
Window
Defined in: src/full-types.d.ts:1665
Global window object.
Inherited from
Section titled “Inherited from”doc:
Document
Defined in: src/full-types.d.ts:1671
The document this node belongs to, or the global document.
Inherited from
Section titled “Inherited from”innerHeight
Section titled “innerHeight”
readonlyinnerHeight:number
Defined in: src/full-types.d.ts:731
Get the inner height of this element without padding.
innerWidth
Section titled “innerWidth”
readonlyinnerWidth:number
Defined in: src/full-types.d.ts:737
Get the inner width of this element without padding.
win:
Window
Defined in: src/full-types.d.ts:1677
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:1217
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:1231
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 barInherited from
Section titled “Inherited from”appendText()
Section titled “appendText()”appendText(
val):void
Defined in: src/full-types.d.ts:1692
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:1708
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:1726
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:1746
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:1763
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:1781
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)); // falseInherited from
Section titled “Inherited from”empty()
Section titled “empty()”empty():
void
Defined in: src/full-types.d.ts:1796
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); // 0Inherited from
Section titled “Inherited from”find()
Section titled “find()”find(
selector):null|Element
Defined in: src/full-types.d.ts:1247
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')); // nullInherited from
Section titled “Inherited from”findAll()
Section titled “findAll()”findAll(
selector):Element[]
Defined in: src/full-types.d.ts:1265
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:1282
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:1297
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')); // barInherited from
Section titled “Inherited from”getCssPropertyValue()
Section titled “getCssPropertyValue()”getCssPropertyValue(
property,pseudoElement?):string
Defined in: src/full-types.d.ts:1314
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:1329
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()); // foobarInherited from
Section titled “Inherited from”hasClass()
Section titled “hasClass()”hasClass(
cls):boolean
Defined in: src/full-types.d.ts:1345
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')); // falseInherited from
Section titled “Inherited from”hide()
Section titled “hide()”hide():
void
Defined in: src/full-types.d.ts:748
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:1805
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:1826
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:1844
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)); // falseInherited from
Section titled “Inherited from”isActiveElement()
Section titled “isActiveElement()”isActiveElement():
boolean
Defined in: src/full-types.d.ts:1359
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()); // trueInherited from
Section titled “Inherited from”isShown()
Section titled “isShown()”isShown():
boolean
Defined in: src/full-types.d.ts:765
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()); // falsematchParent()
Section titled “matchParent()”matchParent(
selector,lastParent?):null|Element
Defined in: src/full-types.d.ts:1380
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)); // nullInherited from
Section titled “Inherited from”off<
K>(this,type,selector,listener,options?):void
Defined in: src/full-types.d.ts:782
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:807
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:829
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:849
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:863
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:1395
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); // barInherited from
Section titled “Inherited from”removeClasses()
Section titled “removeClasses()”removeClasses(
classes):void
Defined in: src/full-types.d.ts:1410
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); // barInherited from
Section titled “Inherited from”setAttr()
Section titled “setAttr()”setAttr(
qualifiedName,value):void
Defined in: src/full-types.d.ts:1425
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')); // barInherited from
Section titled “Inherited from”setAttrs()
Section titled “setAttrs()”setAttrs(
obj):void
Defined in: src/full-types.d.ts:1443
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')); // quxInherited from
Section titled “Inherited from”setChildrenInPlace()
Section titled “setChildrenInPlace()”setChildrenInPlace(
children):void
Defined in: src/full-types.d.ts:1863
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:876
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:889
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:1463
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:900
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:913
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:1485
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 bazInherited from
Section titled “Inherited from”toggleVisibility()
Section titled “toggleVisibility()”toggleVisibility(
visible):void
Defined in: src/full-types.d.ts:926
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:938
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');