0
# Core DOM and HTML Elements
1
2
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.
3
4
## Capabilities
5
6
### Document Interface
7
8
Core document interface for accessing and manipulating the HTML document structure.
9
10
```kotlin { .api }
11
/**
12
* The Document interface represents the entire HTML document
13
*/
14
external interface Document : Node, DocumentOrShadowRoot, GlobalEventHandlers {
15
/** The document's root element (usually <html>) */
16
val documentElement: Element?
17
/** The document's head element */
18
val head: HTMLHeadElement?
19
/** The document's body element */
20
val body: HTMLElement?
21
/** The document title */
22
var title: String
23
/** The document URL */
24
val URL: String
25
/** The document domain */
26
var domain: String
27
/** The document's cookie string */
28
var cookie: String
29
/** The document's character set */
30
val characterSet: String
31
/** The document's ready state */
32
val readyState: DocumentReadyState
33
34
/** Create a new element with the specified tag name */
35
fun createElement(localName: String): Element
36
/** Create a new text node with the specified data */
37
fun createTextNode(data: String): Text
38
/** Create a new comment node */
39
fun createComment(data: String): Comment
40
/** Create a document fragment */
41
fun createDocumentFragment(): DocumentFragment
42
43
/** Get element by ID */
44
fun getElementById(elementId: String): Element?
45
/** Get elements by tag name */
46
fun getElementsByTagName(qualifiedName: String): HTMLCollection
47
/** Get elements by class name */
48
fun getElementsByClassName(classNames: String): HTMLCollection
49
/** Get first element matching CSS selector */
50
fun querySelector(selectors: String): Element?
51
/** Get all elements matching CSS selector */
52
fun querySelectorAll(selectors: String): NodeList
53
}
54
55
enum class DocumentReadyState {
56
LOADING,
57
INTERACTIVE,
58
COMPLETE
59
}
60
```
61
62
### Element Interface
63
64
Base interface for all DOM elements with common properties and methods.
65
66
```kotlin { .api }
67
/**
68
* The Element interface represents an element in the document
69
*/
70
external interface Element : Node, ChildNode, ParentNode, Slotable {
71
/** The element's tag name in uppercase */
72
val tagName: String
73
/** The element's ID attribute */
74
var id: String
75
/** The element's class attribute as a string */
76
var className: String
77
/** The element's class list for manipulation */
78
val classList: DOMTokenList
79
/** The element's innerHTML content */
80
var innerHTML: String
81
/** The element's outerHTML content including the element itself */
82
var outerHTML: String
83
/** The element's text content */
84
var textContent: String?
85
/** The element's scrollTop position */
86
var scrollTop: Double
87
/** The element's scrollLeft position */
88
var scrollLeft: Double
89
/** The element's scroll height */
90
val scrollHeight: Int
91
/** The element's scroll width */
92
val scrollWidth: Int
93
/** The element's client height */
94
val clientHeight: Int
95
/** The element's client width */
96
val clientWidth: Int
97
/** The element's client top */
98
val clientTop: Int
99
/** The element's client left */
100
val clientLeft: Int
101
102
/** Get attribute value by name */
103
fun getAttribute(qualifiedName: String): String?
104
/** Set attribute value */
105
fun setAttribute(qualifiedName: String, value: String)
106
/** Remove attribute */
107
fun removeAttribute(qualifiedName: String)
108
/** Check if attribute exists */
109
fun hasAttribute(qualifiedName: String): Boolean
110
/** Get all attributes */
111
fun getAttributeNames(): Array<String>
112
113
/** Get first child element matching CSS selector */
114
fun querySelector(selectors: String): Element?
115
/** Get all child elements matching CSS selector */
116
fun querySelectorAll(selectors: String): NodeList
117
/** Get child elements by tag name */
118
fun getElementsByTagName(qualifiedName: String): HTMLCollection
119
/** Get child elements by class name */
120
fun getElementsByClassName(classNames: String): HTMLCollection
121
122
/** Get element's bounding client rectangle */
123
fun getBoundingClientRect(): DOMRect
124
/** Get element's client rectangles */
125
fun getClientRects(): DOMRectList
126
127
/** Scroll element into view */
128
fun scrollIntoView(arg: dynamic = definedExternally)
129
/** Scroll to specified position */
130
fun scrollTo(x: Double, y: Double)
131
/** Scroll by specified amount */
132
fun scrollBy(x: Double, y: Double)
133
134
/** Insert adjacent HTML */
135
fun insertAdjacentHTML(position: String, text: String)
136
/** Insert adjacent element */
137
fun insertAdjacentElement(where: String, element: Element): Element?
138
/** Insert adjacent text */
139
fun insertAdjacentText(where: String, data: String)
140
141
/** Check if element matches CSS selector */
142
fun matches(selectors: String): Boolean
143
/** Get closest ancestor matching selector */
144
fun closest(selectors: String): Element?
145
}
146
```
147
148
### HTML Element Hierarchy
149
150
Complete HTML element interfaces with specific properties and methods.
151
152
```kotlin { .api }
153
/**
154
* Base interface for all HTML elements
155
*/
156
external interface HTMLElement : Element, GlobalEventHandlers, DocumentAndElementEventHandlers, ElementContentEditable, ElementCSSInlineStyle {
157
/** The element's access key */
158
var accessKey: String
159
/** Whether the element should be focused automatically */
160
var autofocus: Boolean
161
/** The element's content editable state */
162
var contentEditable: String
163
/** Custom data attributes */
164
val dataset: DOMStringMap
165
/** The element's direction */
166
var dir: String
167
/** Whether the element is draggable */
168
var draggable: Boolean
169
/** Whether the element is hidden */
170
var hidden: Boolean
171
/** The element's input mode */
172
var inputMode: String
173
/** Whether the element is content editable */
174
val isContentEditable: Boolean
175
/** The element's language */
176
var lang: String
177
/** Whether the element should be spell checked */
178
var spellcheck: Boolean
179
/** The element's inline style */
180
val style: CSSStyleDeclaration
181
/** The element's tab index */
182
var tabIndex: Int
183
/** The element's title */
184
var title: String
185
/** Whether the element should be translated */
186
var translate: Boolean
187
188
/** Focus the element */
189
fun focus(options: FocusOptions = definedExternally)
190
/** Blur the element */
191
fun blur()
192
/** Click the element */
193
fun click()
194
}
195
196
/**
197
* Document structure elements
198
*/
199
external interface HTMLHtmlElement : HTMLElement {
200
/** The document version */
201
var version: String
202
}
203
204
external interface HTMLHeadElement : HTMLElement
205
206
external interface HTMLTitleElement : HTMLElement {
207
/** The title text */
208
var text: String
209
}
210
211
external interface HTMLBaseElement : HTMLElement {
212
/** The base href */
213
var href: String
214
/** The base target */
215
var target: String
216
}
217
218
external interface HTMLLinkElement : HTMLElement, LinkStyle {
219
/** The link relationship */
220
var rel: String
221
/** The linked resource URL */
222
var href: String
223
/** The link media */
224
var media: String
225
/** The link type */
226
var type: String
227
/** The link sizes */
228
var sizes: DOMTokenList
229
/** The link as attribute */
230
var as: String
231
/** The link crossorigin */
232
var crossOrigin: String?
233
/** The link referrer policy */
234
var referrerPolicy: String
235
/** The link integrity */
236
var integrity: String
237
/** The link hreflang */
238
var hreflang: String
239
/** The associated stylesheet */
240
val sheet: StyleSheet?
241
}
242
243
external interface HTMLMetaElement : HTMLElement {
244
/** The meta name */
245
var name: String
246
/** The meta content */
247
var content: String
248
/** The meta charset */
249
var charset: String
250
/** The meta http-equiv */
251
var httpEquiv: String
252
}
253
254
external interface HTMLStyleElement : HTMLElement, LinkStyle {
255
/** The style media */
256
var media: String
257
/** The style type */
258
var type: String
259
/** The associated stylesheet */
260
val sheet: StyleSheet?
261
}
262
263
external interface HTMLBodyElement : HTMLElement, WindowEventHandlers
264
```
265
266
### Form Elements
267
268
HTML form elements with their specific properties and methods.
269
270
```kotlin { .api }
271
/**
272
* Form and input elements
273
*/
274
external interface HTMLFormElement : HTMLElement {
275
/** The form name */
276
var name: String
277
/** The form method */
278
var method: String
279
/** The form action */
280
var action: String
281
/** The form target */
282
var target: String
283
/** The form encoding type */
284
var enctype: String
285
/** The form encoding */
286
var encoding: String
287
/** Whether the form should not be validated */
288
var noValidate: Boolean
289
/** The form's elements */
290
val elements: HTMLFormControlsCollection
291
/** The form's length */
292
val length: Int
293
294
/** Submit the form */
295
fun submit()
296
/** Reset the form */
297
fun reset()
298
/** Check form validity */
299
fun checkValidity(): Boolean
300
/** Report form validity */
301
fun reportValidity(): Boolean
302
}
303
304
external interface HTMLInputElement : HTMLElement {
305
/** The input type */
306
var type: String
307
/** The input name */
308
var name: String
309
/** The input value */
310
var value: String
311
/** The input default value */
312
var defaultValue: String
313
/** Whether the input is checked */
314
var checked: Boolean
315
/** Whether the input is checked by default */
316
var defaultChecked: Boolean
317
/** Whether the input is disabled */
318
var disabled: Boolean
319
/** Whether the input is required */
320
var required: Boolean
321
/** Whether the input is readonly */
322
var readOnly: Boolean
323
/** The input placeholder */
324
var placeholder: String
325
/** The input maximum length */
326
var maxLength: Int
327
/** The input minimum length */
328
var minLength: Int
329
/** The input size */
330
var size: Int
331
/** The input pattern */
332
var pattern: String
333
/** The input min value */
334
var min: String
335
/** The input max value */
336
var max: String
337
/** The input step */
338
var step: String
339
/** The input autocomplete */
340
var autocomplete: String
341
/** Whether the input has focus */
342
val focused: Boolean
343
/** The input validation message */
344
val validationMessage: String
345
/** The input validity state */
346
val validity: ValidityState
347
/** Whether the input will validate */
348
val willValidate: Boolean
349
/** The input files (for file inputs) */
350
val files: FileList?
351
352
/** Select the input text */
353
fun select()
354
/** Set selection range */
355
fun setSelectionRange(start: Int, end: Int, direction: String = definedExternally)
356
/** Set custom validity */
357
fun setCustomValidity(error: String)
358
/** Check validity */
359
fun checkValidity(): Boolean
360
/** Report validity */
361
fun reportValidity(): Boolean
362
/** Step up the value */
363
fun stepUp(n: Int = definedExternally)
364
/** Step down the value */
365
fun stepDown(n: Int = definedExternally)
366
}
367
368
external interface HTMLButtonElement : HTMLElement {
369
/** The button type */
370
var type: String
371
/** The button name */
372
var name: String
373
/** The button value */
374
var value: String
375
/** Whether the button is disabled */
376
var disabled: Boolean
377
/** The button's form */
378
val form: HTMLFormElement?
379
/** The button's form action */
380
var formAction: String
381
/** The button's form encoding type */
382
var formEnctype: String
383
/** The button's form method */
384
var formMethod: String
385
/** Whether the button's form should not validate */
386
var formNoValidate: Boolean
387
/** The button's form target */
388
var formTarget: String
389
}
390
391
external interface HTMLSelectElement : HTMLElement {
392
/** The select name */
393
var name: String
394
/** Whether the select allows multiple selection */
395
var multiple: Boolean
396
/** Whether the select is required */
397
var required: Boolean
398
/** Whether the select is disabled */
399
var disabled: Boolean
400
/** The select size */
401
var size: Int
402
/** The selected index */
403
var selectedIndex: Int
404
/** The selected value */
405
var value: String
406
/** The select options */
407
val options: HTMLOptionsCollection
408
/** The select length */
409
val length: Int
410
411
/** Add option to select */
412
fun add(element: dynamic, before: dynamic = definedExternally)
413
/** Remove option from select */
414
fun remove(index: Int = definedExternally)
415
}
416
417
external interface HTMLTextAreaElement : HTMLElement {
418
/** The textarea name */
419
var name: String
420
/** The textarea value */
421
var value: String
422
/** The textarea default value */
423
var defaultValue: String
424
/** The textarea placeholder */
425
var placeholder: String
426
/** The textarea rows */
427
var rows: Int
428
/** The textarea columns */
429
var cols: Int
430
/** Whether the textarea is disabled */
431
var disabled: Boolean
432
/** Whether the textarea is required */
433
var required: Boolean
434
/** Whether the textarea is readonly */
435
var readOnly: Boolean
436
/** The textarea maximum length */
437
var maxLength: Int
438
/** The textarea minimum length */
439
var minLength: Int
440
/** The textarea wrap mode */
441
var wrap: String
442
443
/** Select the textarea text */
444
fun select()
445
/** Set selection range */
446
fun setSelectionRange(start: Int, end: Int, direction: String = definedExternally)
447
}
448
```
449
450
### Media Elements
451
452
HTML media elements for audio and video content.
453
454
```kotlin { .api }
455
/**
456
* Media elements
457
*/
458
external interface HTMLMediaElement : HTMLElement {
459
/** The media source URL */
460
var src: String
461
/** The media crossorigin */
462
var crossOrigin: String?
463
/** The media network state */
464
val networkState: Short
465
/** The media ready state */
466
val readyState: Short
467
/** Whether the media is seeking */
468
val seeking: Boolean
469
/** The media current time */
470
var currentTime: Double
471
/** The media duration */
472
val duration: Double
473
/** Whether the media has ended */
474
val ended: Boolean
475
/** Whether the media should autoplay */
476
var autoplay: Boolean
477
/** Whether the media should loop */
478
var loop: Boolean
479
/** Whether the media should show controls */
480
var controls: Boolean
481
/** The media volume */
482
var volume: Double
483
/** Whether the media is muted */
484
var muted: Boolean
485
/** The media playback rate */
486
var playbackRate: Double
487
/** Whether the media is paused */
488
val paused: Boolean
489
490
/** Play the media */
491
fun play(): Promise<Unit>
492
/** Pause the media */
493
fun pause()
494
/** Load the media */
495
fun load()
496
/** Check if media type is supported */
497
fun canPlay(type: String): String
498
}
499
500
external interface HTMLAudioElement : HTMLMediaElement
501
502
external interface HTMLVideoElement : HTMLMediaElement {
503
/** The video width */
504
var width: Int
505
/** The video height */
506
var height: Int
507
/** The video poster */
508
var poster: String
509
/** The video width in pixels */
510
val videoWidth: Int
511
/** The video height in pixels */
512
val videoHeight: Int
513
}
514
```
515
516
### Collections and Lists
517
518
DOM collection interfaces for accessing multiple elements.
519
520
```kotlin { .api }
521
/**
522
* DOM collections
523
*/
524
external interface HTMLCollection : ItemArrayLike<Element> {
525
/** Get element by ID or name */
526
fun namedItem(name: String): Element?
527
}
528
529
external interface HTMLFormControlsCollection : HTMLCollection {
530
/** Get form control by ID or name */
531
override fun namedItem(name: String): dynamic
532
}
533
534
external interface HTMLOptionsCollection : HTMLCollection {
535
/** The selected index */
536
var selectedIndex: Int
537
/** Set option at index */
538
fun set(index: Int, option: HTMLOptionElement?)
539
/** Add option */
540
fun add(element: dynamic, before: dynamic = definedExternally)
541
/** Remove option at index */
542
fun remove(index: Int)
543
}
544
545
external interface NodeList : ItemArrayLike<Node> {
546
/** Execute callback for each node */
547
fun forEach(callback: (Node, Int, NodeList) -> Unit)
548
}
549
550
external interface DOMTokenList : ItemArrayLike<String> {
551
/** The token list value */
552
var value: String
553
/** Add tokens */
554
fun add(vararg tokens: String)
555
/** Remove tokens */
556
fun remove(vararg tokens: String)
557
/** Toggle token */
558
fun toggle(token: String, force: Boolean = definedExternally): Boolean
559
/** Check if token exists */
560
fun contains(token: String): Boolean
561
/** Replace token */
562
fun replace(oldToken: String, newToken: String): Boolean
563
/** Check if token is supported */
564
fun supports(token: String): Boolean
565
}
566
```
567
568
### Utility Interfaces
569
570
Supporting interfaces for DOM operations.
571
572
```kotlin { .api }
573
/**
574
* Supporting interfaces
575
*/
576
external interface DOMRect {
577
val x: Double
578
val y: Double
579
val width: Double
580
val height: Double
581
val top: Double
582
val right: Double
583
val bottom: Double
584
val left: Double
585
}
586
587
external interface DOMRectList : ItemArrayLike<DOMRect>
588
589
external interface ValidityState {
590
val valueMissing: Boolean
591
val typeMismatch: Boolean
592
val patternMismatch: Boolean
593
val tooLong: Boolean
594
val tooShort: Boolean
595
val rangeUnderflow: Boolean
596
val rangeOverflow: Boolean
597
val stepMismatch: Boolean
598
val badInput: Boolean
599
val customError: Boolean
600
val valid: Boolean
601
}
602
603
external interface FocusOptions {
604
var preventScroll: Boolean?
605
}
606
607
external interface DOMStringMap {
608
operator fun get(name: String): String?
609
operator fun set(name: String, value: String)
610
}
611
```
612
613
**Usage Examples:**
614
615
```kotlin
616
import kotlinx.browser.document
617
import org.w3c.dom.*
618
619
// Create and manipulate elements
620
val div = document.createElement("div") as HTMLElement
621
div.id = "container"
622
div.className = "main-container"
623
div.innerHTML = "<h1>Hello World</h1>"
624
625
// Work with forms
626
val form = document.createElement("form") as HTMLFormElement
627
form.method = "POST"
628
form.action = "/submit"
629
630
val input = document.createElement("input") as HTMLInputElement
631
input.type = "text"
632
input.name = "username"
633
input.placeholder = "Enter username"
634
input.required = true
635
636
form.appendChild(input)
637
638
// Query elements
639
val elements = document.querySelectorAll(".item")
640
elements.asList().forEach { element ->
641
(element as HTMLElement).style.display = "block"
642
}
643
644
// Handle collections
645
val buttons = document.getElementsByTagName("button")
646
for (i in 0 until buttons.length) {
647
val button = buttons.item(i) as HTMLButtonElement
648
button.disabled = false
649
}
650
```