Chromium Code Reviews Chromium Code Reviews
Issue 14109034:
Recipes for using CSS Selectors with dart:html (Closed)
Base URL: https://github.com/dart-lang/cookbook.git@master| OLD | NEW |
|---|---|
| (Empty) | |
| 1 === Using CSS selectors to find DOM elements | |
| 2 | |
| 3 === Problem | |
| 4 | |
| 5 You want to find DOM elements on a web page. | |
| 6 | |
| 7 === Solution | |
| 8 | |
| 9 Use the top-level `query()` and `queryAll()` functions provided by the | |
| 10 `dart:html` library. Both functions take CSS selectors as arguments. The | |
| 11 `query()` function returns the first matching element, and the `queryAll()` | |
| 12 function returns all matching elements. | |
| 13 | |
| 14 === Example | |
| 15 | |
| 16 Here are a few examples of the using `query()` and `queryAll()` with CSS | |
| 17 selectors to find DOM elements: | |
| 18 | |
| 19 -------------------------------------------------------------------------------- | |
| 20 <!DOCTYPE html> | |
| 21 | |
| 22 <html> | |
| 23 <body> | |
| 24 <h1>Breakfast</h1> | |
| 25 <ul> | |
| 26 <li id='first' class='must-have'>Milk</li> | |
| 27 <li class='must-have'>Cereal | |
| 28 <ul> | |
| 29 <li>Bran Flakes</li> | |
| 30 <li><a href='https://en.wikipedia.org/wiki/Nut_(fruit)'>Nuts</a></li> | |
| 31 </ul> | |
| 32 </li> | |
| 33 <li>Juice</li> | |
| 34 </ul> | |
| 35 | |
| 36 <script type="application/dart"> | |
| 37 import 'dart:html'; | |
| 38 | |
| 39 void main() { | |
| 40 | |
| 41 // Find by ID. | |
| 42 Element element = query('#first'); | |
| 43 print(element.id); // 'first' | |
| 44 print(element.text); // 'Milk' | |
| 45 | |
| 46 // Find by class. | |
| 47 List<Element> elements = queryAll('.must-have'); | |
| 48 print(elements.length); // 2 | |
| 49 | |
| 50 // Find by ID or class. | |
| 51 elements = queryAll('#first, .must-have'); | |
| 52 print(elements.length); // 2 | |
| 53 | |
| 54 // Find by tag. | |
| 55 elements = queryAll('li'); | |
| 56 print(elements.length); // 5 | |
| 57 | |
| 58 // Use hierarchical selectors. | |
| 59 elements = queryAll('li > ul > li'); | |
| 60 print(elements.first.text); // 'Bran Flakes' | |
| 61 | |
| 62 // Use pseudo-elements. | |
| 63 element = query('li:nth-child(1)'); | |
| 64 print(element.text); // 'Milk' | |
| 65 | |
| 66 // Find by attribute. | |
| 67 elements = queryAll('[href *= Nut]'); | |
| 68 print(elements.length); // 1 | |
| 69 | |
| 70 } | |
| 71 </script> | |
| 72 <script src="packages/browser/dart.js"></script> | |
| 73 </body> | |
| 74 </html> | |
| 75 -------------------------------------------------------------------------------- | |
| 76 | |
| 77 For a comprehensive list of selectors that you can use for querying, see | |
| 78 http://www.w3.org/TR/css3-selectors/[The CSS Selector Specification guide]. | |
| 79 | |
| 80 ==== Discussion | |
| 81 | |
| 82 Calling `queryAll()` returns a list of DOM elements: | |
| 83 | |
| 84 -------------------------------------------------------------------------------- | |
| 85 <!DOCTYPE html> | |
| 86 | |
| 87 <html> | |
| 88 <body> | |
| 89 <ol> | |
| 90 <li>Google</li> | |
| 91 <li>StackOverflow</li> | |
| 92 <li>Reddit</li> | |
| 93 <li>Github</li> | |
| 94 </ol> | |
| 95 | |
| 96 <script type="application/dart"> | |
| 97 import 'dart:html'; | |
| 98 | |
| 99 void main() { | |
| 100 List<Element> elements = queryAll('li'); | |
| 101 } | |
| 102 </script> | |
| 103 <script src="packages/browser/dart.js"></script> | |
| 104 </body> | |
| 105 </html> | |
| 106 | |
| 107 -------------------------------------------------------------------------------- | |
| 108 | |
| 109 Use the `[]` operator to access individual elements. You can also use the | |
| 110 `first` and `last` getters: | |
| 111 | |
| 112 -------------------------------------------------------------------------------- | |
| 113 print(elements[2].text); // 'Reddit' | |
| 114 print(elements.first.text); // 'Google' | |
| 115 print(elements.last.text); // 'Github' | |
| 116 -------------------------------------------------------------------------------- | |
| 117 | |
| 118 You can iterate over the list, map list elements to a new list, and filter list | |
| 119 contents: | |
| 120 | |
| 121 -------------------------------------------------------------------------------- | |
| 122 for (var element in elements) { | |
| 123 doSomethingWith(element); | |
| 124 } | |
| 125 | |
| 126 Iterable sites = elements.map((site) => site.text); | |
| 127 print(sites.join(', ')); // "Google, StackOverflow, Reddit, Github" | |
| 128 | |
| 129 sites = elements.where((site) => site.text.length != 6); | |
| 130 print(sites.first.text); // "StackOverflow" | |
| 131 -------------------------------------------------------------------------------- | |
| 132 | |
| 133 You can slice the list to obtain a sublist: | |
| 134 | |
| 135 -------------------------------------------------------------------------------- | |
| 136 var sublist = elements.sublist(1, 3); // Get the elements at positions 1 and 2. | |
| 137 print(sublist.first.text); // 'StackOverflow' | |
| 138 print(sublist.last.text); // 'Reddit' | |
| 139 -------------------------------------------------------------------------------- | |
| 140 | |
| 141 Since the list returned by `queryAll()` is read-only, you cannot add, modify, | |
|
Kathy Walrath
2013/04/30 22:48:54
read-only -> read only
since this follows the noun
| |
| 142 or remove list elements. Attempting to change the list in any way generates an | |
| 143 error: | |
| 144 | |
| 145 -------------------------------------------------------------------------------- | |
| 146 elements.length = 2; // Error message: 'Cannot resize immutable List.' | |
| 147 -------------------------------------------------------------------------------- | |
| 148 | |
| 149 Other recipes in this chapter show how you can create elements and insert them | |
| 150 into the DOM, add modify existing DOM elements. | |
|
Kathy Walrath
2013/04/30 22:48:54
Links?
shailentuli
2013/05/06 08:33:21
Punting on this. These recipes are still in a bit
| |
| 151 | |
| 152 | |
| OLD | NEW |
