domelement 1.0.0

  • Installing
  • Versions
  • 45


The dart:html library provides a set of functions and classes to access DOM nodes. But, sometimes, making the most simple and common operations results in a counterintuitive experience. For instance, let's say that you want to 'prepend' some element into another element:

// prepends element0 into element1
final element0 = querySelector('#element0');
final element1 = querySelector('#element1');
if (element1.hasChildNodes()) {
  element1.insertBefore(element0, element1.childNodes.first);
} else {

Using this library the previous code can be written as follows:

// prepends element0 into element1
final element0 = find('#element0');
final element1 = find('#element1');
element1.addElement(element0, prepend: true);

The above example is only one of many examples in which the code can be drastically simplified. In any case, I would like to remark that this library does not pretend to replace the official Dart's library. But in most cases you won't need to use it.


Edit your pubspec.yaml and add the library dependency:

  # specify the version number, for example ^0.0.1
  domelement: <version number>

Alternatively, you can pull the library from the GitHub repository:

  # specify the tag name, for example v0.0.1 (ref entry can be omitted)
    url: git://
    ref: <tag name>

And then gets the dependencies:

> pub get

Finally, import the library from the source code:

import 'package:domelement/core.dart';

void main() {
  final element = find('#element_id');

Finding elements

Use find() and findAll() to select elements from the current document:

// finds a single element
final p1 = find('#p1');
if (p1 == null) {
  throw 'Item not found';

// finds multiple elements
final items = findAll('p');
for (final item in items) {

Creating elements

Use the $() function to create elements. For example:

// creates an anchor element and appends it to the document's body
final anchor = $('<a />')
  // sets some attributes
  ..attr['href'] = 'http://blah blah blah'
  ..attr['title'] = 'Anchor title'
  // sets some CSS attributes
  ..css['color'] = '#333'
  ..css['font-weight'] = 'bold'
  // sets inner texts
  ..text = 'Click here...';

// creates an element from a previous native element
final root = $(document.documentElement);

The $('<a />') expression is equivalent to new DomElement.fromString('<a />'). And $(document.documentElement) is equivalent to new DomElement.fromElement(document.documentElement).


As I mentioned previously this library does not pretend to replace the official Dart's library. It can't cover all cases, even though it covers the most common cases.

The most important limitation is that it operates only over DOM Elements. If you want to operate over other type of nodes (like Texts or Comments), you'd better use the official Dart's library.

Additional info

For additional info, check out the API documentation:



  • Initial version, created by Stagehand

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  domelement: "^1.0.0"

2. Install it

You can install packages from the command line:

with pub:

$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

      import 'package:domelement/core.dart';

      import 'package:domelement/dom_element.dart';
Version Uploaded Documentation Archive
1.0.0 Feb 28, 2017 Go to the documentation of domelement 1.0.0 Download domelement 1.0.0 archive
0.2.3 Aug 13, 2016 Go to the documentation of domelement 0.2.3 Download domelement 0.2.3 archive
0.2.2 Aug 11, 2016 Go to the documentation of domelement 0.2.2 Download domelement 0.2.2 archive
0.2.1 Aug 10, 2016 Go to the documentation of domelement 0.2.1 Download domelement 0.2.1 archive
0.2.0 Aug 8, 2016 Go to the documentation of domelement 0.2.0 Download domelement 0.2.0 archive
0.1.1 Aug 8, 2016 Go to the documentation of domelement 0.1.1 Download domelement 0.1.1 archive
0.1.0 Jul 24, 2016 Go to the documentation of domelement 0.1.0 Download domelement 0.1.0 archive
0.0.2 Jul 20, 2016 Go to the documentation of domelement 0.0.2 Download domelement 0.0.2 archive
0.0.1 Jul 20, 2016 Go to the documentation of domelement 0.0.1 Download domelement 0.0.1 archive


We analyzed this package on Jun 12, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.60.0
  • pana: 0.11.3


Describes how popular the package is relative to other packages. [more]
2 / 100
Code health derived from static analysis. [more]
100 / 100
Reflects how tidy and up-to-date the package is. [more]
71 / 100
Overall score:
Weighted score of the above. [more]
Learn more about scoring.


Detected platforms: web

Platform components identified in package: html.


  • Package is getting outdated.

    The package was released 67 weeks ago.

  • Maintain an example.

    Create a short demo in the example/ directory to show how to use this package. Common file name patterns include: main.dart, example.dart or you could also use domelement.dart.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 1 hint.

    Strong-mode analysis of lib/dom_element.dart gave the following hint:

    line: 91 col: 59
    'ATTRIBUTE' is deprecated and shouldn't be used.

  • Use analysis_options.yaml.

    Rename old .analysis_options file to analysis_options.yaml.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=1.0.0 <2.0.0
browser >=0.10.0 <0.11.0 0.10.0+3
dart_to_js_script_rewriter >=1.0.1 <2.0.0 1.0.3
Transitive dependencies
args 1.4.3
async 2.0.7
barback 0.15.2+16
charcode 1.1.1
collection 1.14.10
csslib 0.14.4
html 0.13.3+1
logging 0.11.3+1
path 1.6.0
pool 1.3.5
source_span 1.4.0
stack_trace 1.9.2
utf 0.9.0+4