| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 |
| 3 <html> |
| 4 <body> |
| 5 |
| 6 <h1 class='myClass'></h1> |
| 7 |
| 8 <p id="myId"></p> |
| 9 |
| 10 <div class="myClass"></div> |
| 11 |
| 12 <p class='class1 class2'></p> |
| 13 |
| 14 <p class='class1'></p> |
| 15 |
| 16 <script type="application/dart"> |
| 17 import 'dart:html'; |
| 18 |
| 19 void main() { |
| 20 |
| 21 // You can query by ID. |
| 22 Element element = query('#myId'); |
| 23 element.innerHtml = 'You can query by ID'; |
| 24 |
| 25 // You can query by class. |
| 26 element = query('.myClass'); |
| 27 element.innerHtml = 'You can query by class'; |
| 28 |
| 29 // You can query by tag name. |
| 30 element = query('div'); |
| 31 element.innerHtml = 'You can query by element type'; |
| 32 |
| 33 // You can find multiple matches using queryAll. |
| 34 List<Element> elements = queryAll('.myClass'); |
| 35 elements.forEach((el) => el.style.textDecoration = 'underline'); |
| 36 |
| 37 // 'Or' matchers: an element matching *either* selector. |
| 38 elements = queryAll('#myId, div'); |
| 39 assert(elements.length == 2); |
| 40 |
| 41 // 'And' matchers: an element matching *both* selectors. |
| 42 elements = queryAll('#myId div'); |
| 43 assert(elements.length == 0); |
| 44 |
| 45 // An element having *both* classes. |
| 46 elements = queryAll('.class1.class2'); |
| 47 assert(elements.length == 1); |
| 48 } |
| 49 </script> |
| 50 <script src="packages/browser/dart.js"></script> |
| 51 </body> |
| 52 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 14109034:
Recipes for using CSS Selectors with dart:html (Closed)
Base URL: https://github.com/dart-lang/cookbook.git@master