domnode 1.1.2 copy "domnode: ^1.1.2" to clipboard
domnode: ^1.1.2 copied to clipboard

outdatedDart 1 only

A client-side library to easily change and traverse DOM documents.

DomNode #

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:

dependencies:
  domnode: ^1.0.0

Install dependencies:

> pub get

Import the library:

import 'package:domnode/core.dart';

void main() {
  // your code here
}

Examples #

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) {
  print(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.

Attributes #

// gets an attribute
print($('a[id="anchor1"]').getAttr('href'));

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

// does the attribute exist?
assert($('a[id="anchor1"]').hasAttr('id'));

CSS attributes #

// gets a CSS attribute
print($('h1').getCssAttr('background-color'));

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

CSS classes #

// adds a class
$('h1').addClass('class1');

// removes a class
$('h1').removeClass('class1');

// adds or removes a class
$('h1').toggleClass('class1');

// does the class exist?
assert($('h1').hasClass('class1'));

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
print($('h1').getText());

// changes the inner text of a single element
$('h1').setText('New title');

// gets the inner html of a single element
print($('p[id="p1"]').getHtml());

// 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
$('div[id="div1"]').clean();

Saving arbitrary data #

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

// gets data from an element
print($('h1').getData('test'));

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>');
print(node);

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

// 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');
$('body').append(node);

// 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));
    target.append(
      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>');
});
print(node);
0
likes
0
pub points
0%
popularity

Publisher

unverified uploader

A client-side library to easily change and traverse DOM documents.

Repository (GitHub)
View/report issues

License

unknown (LICENSE)

Dependencies

browser

More

Packages that depend on domnode