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| Index: selectors.asciidoc |
| diff --git a/selectors.asciidoc b/selectors.asciidoc |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..94504b8fdfc3a8633e064d6a53e4d541bb2b327e |
| --- /dev/null |
| +++ b/selectors.asciidoc |
| @@ -0,0 +1,152 @@ |
| +=== Using CSS selectors to find DOM elements |
| + |
| +=== Problem |
| + |
| +You want to find DOM elements on a web page. |
| + |
| +=== Solution |
| + |
| +Use the top-level `query()` and `queryAll()` functions provided by the |
| +`dart:html` library. Both functions take CSS selectors as arguments. The |
| +`query()` function returns the first matching element, and the `queryAll()` |
| +function returns all matching elements. |
| + |
| +=== Example |
| + |
| +Here are a few examples of the using `query()` and `queryAll()` with CSS |
| +selectors to find DOM elements: |
| + |
| +-------------------------------------------------------------------------------- |
| +<!DOCTYPE html> |
| + |
| +<html> |
| + <body> |
| + <h1>Breakfast</h1> |
| + <ul> |
| + <li id='first' class='must-have'>Milk</li> |
| + <li class='must-have'>Cereal |
| + <ul> |
| + <li>Bran Flakes</li> |
| + <li><a href='https://en.wikipedia.org/wiki/Nut_(fruit)'>Nuts</a></li> |
| + </ul> |
| + </li> |
| + <li>Juice</li> |
| + </ul> |
| + |
| + <script type="application/dart"> |
| + import 'dart:html'; |
| + |
| + void main() { |
| + |
| + // Find by ID. |
| + Element element = query('#first'); |
| + print(element.id); // 'first' |
| + print(element.text); // 'Milk' |
| + |
| + // Find by class. |
| + List<Element> elements = queryAll('.must-have'); |
| + print(elements.length); // 2 |
| + |
| + // Find by ID or class. |
| + elements = queryAll('#first, .must-have'); |
| + print(elements.length); // 2 |
| + |
| + // Find by tag. |
| + elements = queryAll('li'); |
| + print(elements.length); // 5 |
| + |
| + // Use hierarchical selectors. |
| + elements = queryAll('li > ul > li'); |
| + print(elements.first.text); // 'Bran Flakes' |
| + |
| + // Use pseudo-elements. |
| + element = query('li:nth-child(1)'); |
| + print(element.text); // 'Milk' |
| + |
| + // Find by attribute. |
| + elements = queryAll('[href *= Nut]'); |
| + print(elements.length); // 1 |
| + |
| + } |
| + </script> |
| + <script src="packages/browser/dart.js"></script> |
| + </body> |
| +</html> |
| +-------------------------------------------------------------------------------- |
| + |
| +For a comprehensive list of selectors that you can use for querying, see |
| +http://www.w3.org/TR/css3-selectors/[The CSS Selector Specification guide]. |
| + |
| +==== Discussion |
| + |
| +Calling `queryAll()` returns a list of DOM elements: |
| + |
| +-------------------------------------------------------------------------------- |
| +<!DOCTYPE html> |
| + |
| +<html> |
| + <body> |
| + <ol> |
| + <li>Google</li> |
| + <li>StackOverflow</li> |
| + <li>Reddit</li> |
| + <li>Github</li> |
| + </ol> |
| + |
| + <script type="application/dart"> |
| + import 'dart:html'; |
| + |
| + void main() { |
| + List<Element> elements = queryAll('li'); |
| + } |
| + </script> |
| + <script src="packages/browser/dart.js"></script> |
| + </body> |
| +</html> |
| + |
| +-------------------------------------------------------------------------------- |
| + |
| +Use the `[]` operator to access individual elements. You can also use the |
| +`first` and `last` getters: |
| + |
| +-------------------------------------------------------------------------------- |
| +print(elements[2].text); // 'Reddit' |
| +print(elements.first.text); // 'Google' |
| +print(elements.last.text); // 'Github' |
| +-------------------------------------------------------------------------------- |
| + |
| +You can iterate over the list, map list elements to a new list, and filter list |
| +contents: |
| + |
| +-------------------------------------------------------------------------------- |
| +for (var element in elements) { |
| + doSomethingWith(element); |
| +} |
| + |
| +Iterable sites = elements.map((site) => site.text); |
| +print(sites.join(', ')); // "Google, StackOverflow, Reddit, Github" |
| + |
| +sites = elements.where((site) => site.text.length != 6); |
| +print(sites.first.text); // "StackOverflow" |
| +-------------------------------------------------------------------------------- |
| + |
| +You can slice the list to obtain a sublist: |
| + |
| +-------------------------------------------------------------------------------- |
| +var sublist = elements.sublist(1, 3); // Get the elements at positions 1 and 2. |
| +print(sublist.first.text); // 'StackOverflow' |
| +print(sublist.last.text); // 'Reddit' |
| +-------------------------------------------------------------------------------- |
| + |
| +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
|
| +or remove list elements. Attempting to change the list in any way generates an |
| +error: |
| + |
| +-------------------------------------------------------------------------------- |
| +elements.length = 2; // Error message: 'Cannot resize immutable List.' |
| +-------------------------------------------------------------------------------- |
| + |
| +Other recipes in this chapter show how you can create elements and insert them |
| +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
|
| + |
| + |
