What's the difference between "dart:html" and "dart:dom" package?

Question

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

Answer 1

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.