Manipulating the DOM

Revisiting the DOM to make it more Dart-esque has a lot of advantages. You can use elements and nodes as actual Dart objects, and you can loop through child nodes just like you can with other Dart collections.

For example, here’s some code that finds a specific element and then performs various operations on the element and its children.

#import("dart:html");

main() {
  // Find an element.
  var elem = document.query("#id");

  // Handle events.
  elem.on.click.add((event) => print('click!'));

  // Set an attribute.
  elem.attributes['name'] = 'value';

  // Add a child element.
  elem.elements.add(new Element.tag("p"));

  // Add a CSS class to each child element.
  elem.elements.forEach((e) => e.classes.add("important"));
  }