tessl/maven-org-jetbrains-kotlin--kotlin-dom-api-compat
Kotlin DOM API compatibility library providing JavaScript interoperability and DOM manipulation utilities
—
Pending
org-w3c-dom.mddocs/
Core DOM and HTML Elements
Complete W3C DOM API bindings providing type-safe access to all HTML elements, document structure, and node operations. This includes the full HTML element hierarchy with properties and methods for web application development.
Capabilities
Document Interface
Core document interface for accessing and manipulating the HTML document structure.
/**
* The Document interface represents the entire HTML document
*/
external interface Document : Node, DocumentOrShadowRoot, GlobalEventHandlers {
/** The document's root element (usually <html>) */
val documentElement: Element?
/** The document's head element */
val head: HTMLHeadElement?
/** The document's body element */
val body: HTMLElement?
/** The document title */
var title: String
/** The document URL */
val URL: String
/** The document domain */
var domain: String
/** The document's cookie string */
var cookie: String
/** The document's character set */
val characterSet: String
/** The document's ready state */
val readyState: DocumentReadyState
/** Create a new element with the specified tag name */
fun createElement(localName: String): Element
/** Create a new text node with the specified data */
fun createTextNode(data: String): Text
/** Create a new comment node */
fun createComment(data: String): Comment
/** Create a document fragment */
fun createDocumentFragment(): DocumentFragment
/** Get element by ID */
fun getElementById(elementId: String): Element?
/** Get elements by tag name */
fun getElementsByTagName(qualifiedName: String): HTMLCollection
/** Get elements by class name */
fun getElementsByClassName(classNames: String): HTMLCollection
/** Get first element matching CSS selector */
fun querySelector(selectors: String): Element?
/** Get all elements matching CSS selector */
fun querySelectorAll(selectors: String): NodeList
}
enum class DocumentReadyState {
LOADING,
INTERACTIVE,
COMPLETE
}Element Interface
Base interface for all DOM elements with common properties and methods.
/**
* The Element interface represents an element in the document
*/
external interface Element : Node, ChildNode, ParentNode, Slotable {
/** The element's tag name in uppercase */
val tagName: String
/** The element's ID attribute */
var id: String
/** The element's class attribute as a string */
var className: String
/** The element's class list for manipulation */
val classList: DOMTokenList
/** The element's innerHTML content */
var innerHTML: String
/** The element's outerHTML content including the element itself */
var outerHTML: String
/** The element's text content */
var textContent: String?
/** The element's scrollTop position */
var scrollTop: Double
/** The element's scrollLeft position */
var scrollLeft: Double
/** The element's scroll height */
val scrollHeight: Int
/** The element's scroll width */
val scrollWidth: Int
/** The element's client height */
val clientHeight: Int
/** The element's client width */
val clientWidth: Int
/** The element's client top */
val clientTop: Int
/** The element's client left */
val clientLeft: Int
/** Get attribute value by name */
fun getAttribute(qualifiedName: String): String?
/** Set attribute value */
fun setAttribute(qualifiedName: String, value: String)
/** Remove attribute */
fun removeAttribute(qualifiedName: String)
/** Check if attribute exists */
fun hasAttribute(qualifiedName: String): Boolean
/** Get all attributes */
fun getAttributeNames(): Array<String>
/** Get first child element matching CSS selector */
fun querySelector(selectors: String): Element?
/** Get all child elements matching CSS selector */
fun querySelectorAll(selectors: String): NodeList
/** Get child elements by tag name */
fun getElementsByTagName(qualifiedName: String): HTMLCollection
/** Get child elements by class name */
fun getElementsByClassName(classNames: String): HTMLCollection
/** Get element's bounding client rectangle */
fun getBoundingClientRect(): DOMRect
/** Get element's client rectangles */
fun getClientRects(): DOMRectList
/** Scroll element into view */
fun scrollIntoView(arg: dynamic = definedExternally)
/** Scroll to specified position */
fun scrollTo(x: Double, y: Double)
/** Scroll by specified amount */
fun scrollBy(x: Double, y: Double)
/** Insert adjacent HTML */
fun insertAdjacentHTML(position: String, text: String)
/** Insert adjacent element */
fun insertAdjacentElement(where: String, element: Element): Element?
/** Insert adjacent text */
fun insertAdjacentText(where: String, data: String)
/** Check if element matches CSS selector */
fun matches(selectors: String): Boolean
/** Get closest ancestor matching selector */
fun closest(selectors: String): Element?
}HTML Element Hierarchy
Complete HTML element interfaces with specific properties and methods.
/**
* Base interface for all HTML elements
*/
external interface HTMLElement : Element, GlobalEventHandlers, DocumentAndElementEventHandlers, ElementContentEditable, ElementCSSInlineStyle {
/** The element's access key */
var accessKey: String
/** Whether the element should be focused automatically */
var autofocus: Boolean
/** The element's content editable state */
var contentEditable: String
/** Custom data attributes */
val dataset: DOMStringMap
/** The element's direction */
var dir: String
/** Whether the element is draggable */
var draggable: Boolean
/** Whether the element is hidden */
var hidden: Boolean
/** The element's input mode */
var inputMode: String
/** Whether the element is content editable */
val isContentEditable: Boolean
/** The element's language */
var lang: String
/** Whether the element should be spell checked */
var spellcheck: Boolean
/** The element's inline style */
val style: CSSStyleDeclaration
/** The element's tab index */
var tabIndex: Int
/** The element's title */
var title: String
/** Whether the element should be translated */
var translate: Boolean
/** Focus the element */
fun focus(options: FocusOptions = definedExternally)
/** Blur the element */
fun blur()
/** Click the element */
fun click()
}
/**
* Document structure elements
*/
external interface HTMLHtmlElement : HTMLElement {
/** The document version */
var version: String
}
external interface HTMLHeadElement : HTMLElement
external interface HTMLTitleElement : HTMLElement {
/** The title text */
var text: String
}
external interface HTMLBaseElement : HTMLElement {
/** The base href */
var href: String
/** The base target */
var target: String
}
external interface HTMLLinkElement : HTMLElement, LinkStyle {
/** The link relationship */
var rel: String
/** The linked resource URL */
var href: String
/** The link media */
var media: String
/** The link type */
var type: String
/** The link sizes */
var sizes: DOMTokenList
/** The link as attribute */
var as: String
/** The link crossorigin */
var crossOrigin: String?
/** The link referrer policy */
var referrerPolicy: String
/** The link integrity */
var integrity: String
/** The link hreflang */
var hreflang: String
/** The associated stylesheet */
val sheet: StyleSheet?
}
external interface HTMLMetaElement : HTMLElement {
/** The meta name */
var name: String
/** The meta content */
var content: String
/** The meta charset */
var charset: String
/** The meta http-equiv */
var httpEquiv: String
}
external interface HTMLStyleElement : HTMLElement, LinkStyle {
/** The style media */
var media: String
/** The style type */
var type: String
/** The associated stylesheet */
val sheet: StyleSheet?
}
external interface HTMLBodyElement : HTMLElement, WindowEventHandlersForm Elements
HTML form elements with their specific properties and methods.
/**
* Form and input elements
*/
external interface HTMLFormElement : HTMLElement {
/** The form name */
var name: String
/** The form method */
var method: String
/** The form action */
var action: String
/** The form target */
var target: String
/** The form encoding type */
var enctype: String
/** The form encoding */
var encoding: String
/** Whether the form should not be validated */
var noValidate: Boolean
/** The form's elements */
val elements: HTMLFormControlsCollection
/** The form's length */
val length: Int
/** Submit the form */
fun submit()
/** Reset the form */
fun reset()
/** Check form validity */
fun checkValidity(): Boolean
/** Report form validity */
fun reportValidity(): Boolean
}
external interface HTMLInputElement : HTMLElement {
/** The input type */
var type: String
/** The input name */
var name: String
/** The input value */
var value: String
/** The input default value */
var defaultValue: String
/** Whether the input is checked */
var checked: Boolean
/** Whether the input is checked by default */
var defaultChecked: Boolean
/** Whether the input is disabled */
var disabled: Boolean
/** Whether the input is required */
var required: Boolean
/** Whether the input is readonly */
var readOnly: Boolean
/** The input placeholder */
var placeholder: String
/** The input maximum length */
var maxLength: Int
/** The input minimum length */
var minLength: Int
/** The input size */
var size: Int
/** The input pattern */
var pattern: String
/** The input min value */
var min: String
/** The input max value */
var max: String
/** The input step */
var step: String
/** The input autocomplete */
var autocomplete: String
/** Whether the input has focus */
val focused: Boolean
/** The input validation message */
val validationMessage: String
/** The input validity state */
val validity: ValidityState
/** Whether the input will validate */
val willValidate: Boolean
/** The input files (for file inputs) */
val files: FileList?
/** Select the input text */
fun select()
/** Set selection range */
fun setSelectionRange(start: Int, end: Int, direction: String = definedExternally)
/** Set custom validity */
fun setCustomValidity(error: String)
/** Check validity */
fun checkValidity(): Boolean
/** Report validity */
fun reportValidity(): Boolean
/** Step up the value */
fun stepUp(n: Int = definedExternally)
/** Step down the value */
fun stepDown(n: Int = definedExternally)
}
external interface HTMLButtonElement : HTMLElement {
/** The button type */
var type: String
/** The button name */
var name: String
/** The button value */
var value: String
/** Whether the button is disabled */
var disabled: Boolean
/** The button's form */
val form: HTMLFormElement?
/** The button's form action */
var formAction: String
/** The button's form encoding type */
var formEnctype: String
/** The button's form method */
var formMethod: String
/** Whether the button's form should not validate */
var formNoValidate: Boolean
/** The button's form target */
var formTarget: String
}
external interface HTMLSelectElement : HTMLElement {
/** The select name */
var name: String
/** Whether the select allows multiple selection */
var multiple: Boolean
/** Whether the select is required */
var required: Boolean
/** Whether the select is disabled */
var disabled: Boolean
/** The select size */
var size: Int
/** The selected index */
var selectedIndex: Int
/** The selected value */
var value: String
/** The select options */
val options: HTMLOptionsCollection
/** The select length */
val length: Int
/** Add option to select */
fun add(element: dynamic, before: dynamic = definedExternally)
/** Remove option from select */
fun remove(index: Int = definedExternally)
}
external interface HTMLTextAreaElement : HTMLElement {
/** The textarea name */
var name: String
/** The textarea value */
var value: String
/** The textarea default value */
var defaultValue: String
/** The textarea placeholder */
var placeholder: String
/** The textarea rows */
var rows: Int
/** The textarea columns */
var cols: Int
/** Whether the textarea is disabled */
var disabled: Boolean
/** Whether the textarea is required */
var required: Boolean
/** Whether the textarea is readonly */
var readOnly: Boolean
/** The textarea maximum length */
var maxLength: Int
/** The textarea minimum length */
var minLength: Int
/** The textarea wrap mode */
var wrap: String
/** Select the textarea text */
fun select()
/** Set selection range */
fun setSelectionRange(start: Int, end: Int, direction: String = definedExternally)
}Media Elements
HTML media elements for audio and video content.
/**
* Media elements
*/
external interface HTMLMediaElement : HTMLElement {
/** The media source URL */
var src: String
/** The media crossorigin */
var crossOrigin: String?
/** The media network state */
val networkState: Short
/** The media ready state */
val readyState: Short
/** Whether the media is seeking */
val seeking: Boolean
/** The media current time */
var currentTime: Double
/** The media duration */
val duration: Double
/** Whether the media has ended */
val ended: Boolean
/** Whether the media should autoplay */
var autoplay: Boolean
/** Whether the media should loop */
var loop: Boolean
/** Whether the media should show controls */
var controls: Boolean
/** The media volume */
var volume: Double
/** Whether the media is muted */
var muted: Boolean
/** The media playback rate */
var playbackRate: Double
/** Whether the media is paused */
val paused: Boolean
/** Play the media */
fun play(): Promise<Unit>
/** Pause the media */
fun pause()
/** Load the media */
fun load()
/** Check if media type is supported */
fun canPlay(type: String): String
}
external interface HTMLAudioElement : HTMLMediaElement
external interface HTMLVideoElement : HTMLMediaElement {
/** The video width */
var width: Int
/** The video height */
var height: Int
/** The video poster */
var poster: String
/** The video width in pixels */
val videoWidth: Int
/** The video height in pixels */
val videoHeight: Int
}Collections and Lists
DOM collection interfaces for accessing multiple elements.
/**
* DOM collections
*/
external interface HTMLCollection : ItemArrayLike<Element> {
/** Get element by ID or name */
fun namedItem(name: String): Element?
}
external interface HTMLFormControlsCollection : HTMLCollection {
/** Get form control by ID or name */
override fun namedItem(name: String): dynamic
}
external interface HTMLOptionsCollection : HTMLCollection {
/** The selected index */
var selectedIndex: Int
/** Set option at index */
fun set(index: Int, option: HTMLOptionElement?)
/** Add option */
fun add(element: dynamic, before: dynamic = definedExternally)
/** Remove option at index */
fun remove(index: Int)
}
external interface NodeList : ItemArrayLike<Node> {
/** Execute callback for each node */
fun forEach(callback: (Node, Int, NodeList) -> Unit)
}
external interface DOMTokenList : ItemArrayLike<String> {
/** The token list value */
var value: String
/** Add tokens */
fun add(vararg tokens: String)
/** Remove tokens */
fun remove(vararg tokens: String)
/** Toggle token */
fun toggle(token: String, force: Boolean = definedExternally): Boolean
/** Check if token exists */
fun contains(token: String): Boolean
/** Replace token */
fun replace(oldToken: String, newToken: String): Boolean
/** Check if token is supported */
fun supports(token: String): Boolean
}Utility Interfaces
Supporting interfaces for DOM operations.
/**
* Supporting interfaces
*/
external interface DOMRect {
val x: Double
val y: Double
val width: Double
val height: Double
val top: Double
val right: Double
val bottom: Double
val left: Double
}
external interface DOMRectList : ItemArrayLike<DOMRect>
external interface ValidityState {
val valueMissing: Boolean
val typeMismatch: Boolean
val patternMismatch: Boolean
val tooLong: Boolean
val tooShort: Boolean
val rangeUnderflow: Boolean
val rangeOverflow: Boolean
val stepMismatch: Boolean
val badInput: Boolean
val customError: Boolean
val valid: Boolean
}
external interface FocusOptions {
var preventScroll: Boolean?
}
external interface DOMStringMap {
operator fun get(name: String): String?
operator fun set(name: String, value: String)
}Usage Examples:
import kotlinx.browser.document
import org.w3c.dom.*
// Create and manipulate elements
val div = document.createElement("div") as HTMLElement
div.id = "container"
div.className = "main-container"
div.innerHTML = "<h1>Hello World</h1>"
// Work with forms
val form = document.createElement("form") as HTMLFormElement
form.method = "POST"
form.action = "/submit"
val input = document.createElement("input") as HTMLInputElement
input.type = "text"
input.name = "username"
input.placeholder = "Enter username"
input.required = true
form.appendChild(input)
// Query elements
val elements = document.querySelectorAll(".item")
elements.asList().forEach { element ->
(element as HTMLElement).style.display = "block"
}
// Handle collections
val buttons = document.getElementsByTagName("button")
for (i in 0 until buttons.length) {
val button = buttons.item(i) as HTMLButtonElement
button.disabled = false
}Install with Tessl CLI
npx tessl i tessl/maven-org-jetbrains-kotlin--kotlin-dom-api-compat