HTML interop

Learn DOM access with dart:html.

dart:html

dart:html is Dart's browser DOM library. It provides HTML element selection, event listening and document manipulation. It runs only in the browser; it does not compile in a console application.

Core API: document.querySelector('#app') selects an element, element.text = 'Hello' changes text, element.onClick.listen(...) listens for clicks. dart:html is used in web applications compiled with dart2js and dart2wasm.

DOM manipulation

With dart:html you select an element and change its content. Example: final el = document.querySelector('#app'); el?.text = 'Hello';. This changes the text of the element with id app.

Event listening is similar: el?.onClick.listen((e) => print('clicked'));. When the user clicks in the browser this function runs. dart:html is built on top of dart:js_interop; in modern Dart 3 new projects prefer dart:js_interop. But dart:html is still common; you will see it in older code.

Exercise Print dart:html info

Add import 'dart:html';. Define a function setupDom that calls document.querySelector('#app'). In main add print('dart:html: DOM library') and print('Selector: querySelector').

Show example solution

import 'dart:html';

void setupDom() {
  final el = document.querySelector('#app');
  el?.text = 'Hello';
}

void main() {
  print('dart:html: DOM library');
  print('Selector: querySelector');
}

Test yourself

Match the dart:html parts

dart:html

DOM library
document

Document root
querySelector

Selector
Element

Node type
Where does dart:html run?
- In the browser
- In a CLI app
- On the server
- On mobile
Show answer

In the browser — dart:html runs only in the browser.

The querySelector call

document.____('#app');

Show answer

document.querySelector('#app');

Next lesson: JS interop

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies