Dart HTML Library

🌐 What is Dart HTML Library?

Dart's HTML library provides tools to manipulate web pages, handle events, and create interactive web applications directly from Dart code in browsers.


import 'dart:html';

void main() {
  querySelector('#myButton')?.onClick.listen((e) => print('Clicked!'));
}

Result:

Button click event listener added

Core HTML Library Features

🎯

DOM Selection

Find and select HTML elements

var element = querySelector('#myId');
var elements = querySelectorAll('.myClass');

⚡

Event Handling

Respond to user interactions

button.onClick.listen((e) {
  print('Button clicked!');
});

🏗️

Element Creation

Create new HTML elements

var div = DivElement()
  ..text = 'Hello World';

🎨

Style Manipulation

Change element appearance

element.style.color = 'blue';
element.classes.add('highlight');

🔹 Selecting Elements

Find HTML elements using CSS selectors:

import 'dart:html';

void main() {
  // Select by ID
  var header = querySelector('#main-header');
  
  // Select by class
  var buttons = querySelectorAll('.btn');
  
  // Select by tag
  var paragraphs = querySelectorAll('p');
  
  // Select with complex selectors
  var firstButton = querySelector('div.container button:first-child');
  
  // Check if element exists
  if (header != null) {
    header.text = 'Welcome to Dart Web!';
  }
}

HTML Before:

<h1 id="main-header">Original Title</h1>

HTML After:

<h1 id="main-header">Welcome to Dart Web!</h1>

🔹 Creating Elements

Build HTML elements programmatically:

import 'dart:html';

void main() {
  // Create a div element
  var container = DivElement()
    ..id = 'my-container'
    ..classes.add('card');
  
  // Create a heading
  var heading = HeadingElement.h2()
    ..text = 'Dynamic Content';
  
  // Create a paragraph
  var paragraph = ParagraphElement()
    ..text = 'This was created with Dart!';
  
  // Create a button with event
  var button = ButtonElement()
    ..text = 'Click Me'
    ..onClick.listen((e) => window.alert('Hello from Dart!'));
  
  // Add elements to container
  container.children.addAll([heading, paragraph, button]);
  
  // Add to page
  document.body?.children.add(container);
}

Generated HTML:

Dynamic Content

This was created with Dart!

🔹 Event Handling

Handle user interactions with event listeners:

import 'dart:html';

void main() {
  var input = querySelector('#name-input') as InputElement?;
  var output = querySelector('#output');
  var submitBtn = querySelector('#submit-btn');
  
  // Handle button click
  submitBtn?.onClick.listen((e) {
    var name = input?.value ?? 'Anonymous';
    output?.text = 'Hello, $name!';
  });
  
  // Handle input changes
  input?.onInput.listen((e) {
    var value = input.value ?? '';
    if (value.length > 10) {
      input.style.borderColor = 'red';
    } else {
      input.style.borderColor = 'green';
    }
  });
  
  // Handle form submission
  var form = querySelector('#my-form') as FormElement?;
  form?.onSubmit.listen((e) {
    e.preventDefault(); // Prevent page reload
    print('Form submitted!');
  });
}

Interactive Example:

Hello, Anonymous!