domquery 1.1.4

  • README.md
  • CHANGELOG.md
  • Installing
  • Versions
  • 37

domQuery

An abstraction layer of the DOM implementation that allows us to manipulate and traverse documents in an easy and intuitive way. This library is not intended as a replacement for the DOM implementation. But in most cases you will not need to use native DOM functions.

How to install

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

dependencies:
  domquery: ">=1.0.0 <2.0.0"

You can install packages from the command line:

pub get

Now in your Dart code, you can use:

import 'package:domquery/utils.dart';

void main() {
  // your code here
}

Examples

Getting elements from a document

The main class of this library is the DomNode class. DomNode extends the IterableBase class. That means that you can think of it as either a single object or a list of object. For example, consider the following code:

// gets a single element
var title = domQuery('h1');

// gests multiple elements
var items = domQuery('p');
items.forEach((item) {
  print(item);
});

In both cases, the domQuery function returns a DomNode object. But in the first case, we are using it to access a single element and in the other case we are accessing multiple elements.

Attributes

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

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

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

CSS attributes

// gets a CSS attribute
print(domQuery('h1').css('background-color'));

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

CSS classes

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

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

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

Inner contents

var body = domQuery('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(domQuery('h1').text());

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

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

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

// removes all childnodes of an element
domQuery('div[id="div1"]').clean();

Saving arbitrary data

// saves arbitrary data in an element
domQuery('h1').data('my-array', [1, 2, 3, 4]);

// retrieves data from an element
print(domQuery('h1').data('my-array'));

Creating instances from a given source

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

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

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

Creating documents from scratch

var 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', attributes: {'id': 101, 'title': 'Item 1'}));
  target.append(new DomNode('item', attributes: {'id': 102, 'title': 'Item 2'}));
  target.append(new DomNode('item', attributes: {'id': 103, 'title': 'Item 3'}));
  
  // appends raw content
  target.append('<summary>Look at my horse, my horse is amazing</summary>');
});
print(node);

0.1.4 (2014-09-02)

Features:

  • Add CSS support

1.1.0 (2014-09-13)

Features:

  • Add CSS classes support
  • Add hasAttr method
  • Improve documentation
  • Fix some bugs

1. Depend on it

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


dependencies:
  domquery: "^1.1.4"

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:domquery/utils.dart';
        
Version Uploaded Documentation Archive
1.1.4 Jun 19, 2016 Go to the documentation of domquery 1.1.4 Download domquery 1.1.4 archive
1.1.3 Sep 14, 2014 Go to the documentation of domquery 1.1.3 Download domquery 1.1.3 archive
1.1.2 Sep 13, 2014 Go to the documentation of domquery 1.1.2 Download domquery 1.1.2 archive
1.1.1 Sep 13, 2014 Go to the documentation of domquery 1.1.1 Download domquery 1.1.1 archive
1.1.0 Sep 13, 2014 Go to the documentation of domquery 1.1.0 Download domquery 1.1.0 archive
1.0.0 Sep 6, 2014 Go to the documentation of domquery 1.0.0 Download domquery 1.0.0 archive
0.1.5 Sep 2, 2014 Go to the documentation of domquery 0.1.5 Download domquery 0.1.5 archive
0.1.4 Sep 2, 2014 Go to the documentation of domquery 0.1.4 Download domquery 0.1.4 archive
0.1.3 Sep 2, 2014 Go to the documentation of domquery 0.1.3 Download domquery 0.1.3 archive
0.1.2 Sep 2, 2014 Go to the documentation of domquery 0.1.2 Download domquery 0.1.2 archive

All 12 versions...

Analysis

This feature is new.
We welcome feedback.
More details: scoring.

We analyzed this package, and provided a score, details, and suggestions below.

  • completed on Feb 3, 2018
  • Dart: 2.0.0-dev.20.0
  • pana: 0.10.1

Scores

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

Platforms

Detected platforms: web

Platform components identified in package: html.

Suggestions

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

Dependencies

Package Constraint Resolved Available
Direct dependencies
browser >=0.10.0+2 <0.11.0 0.10.0+2