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..fed4fda548759fbb5d168e7ea9dea90a115a4c91 |
| --- /dev/null |
| +++ b/selectors.asciidoc |
| @@ -0,0 +1,150 @@ |
| +=== 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='mustHave'>Milk</li> |
| + <li class='mustHave'>Cereal |
|
sethladd
2013/04/30 16:36:40
still missing must-have
shailentuli
2013/04/30 21:52:08
Done.
|
| + <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('.mustHave'); |
| + print(elements.length); // 2 |
| + |
| + // Find by ID and class. |
|
sethladd
2013/04/30 16:36:40
and is confusing here. I think you mean 'or'
shailentuli
2013/04/30 21:52:08
Done.
|
| + elements = queryAll('#first, .mustHave'); |
| + 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> |
| + |
| +-------------------------------------------------------------------------------- |
| + |
| +You can perform regular List operations on the results of `queryAll()`. |
| + |
| +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); |
| +} |
| + |
| +var sites = elements.map((site) => site.text); |
|
sethladd
2013/04/30 16:36:40
please annotate sites
shailentuli
2013/04/30 21:52:08
Making it Iterable sites ...
Calling map() return
|
| +print(sites.join(', ')); // "Google, StackOverflow, Reddit, Github" |
| + |
| +sites = elements.where((site) => site.text.length != 6); |
| +print(sites.first.text); // "StackOverflow" |
| +-------------------------------------------------------------------------------- |
| + |
| +You can slice `queryAll()` results 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' |
| +-------------------------------------------------------------------------------- |
| + |
| +The List returned by `queryAll()` is read-only, and attempting to modify it |
| +generates an error: |
|
sethladd
2013/04/30 16:36:40
where is the explanation for why it generates an e
shailentuli
2013/04/30 21:52:08
Done.
|
| + |
| +-------------------------------------------------------------------------------- |
| +elements.length = 2; // Error message: 'Cannot resize immutable List.' |
| +-------------------------------------------------------------------------------- |
| + |
| + |
