8

I'm starting with some of the Dart examples. Then I wanted to query the DOM with document.query('#someId') as described here, but it seems there was no query method in document. Also creating a new element by `new Element.tag('p') doesn't work.

Then I figure out that it will work, when I change the imported package from dart:dom to dart:html. But using both of them gives me a bunch of duplicate definition of _XYZ.

So I wonder:

  1. what's the difference between dart:html and dart:dom package
  2. which one should I use
  3. why can't I use both
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
Andreas Köberle
  • 106,652
  • 57
  • 273
  • 297

4 Answers4

10

Answering a bit out of order

  1. Which one should I use: you should use dart:html it provides the cleanest abstraction on top of the DOM.

  2. why cant I use both: it should strictly not be needed, but you can actually get to the underlying dart:dom implementations from dart:html using a dirty hack described here. The better and more clean solution is to use Dart's ability to rename imports i.e. #import('dart:dom', prefix: 'dom'); as described by @munificent below.

  3. whats the different between dart:html and dart:dom package. I tend to think of the difference between them as similar to JQuery (dart:html) vs JS DOM manipulation (dart:dom).

The Dart team is trying hard to make the dart:html API as easy and unsurprising (in the good way) to use as we have gotten used to from libraries such as JQuery (dom manipulation), Tree.js (WebGL programming) and D3 (SVG drawing). Further they also try to follow one API style across all these areas of functionality so that the SVG or WebGL API use similar constructs as the DOM API, thus ensuring that all the parts play nicely together.

Update: as of may 2012 dart:dom is now deprecated and will be removed.

Community
  • 1
  • 1
Lars Tackmann
  • 20,275
  • 13
  • 66
  • 83
7

Lars did an excellent job with your question. I'll just add to:

why cant I use both

You can, actually. The problem is that both libraries use the same names for a few things (mainly window). When you import both of them, those names collide, which Dart doesn't allow. To resolve that, you can import one of them with a prefix:

#import('dart:html');
#import('dart:dom', prefix: 'dom');

Then, when you refer to a name imported from dart:html, you just use the name. When you want a DOM one, you prefix it:

window     // dart:html window
dom.window // dart:dom window
munificent
  • 11,946
  • 2
  • 38
  • 55
6

An update to all the answers, and probably makes this question no longer applicable is that dart:dom has been deprecated.

See this post on dartlang website.

Chris Buckett
  • 13,738
  • 5
  • 39
  • 46
0

The short answer to add to the excellent answers already given: Use dart:html whenever you can. Use dart:dom when you must (and enter a bug if you have to).

dma
  • 1,758
  • 10
  • 25