| Index: recipes/web/html/selectors_basic.html
|
| diff --git a/recipes/web/html/selectors_basic.html b/recipes/web/html/selectors_basic.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..1d7cfa81ffb742ae67fef405c638506cf6e454f8
|
| --- /dev/null
|
| +++ b/recipes/web/html/selectors_basic.html
|
| @@ -0,0 +1,52 @@
|
| +<!DOCTYPE html>
|
| +
|
| +<html>
|
| + <body>
|
| +
|
| + <h1 class='myClass'></h1>
|
| +
|
| + <p id="myId"></p>
|
| +
|
| + <div class="myClass"></div>
|
| +
|
| + <p class='class1 class2'></p>
|
| +
|
| + <p class='class1'></p>
|
| +
|
| + <script type="application/dart">
|
| + import 'dart:html';
|
| +
|
| + void main() {
|
| +
|
| + // You can query by ID.
|
| + Element element = query('#myId');
|
| + element.innerHtml = 'You can query by ID';
|
| +
|
| + // You can query by class.
|
| + element = query('.myClass');
|
| + element.innerHtml = 'You can query by class';
|
| +
|
| + // You can query by tag name.
|
| + element = query('div');
|
| + element.innerHtml = 'You can query by element type';
|
| +
|
| + // You can find multiple matches using queryAll.
|
| + List<Element> elements = queryAll('.myClass');
|
| + elements.forEach((el) => el.style.textDecoration = 'underline');
|
| +
|
| + // 'Or' matchers: an element matching *either* selector.
|
| + elements = queryAll('#myId, div');
|
| + assert(elements.length == 2);
|
| +
|
| + // 'And' matchers: an element matching *both* selectors.
|
| + elements = queryAll('#myId div');
|
| + assert(elements.length == 0);
|
| +
|
| + // An element having *both* classes.
|
| + elements = queryAll('.class1.class2');
|
| + assert(elements.length == 1);
|
| + }
|
| + </script>
|
| + <script src="packages/browser/dart.js"></script>
|
| + </body>
|
| +</html>
|
|
|
Chromium Code Reviews
Issue 14109034:
Recipes for using CSS Selectors with dart:html (Closed)
Base URL: https://github.com/dart-lang/cookbook.git@master