| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 |
| 3 <html> |
| 4 <body> |
| 5 <h1>Breakfast</h1> |
| 6 <ul> |
| 7 <li id='first' class='must-have'>Milk</li> |
| 8 <li class='must-have'>Cereal |
| 9 <ul> |
| 10 <li>Bran Flakes</li> |
| 11 <li><a href='https://en.wikipedia.org/wiki/Nut_(fruit)'>Nuts</a></li> |
| 12 </ul> |
| 13 </li> |
| 14 <li>Juice</li> |
| 15 </ul> |
| 16 |
| 17 <script type="application/dart"> |
| 18 |
| 19 import 'dart:html'; |
| 20 |
| 21 void main() { |
| 22 |
| 23 // Find by id. |
| 24 Element element = query('#first'); |
| 25 assert(element.id == 'first'); |
| 26 assert(element.text == 'Milk'); |
| 27 |
| 28 // Find by class. |
| 29 List<Element> elements = queryAll('.must-have'); |
| 30 assert(elements.length == 2); |
| 31 |
| 32 // Find by ID and class. |
| 33 elements = queryAll('#first, .must-have'); |
| 34 assert(elements.length == 2); |
| 35 |
| 36 // Find by tag. |
| 37 elements = queryAll('li'); |
| 38 assert(elements.length == 5); |
| 39 |
| 40 // Use hierarchical selectors. |
| 41 elements = queryAll('li > ul > li'); |
| 42 assert(elements.first.text == "Bran Flakes"); |
| 43 |
| 44 // Use pseudo-elements. |
| 45 element = query('li:nth-child(1)'); |
| 46 assert(element.text == 'Milk'); |
| 47 |
| 48 // Find by attribute. |
| 49 elements = queryAll('[href *= Nut]'); |
| 50 assert(elements.length == 1); |
| 51 |
| 52 } |
| 53 </script> |
| 54 <script src="packages/browser/dart.js"></script> |
| 55 </body> |
| 56 </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