Skip to content

HTMLElement

Defined in: src/full-types.d.ts:574

obsidian-typings/src/global/augmentations/HTMLElement.d.ts

optional _EVENTS: object

Defined in: src/full-types.d.ts:579

The event listeners of the element.

optional abort: EventListenerInfo[]

optional animationcancel: EventListenerInfo[]

optional animationend: EventListenerInfo[]

optional animationiteration: EventListenerInfo[]

optional animationstart: EventListenerInfo[]

optional auxclick: EventListenerInfo[]

optional beforeinput: EventListenerInfo[]

optional beforetoggle: EventListenerInfo[]

optional blur: EventListenerInfo[]

optional cancel: EventListenerInfo[]

optional canplay: EventListenerInfo[]

optional canplaythrough: EventListenerInfo[]

optional change: EventListenerInfo[]

optional click: EventListenerInfo[]

optional close: EventListenerInfo[]

optional compositionend: EventListenerInfo[]

optional compositionstart: EventListenerInfo[]

optional compositionupdate: EventListenerInfo[]

optional contextlost: EventListenerInfo[]

optional contextmenu: EventListenerInfo[]

optional contextrestored: EventListenerInfo[]

optional copy: EventListenerInfo[]

optional cuechange: EventListenerInfo[]

optional cut: EventListenerInfo[]

optional dblclick: EventListenerInfo[]

optional drag: EventListenerInfo[]

optional dragend: EventListenerInfo[]

optional dragenter: EventListenerInfo[]

optional dragleave: EventListenerInfo[]

optional dragover: EventListenerInfo[]

optional dragstart: EventListenerInfo[]

optional drop: EventListenerInfo[]

optional durationchange: EventListenerInfo[]

optional emptied: EventListenerInfo[]

optional ended: EventListenerInfo[]

optional error: EventListenerInfo[]

optional focus: EventListenerInfo[]

optional focusin: EventListenerInfo[]

optional focusout: EventListenerInfo[]

optional formdata: EventListenerInfo[]

optional fullscreenchange: EventListenerInfo[]

optional fullscreenerror: EventListenerInfo[]

optional gotpointercapture: EventListenerInfo[]

optional input: EventListenerInfo[]

optional invalid: EventListenerInfo[]

optional keydown: EventListenerInfo[]

optional keypress: EventListenerInfo[]

optional keyup: EventListenerInfo[]

optional load: EventListenerInfo[]

optional loadeddata: EventListenerInfo[]

optional loadedmetadata: EventListenerInfo[]

optional loadstart: EventListenerInfo[]

optional lostpointercapture: EventListenerInfo[]

optional mousedown: EventListenerInfo[]

optional mouseenter: EventListenerInfo[]

optional mouseleave: EventListenerInfo[]

optional mousemove: EventListenerInfo[]

optional mouseout: EventListenerInfo[]

optional mouseover: EventListenerInfo[]

optional mouseup: EventListenerInfo[]

optional paste: EventListenerInfo[]

optional pause: EventListenerInfo[]

optional play: EventListenerInfo[]

optional playing: EventListenerInfo[]

optional pointercancel: EventListenerInfo[]

optional pointerdown: EventListenerInfo[]

optional pointerenter: EventListenerInfo[]

optional pointerleave: EventListenerInfo[]

optional pointermove: EventListenerInfo[]

optional pointerout: EventListenerInfo[]

optional pointerover: EventListenerInfo[]

optional pointerup: EventListenerInfo[]

optional progress: EventListenerInfo[]

optional ratechange: EventListenerInfo[]

optional reset: EventListenerInfo[]

optional resize: EventListenerInfo[]

optional scroll: EventListenerInfo[]

optional scrollend: EventListenerInfo[]

optional securitypolicyviolation: EventListenerInfo[]

optional seeked: EventListenerInfo[]

optional seeking: EventListenerInfo[]

optional select: EventListenerInfo[]

optional selectionchange: EventListenerInfo[]

optional selectstart: EventListenerInfo[]

optional slotchange: EventListenerInfo[]

optional stalled: EventListenerInfo[]

optional submit: EventListenerInfo[]

optional suspend: EventListenerInfo[]

optional timeupdate: EventListenerInfo[]

optional toggle: EventListenerInfo[]

optional touchcancel: EventListenerInfo[]

optional touchend: EventListenerInfo[]

optional touchmove: EventListenerInfo[]

optional touchstart: EventListenerInfo[]

optional transitioncancel: EventListenerInfo[]

optional transitionend: EventListenerInfo[]

optional transitionrun: EventListenerInfo[]

optional transitionstart: EventListenerInfo[]

optional volumechange: EventListenerInfo[]

optional waiting: EventListenerInfo[]

optional webkitanimationend: EventListenerInfo[]

optional webkitanimationiteration: EventListenerInfo[]

optional webkitanimationstart: EventListenerInfo[]

optional webkittransitionend: EventListenerInfo[]

optional wheel: EventListenerInfo[]

constructorWin: Window

Defined in: src/full-types.d.ts:1257

Global window object.

Element.constructorWin


doc: Document

Defined in: src/full-types.d.ts:1263

The document this node belongs to, or the global document.

Element.doc


readonly innerHeight: number

Defined in: src/full-types.d.ts:587

Get the inner height of this element without padding.

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.

Element.win

addClass(…classes): void

Defined in: src/full-types.d.ts:181

Adds a class to the element.

string[]

The class to add.

void

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
```ts
const element = createEl('p');
element.addClasses(['foo', 'bar']);
console.log(element.className); // foo bar

Element.addClasses


appendText(val): void

Defined in: src/full-types.d.ts:1284

Appends a text node to the node.

string

The text to append.

void

const parent = createEl('p');
parent.createEl('strong', { text: 'foo' });
parent.appendText('bar');
console.log(parent); // <p><strong>foo</strong>bar</p>

Element.appendText


createDiv(o?, callback?): HTMLDivElement

Defined in: src/full-types.d.ts:1300

Creates a new <div> element.

The options object.

string | DomElementInfo

(el) => void

A callback function to be called when the element is created.

HTMLDivElement

The created element.

document.body.createDiv({ text: 'foo' }, (div) => {
div.createEl('strong', { text: 'bar' });
});

Element.createDiv


createEl<K>(tag, o?, callback?): HTMLElementTagNameMap[K]

Defined in: src/full-types.d.ts:1318

Create an element and append it to this node.

K extends keyof HTMLElementTagNameMap

The type of the element to create.

K

The tag name of the element to create.

The options object.

string | DomElementInfo

(el) => void

A callback function to be called when the element is created.

HTMLElementTagNameMap[K]

The created element.

document.body.createEl('p', { text: 'foo' }, (div) => {
div.createEl('strong', { text: 'bar' });
});

Element.createEl


createSpan(o?, callback?): HTMLSpanElement

Defined in: src/full-types.d.ts:1338

Creates a new <span> element.

The options object.

string | DomElementInfo

(el) => void

A callback function to be called when the element is created.

HTMLSpanElement

The created element.

document.body.createSpan({ text: 'foo' }, (span) => {
span.createEl('strong', { text: 'bar' });
});

Element.createSpan


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.

K extends keyof SVGElementTagNameMap

The type of the element to create.

K

The tag name of the element to create.

The options object.

string | SvgElementInfo

(el) => void

A callback function to be called when the element is created.

SVGElementTagNameMap[K]

The created element.

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
```ts
const node = document.body.createEl('p');
console.log(document.body.contains(node)); // true
node.detach();
console.log(document.body.contains(node)); // false

Element.detach


empty(): void

Defined in: src/full-types.d.ts:1388

Empties the node.

void

const parent = createEl('p');
parent.createEl('strong');
console.log(parent.childNodes.length); // 1
parent.empty();
console.log(parent.childNodes.length); // 0

Element.empty


find(selector): null | Element

Defined in: src/full-types.d.ts:211

Finds the first descendant element that matches the selector.

string

The selector to find the element with.

null | Element

The first descendant element that matches the selector, or null if no match is found.

const element = createEl('p');
element.createEl('strong', { cls: 'foo' });
console.log(element.find('.foo')); // <strong class="foo"></strong>
console.log(element.find('.bar')); // null

Element.find


findAll(selector): Element[]

Defined in: src/full-types.d.ts:229

Finds all descendant elements that match the selector.

string

The selector to find the elements with.

Element[]

An array of all descendant elements that match the selector.

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')); // []

See bug https://forum.obsidian.md/t/bug-find-findall-findallself/98108.

Element.findAll


findAllSelf(selector): Element[]

Defined in: src/full-types.d.ts:246

Finds all descendant elements or self that match the selector.

string

The selector to find the elements with.

Element[]

An array of all descendant elements or self that match the selector.

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')); // []

See bug https://forum.obsidian.md/t/bug-find-findall-findallself/98108.

Element.findAllSelf


getAttr(qualifiedName): null | string

Defined in: src/full-types.d.ts:261

Gets an attribute from the element.

string

The name of the attribute to get.

null | string

The value of the attribute.

const element = createEl('p');
element.setAttr('data-foo', 'bar');
console.log(element.getAttr('data-foo')); // bar

Element.getAttr


getCssPropertyValue(property, pseudoElement?): string

Defined in: src/full-types.d.ts:278

Gets the value of a CSS property of the element.

string

The property to get the value of.

string

The pseudo-element to get the value of.

string

The value of the CSS property.

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)

Element.getCssPropertyValue


getText(): string

Defined in: src/full-types.d.ts:293

Returns the text content of the element.

string

The text content of the element.

const element = createEl('p');
element.createEl('strong', { text: 'foo' });
element.createEl('strong', { text: 'bar' });
console.log(element.getText()); // foobar

Element.getText


hasClass(cls): boolean

Defined in: src/full-types.d.ts:309

Checks if the element has a class.

string

The class to check for.

boolean

true if the element has the class, false otherwise.

const element = createEl('p');
element.addClass('foo', 'bar');
console.log(element.hasClass('foo')); // true
console.log(element.hasClass('baz')); // false

Element.hasClass


hide(): void

Defined in: src/full-types.d.ts:604

Hides the element using css display property.

void

document.body.hide();

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.

Node

The node to find.

number

The index of the node or -1 if the node is not found.

Element.indexOf


insertAfter<T>(node, child): T

Defined in: src/full-types.d.ts:1418

Inserts a child node after the current node.

T extends Node

The type of the node to insert.

T

The node to insert.

The child node to insert after.

null | Node

T

The inserted node.

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>

Element.insertAfter


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.

T

The type of the instance.

() => T

The type to check.

this is T

true if the node is of the given type, false otherwise.

const node = createEl('p');
console.log(node.instanceOf(HTMLParagraphElement)); // true
console.log(node.instanceOf(HTMLSpanElement)); // false

Element.instanceOf


isActiveElement(): boolean

Defined in: src/full-types.d.ts:323

Checks if the element is the active element.

boolean

true if the element is the active element, false otherwise.

const element = document.body.createEl('p');
console.log(element.isActiveElement()); // false
console.log(document.activeElement.isActiveElement()); // true

Element.isActiveElement


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.

boolean

const element = document.body.createEl('p');
console.log(element.isShown()); // true
element.hide();
console.log(element.isShown()); // false

matchParent(selector, lastParent?): null | Element

Defined in: src/full-types.d.ts:344

Matches the selector recursively up the DOM tree.

string

The selector to match the parent with.

Element

The last parent to stop matching against.

null | Element

The matched element or null if no match is found.

const element = createEl('p');
console.log(element.matchParent('p')); // <p></p>
console.log(element.matchParent('strong')); // null
const 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

Element.matchParent


off<K>(this, type, selector, listener, options?): void

Defined in: src/full-types.d.ts:638

Removes an event listener from the element.

K extends keyof HTMLElementEventMap

The type of the event to listen for.

HTMLElement

The element to remove the event listener from.

K

The type of event to listen for.

string

The selector of the event target.

(this, ev, delegateTarget) => any

The listener to call when the event is triggered.

The options of the event listener.

boolean | AddEventListenerOptions

void

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.

K extends keyof HTMLElementEventMap

The type of the event to listen for.

HTMLElement

The element to add the event listener to.

K

The type of event to listen for.

string

The selector of the event target.

(this, ev, delegateTarget) => any

The listener to call when the event is triggered.

The options of the event listener.

boolean | AddEventListenerOptions

void

document.body.on('click', 'div', (ev) => {
console.log(ev);
});

onClickEvent(this, listener, options?): void

Defined in: src/full-types.d.ts:685

Adds a click event listener to the element.

HTMLElement

The element to add the event listener to.

(this, ev) => any

The listener to call when the click event is triggered.

The options of the click event listener.

boolean | AddEventListenerOptions

void

document.body.onClickEvent((ev) => {
console.log(ev);
});

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.

HTMLElement

() => 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.

destroy - a function to remove the event handler to avoid memory leaks.

(): void

void

document.body.onNodeInserted(() => {
console.log('node inserted');
});

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.

HTMLElement

(win) => any

the callback to call when this node has been migrated to another window.

destroy - a function to remove the event handler to avoid memory leaks.

(): void

void

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
```ts
const element = createEl('p');
element.addClass('foo bar');
element.removeClass('foo', 'baz');
console.log(element.className); // bar

Element.removeClass


removeClasses(classes): void

Defined in: src/full-types.d.ts:374

Removes multiple classes from the element.

string[]

The classes to remove.

void

const element = createEl('p');
element.addClass('foo bar');
element.removeClasses(['foo', 'baz']);
console.log(element.className); // bar

Element.removeClasses


setAttr(qualifiedName, value): void

Defined in: src/full-types.d.ts:389

Sets an attribute on the element.

string

The name of the attribute to set.

The value to set the attribute to.

null | string | number | boolean

void

const element = createEl('p');
element.setAttr('data-foo', 'bar');
console.log(element.getAttr('data-foo')); // bar

Element.setAttr


setAttrs(obj): void

Defined in: src/full-types.d.ts:407

Sets multiple attributes on the element.

The attributes to set.

void

const element = createEl('p');
element.setAttrs({
'data-foo': 'bar',
'data-baz': 'qux',
});
console.log(element.getAttr('data-foo')); // bar
console.log(element.getAttr('data-baz')); // qux

Element.setAttrs


setChildrenInPlace(children): void

Defined in: src/full-types.d.ts:1455

Sets the children of the node.

Node[]

The children to set.

void

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>

Element.setChildrenInPlace


setCssProps(props): void

Defined in: src/full-types.d.ts:732

Sets the CSS properties of the element.

Record<string, string>

The properties to set.

void

const element = document.body.createEl('p');
element.setCssProps({ color: 'red', 'font-size': '16px' });

setCssStyles(styles): void

Defined in: src/full-types.d.ts:745

Sets the CSS styles of the element.

Partial<CSSStyleDeclaration>

The styles to set.

void

const element = document.body.createEl('p');
element.setCssStyles({ color: 'red', fontSize: '16px' });

setText(val): void

Defined in: src/full-types.d.ts:427

Sets the text content of the element.

The text content to set.

string | DocumentFragment

void

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>

Element.setText


show(): void

Defined in: src/full-types.d.ts:756

Shows the element using css display property.

void

document.body.show();

toggle(show): void

Defined in: src/full-types.d.ts:769

Toggles the visibility of the element using css display property.

boolean

Whether to show the element.

void

document.body.toggle(true);
document.body.toggle(false);

toggleClass(classes, value): void

Defined in: src/full-types.d.ts:449

Toggles a class on the element.

The class to toggle.

string | string[]

boolean

If true, the class will be added, if false, the class will be removed.

void

const element = createEl('p');
element.addClass('foo', 'bar');
element.toggleClass('foo', false);
console.log(element.className); // bar
element.toggleClass('foo', true);
console.log(element.className); // bar foo
element.toggleClass('baz', false);
console.log(element.className); // bar foo
element.toggleClass('baz', true);
console.log(element.className); // bar foo baz

Element.toggleClass


toggleVisibility(visible): void

Defined in: src/full-types.d.ts:782

Toggles the visibility of the element using css visibility property.

boolean

Whether to show the element.

void

document.body.toggleVisibility(true);
document.body.toggleVisibility(false);

trigger(eventType): void

Defined in: src/full-types.d.ts:794

Triggers an event on the element.

string

the type of event to trigger.

void

document.body.trigger('click');