A client-side library to manipulate and traverse DOM objects in a easy and intuitive way.

How to install

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

  domnode: ^1.0.0

Install dependencies:

> pub get

Import the library:

import 'package:domnode/core.dart';

void main() {
  // your code here


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 a single node or multiple nodes. Use the $ method to find elements. For example, consider the following code:

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

// gests multiple nodes
Iterable<DomNode> nodes = $('p');
nodes.forEach((DomNode node) {

In both cases $() returns a DomNode object. But in the first case we access a single node and in the second case we traverse multiple nodes.


// gets an attribute

// sets an attribute
$('a[id="anchor1"]').setAttr('title', 'New title');

// does the attribute exist?

CSS attributes

// gets a CSS attribute

// sets a CSS attribute
$('h1').setCssAttr('background-color', 'yellow');

CSS classes

// adds a class

// removes a class

// adds or removes a class

// does the class exist?

Inner contents

DomNode body = $('body');

// 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
$('h1').setText('New title');

// gets the inner html of a single element

// sets the inner html of a single element
$('p[id="p1"]').setHtml('This is text is <em>italic</em>');

// removes all childnodes of an element

Saving arbitrary data

// sets arbitrary data to an element
$('h1').setData('test', {'one': 1, 'two': 2, 'three': 3});

// gets data from an element

Creating instances from a given source

// creates an instance from a string
DomNode node = new DomNode.fromString(
    '<root><item id="1" /><item id="2" /><item id="3" /></root>');

// creates an instance from a document
DomNode node = new DomNode.fromDocument(myDocument);

// creates an instance from a DOM element
DomNode node = new DomNode.fromElement(myElement);

Creating nodes from scratch

// creates a span and appends it to the body
DomNode node = new DomNode('span',
    attrs: {'id': 'span_id', 'title': 'Span Title'}, text: 'Some text here');

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

  // appends more items
  target.append(new DomNode('item', attrs: {'id': '101', 'title': 'Item 1'}));
  target.append(new DomNode('item', attrs: {'id': '102', 'title': 'Item 2'}));
  target.append(new DomNode('item', attrs: {'id': '103', 'title': 'Item 3'}));

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