domnode 2.0.1

  • Installing
  • Versions
  • 34


A client-side library to manipulate and traverse DOM objects in a easy and intuitive way. This library does not pretend to be a replacement for the DOM library but, in many cases, it can drastically simplify the code.

How to install

Edit your pubspec.yaml file and add the domnode package:

  domnode: any

Install dependencies:

> pub get

Import the library:

import 'package:domnode/core.dart';

void main() {
  // your code here


Use query(String cssSelectors, [DomNode context]) to find elements and $(Object source, [Callback callback]) to create elements. Note that both dart:html and package:domnode share the same query function, so it's necessary to hide it from the dart:html library. For example:

For example:

// hides the native 'query' function to prevent collisions
import 'dart:html' hide query;
import 'package:domnode/core.dart';

void main() {
  // searches a node from the current document
  var node = query('#node_id');

  // searches a children node
  var subnode = query('#subnode_id', node);

  // creates an anchor node and appens it to the document's body
  query('body').append($('<a href="#" />')
    ..attr['href'] = 'path-to-page'
    ..html = 'Click me <em>Please</em>');

  // creates an anchor and changes some attributes
  $('<a />')
    ..attr = {'href': 'path-to-page', '_target': 'blank'}
    ..css = {'text-decoration': 'none', 'color': 'blue'}
    ..text = 'Some text...';
  // wraps the document around a DomNode object
  var doc = $(document);
  // creates a document from a string
  var root = $('''
    <item id="1">Item 1</item>
    <item id="2">Item 2</item>
    <item id="3">Item 3</item>


Getting elements from a document

DomNode is the main class of this library. It extends the IterableBase class, which means that you can think of it as if it were a single element or multiple elements. Use the query method to select zero, one or more elements. For example, consider the following code:

// gets a single node
var node = query('h1');
if (node.length == 0) {
  print('Node not found');

// gests multiple nodes
var nodes = query('p');
nodes.forEach((node) {


Note that in the following example we are hidding the query function from the dart:html library to prevent collisions.

import 'dart:html' hide query;
import 'package:domnode/core.dart';

void main() {
  var listener = (e) {
    print('A ${e.type} event has been fired');

    // attaches an event listener
    ..on('click', listener)
    // fires an event
    // removes an event listener'click', listener);


var node = query('#id');

// gets an attribute

// sets an attribute
node.attr['title'] = 'New title';

// does the attribute exist?
assert(node.attr['id'] == null);

// removes an attribute

CSS attributes

var node = query('#id');

// gets a CSS attribute

// sets a CSS attribute
node.css['background-color'] = 'yellow';

// does a CSS attribute exist?
assert(node.css['background-color'] != null);

// removes a CSS attribute

CSS classes

var node = query('#id');

// adds a class

// removes a class

// does the class exist?

// adds or removes a class

Inner contents

var body = query('body');
var node = query('#id');

// appends a new element
body.append('<p>New paragraph</p>');

// prepends a new element
body.prepend('<p>New paragraph at the beginning</p>');

// gets the inner text of a single element

// changes the inner text of a single element
node.text = 'New title';

// gets the inner html of a single element

// sets the inner html of a single element
node.html = 'This is text is <em>italic</em>';

// removes all childnodes of an element


DomNode node = query('.myDiv');

// sets node size
  ..width = 640
  ..height = 480;
print('width: ${node.width}, height: ${node.height}');

// border size
print('border width ${node.borderWidth}, ' +
    'border height: ${node.borderHeight}');

// padding size
print('padding width ${node.paddingWidth}, ' +
    'padding height: ${node.paddingHeight}');

// margin size
print('margin width ${node.marginWidth}, ' +
    'margin height: ${node.marginHeight}');

Saving arbitrary data

var node = query('#id');

// sets arbitrary data to an element['test'] = {'one': 1, 'two': 2, 'three': 3};

// gets data from an element

Creating instances from a given source

You can use the $ function to create instances from different sources.

// creates an instance from a string
var node1 =
    $('<root><item id="1" /><item id="2" /><item id="3" /></root>');

// creates an instance from a document
var node2 = $(document);

// creates an instance from a DOM element
var element = document.querySelector('h1');
DomNode node3 = $(element);

Creating nodes from scratch

Note the intensive use of the $ function.

// creates a span and appends it to the body
query('body').append($('<span />')
  ..attr['id'] = 'span_id'
  ..attr['title'] = 'Span title'
  ..text = 'Some text here');

// creates a complex node
var node = $('<root />', (target) {
  // apends a new node with childNodes
  target.append($('<user />', (DomNode target) {
    target.append($('<first-name />')..text = 'James');
    target.append($('<last-name />')..text = 'Bond');
    target.append($('<age />')..text = 158);
        .append($('<bio />')..html = 'My name is Bond, <em>James Bond</em>');

  // appends three subitems
  for (var i = 0; i < 3; i++) {
    target.append($('<item />')
      ..attr['id'] = 'item_${i}'
      ..attr['title'] = 'Item ${i}');

  // prepends raw content
  target.prepend('<summary>Look at my horse, my horse is amazing</summary>');

1. Depend on it

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

  domnode: "^2.0.1"

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:domnode/core.dart';

import 'package:domnode/dom_node.dart';
Version Uploaded Documentation Archive
2.0.1 Jul 10, 2016 Go to the documentation of domnode 2.0.1 Download domnode 2.0.1 archive
2.0.0 Jul 6, 2016 Go to the documentation of domnode 2.0.0 Download domnode 2.0.0 archive
1.6.0 Jul 4, 2016 Go to the documentation of domnode 1.6.0 Download domnode 1.6.0 archive
1.5.1 Jul 2, 2016 Go to the documentation of domnode 1.5.1 Download domnode 1.5.1 archive
1.3.0 Jun 29, 2016 Go to the documentation of domnode 1.3.0 Download domnode 1.3.0 archive
1.2.1 Jun 23, 2016 Go to the documentation of domnode 1.2.1 Download domnode 1.2.1 archive
1.2.0 Jun 23, 2016 Go to the documentation of domnode 1.2.0 Download domnode 1.2.0 archive
1.1.2 Jun 22, 2016 Go to the documentation of domnode 1.1.2 Download domnode 1.1.2 archive
1.1.1 Jun 22, 2016 Go to the documentation of domnode 1.1.1 Download domnode 1.1.1 archive
1.1.0 Jun 22, 2016 Go to the documentation of domnode 1.1.0 Download domnode 1.1.0 archive

All 13 versions...


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

  • Dart: 2.0.0-dev.46.0
  • pana: 0.10.6


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


Detected platforms: web

Platform components identified in package: html.


  • Maintain

    Changelog entries help clients to follow the progress in your code.

  • 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 domnode.dart.

  • Fix analysis and formatting issues.

    Analysis or formatting checks reported 3 hints.

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

    line: 84 col: 28
    'JSON' is deprecated and shouldn't be used.

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

    line: 15 col: 57
    '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
html_unescape >=0.1.4 <1.0.0 0.1.5