Documentation
- API reference
- Github project
- We appreciate feedback, issue reports, and pull requests.
Similar projects
- universal_io (cross-platform dart:io)
- jsdom (DOM implementation in Javascript)
Getting started
1. Add dependency
In pubspec.yaml:
dependencies:
universal_html: ^2.2.4
2. Use
import "package:universal_html/html.dart";
void main() {
// Create a DOM tree
final div = DivElement();
div.append(Element.tag("h1")
..classes.add("greeting")
..appendText("Hello world!"));
// Print outer HTML
print(div.outerHtml);
// --> <div><h1>Hello world</h1></div>
// Do a CSS query
print(div.querySelector("div > .greeting").text);
// --> Hello world
}
Examples
Parsing HTML
Use parseHtmlDocument:
import 'package:universal_html/parsing.dart';
void main() {
final htmlDocument = parseHtmlDocument('<html>...</html>');
}
Parsing XML
Use parseXmlDocument:
import 'package:universal_html/parsing.dart';
void main() {
final xmlDocument = parseXmlDocument('<xml>...</xml>');
}
Scraping a website
Load a Window with WindowController:
import 'dart:io' show Cookie;
import 'package:universal_html/controller.dart';
Future main() async {
// Load a document.
final controller = WindowController();
controller.defaultHttpClient.userAgent = 'My Hacker News client';
await controller.openHttp(
method: 'GET',
uri: Uri.parse("https://news.ycombinator.com/"),
onRequest: (HttpClientRequest request) {
// Add custom headers
request.headers.set('Authorization', 'headerValue');
request.cookies.add(Cookie('cookieName', 'cookieValue'));
},
onResponse: (HttpClientResponse response) {
print('Status code: ${response.statusCode}');
},
);
// Select the top story using a CSS query
final titleElements = controller.document.querySelectorAll(".athing > .title");
final topStoryTitle = titleElements.first.text;
// Print result
print("Top Hacker News story is: $topStoryTitle");
}
Testing
import 'package:universal_html/controller.dart';
import 'package:test/test.dart';
void main() {
setUp(() {
WindowController.instance = WindowController();
});
test('test #1', () {
// ...
});
test('test #2', () {
// ...
});
}