domnode 1.1.2 domnode: ^1.1.2 copied to clipboard
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);