Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(501)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: selectors.asciidoc

Issue 14109034: Recipes for using CSS Selectors with dart:html (Closed) Base URL: https://github.com/dart-lang/cookbook.git@master
Patch Set: Removed unwanted file. Created 7 years, 8 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« scoped_selectors.asciidoc ('K') | « scoped_selectors.asciidoc ('k') | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: selectors.asciidoc
diff --git a/selectors.asciidoc b/selectors.asciidoc
new file mode 100644
index 0000000000000000000000000000000000000000..5fe9d2c5d7096d3f48eaf3fc0a35f4547434f2d6
--- /dev/null
+++ b/selectors.asciidoc
@@ -0,0 +1,149 @@
+=== 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 in the
sethladd 2013/04/29 20:59:01 provided in or provided from?
Kathy Walrath 2013/04/29 21:17:02 top level -> top-level And I'd say "provided by"
shailentuli 2013/04/30 02:59:31 provided by
shailentuli 2013/04/30 02:59:31 Done.
+`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/29 20:59:01 typically, class names are like must-have
shailentuli 2013/04/30 02:59:31 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">
+
Kathy Walrath 2013/04/29 21:17:02 delete this blank line?
shailentuli 2013/04/30 02:59:31 Done.
+ import 'dart:html';
+
+ void main() {
+
+ // Find by id.
Kathy Walrath 2013/04/29 21:17:02 id => ID
shailentuli 2013/04/30 02:59:31 Done.
+ Element element = query('#first');
+ window.console.log(element.id); // 'first'
sethladd 2013/04/29 20:59:01 please use print() instead
shailentuli 2013/04/30 02:59:31 Done.
+ window.console.log(element.innerHtml); // 'Milk'
+
+ // Find by class.
+ List<Element> elements = queryAll('.mustHave');
+ window.console.log(elements.length); // 2
+
+ // Find by ID and class.
+ elements = queryAll('#first, .mustHave');
sethladd 2013/04/29 20:59:01 a comma is like an "or", so this is #first OR .mus
shailentuli 2013/04/30 02:59:31 Yes. Comma acts like an "or".
+ window.console.log(elements.length); // 2
+
+ // Find by tag.
+ elements = queryAll('li');
+ window.console.log(elements.length); // 5
+
+ // Use hierarchical selectors.
+ elements = queryAll('li > ul > li');
+ window.console.log(elements.first.innerHtml); // 'Bran Flakes'
sethladd 2013/04/29 20:59:01 wouldn't elements.first.text work here?
shailentuli 2013/04/30 02:59:31 Yes. Making change global.
+
+ // Use pseudo-elements.
+ element = query('li:nth-child(1)');
+ window.console.log(element.innerHtml); // 'Milk'
+
+ // Find by attribute.
+ elements = queryAll('[href *= Nut]');
+ window.console.log(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 the
+http://www.w3.org/TR/css3-selectors/[The CSS Selector Specification guide].
+
+==== Discussion
+
+Calling `queryAll()` returns a readonly list of DOM elements:
sethladd 2013/04/29 20:59:01 read-only ?
Kathy Walrath 2013/04/29 21:17:02 Yes. Although I think you can just leave out "rea
shailentuli 2013/04/30 02:59:31 Done.
shailentuli 2013/04/30 02:59:31 Leaving it at based on Kathy's suggestion.
+
+--------------------------------------------------------------------------------
+<!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 doSomethingWith(element) {}
sethladd 2013/04/29 20:59:01 You don't use this function here. Old?
shailentuli 2013/04/30 02:59:31 Removing it.
+
+ 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()`:
sethladd 2013/04/29 20:59:01 this is confusing to me, injecting this text in th
shailentuli 2013/04/30 02:59:31 I've broken things up into several little sections
+
+--------------------------------------------------------------------------------
+// Index.
+window.console.log(elements[2].innerHtml); // 'Reddit'
sethladd 2013/04/29 20:59:01 global: use print()
shailentuli 2013/04/30 02:59:31 Done.
+window.console.log(elements.last.innerHtml); // 'Github'
+
+// Iterate.
+for (var element in elements) {
+ doSomethingWith(element);
+}
+
+// Map results to create a new list.
+var sites = elements.map((site) => site.innerHtml);
sethladd 2013/04/29 20:59:01 you can pull .join() up to this line
sethladd 2013/04/29 20:59:01 use .text if it works
shailentuli 2013/04/30 02:59:31 The print results don't fit on the line then. Leav
shailentuli 2013/04/30 02:59:31 Done.
+window.console.log(sites.join(', ')); // "Google, StackOverflow, Reddit, Github"
+
+// Filter results.
sethladd 2013/04/29 20:59:01 you say filter, but you also reverse. Make this mo
shailentuli 2013/04/30 02:59:31 Done.
+sites = elements.reversed.where((site) => site.innerHtml.length != 6);
+window.console.log(
+ sites.map((site) => site.innerHtml).first); // "StackOverflow"
sethladd 2013/04/29 20:59:01 pull the map out of the print()
shailentuli 2013/04/30 02:59:31 Done.
+
+// Get a subset of the results.
+var sublist = elements.sublist(1, 3);
+window.console.log(sublist.first.innerHtml); // 'StackOverflow'
+window.console.log(sublist.last.innerHtml); // 'Reddit'
+
+// Call predicates.
+window.console.log(
+ elements.any((element) => element.innerHtml.length == 6)); // true
+--------------------------------------------------------------------------------
+
+Trying to modify the results of `queryAll()` generates an error:
sethladd 2013/04/29 20:59:01 Please explain why.
shailentuli 2013/04/30 02:59:31 Done.
+
+--------------------------------------------------------------------------------
+elements.length = 2; // Error message: 'Cannot resize immutable List.'
+--------------------------------------------------------------------------------
+
+
« scoped_selectors.asciidoc ('K') | « scoped_selectors.asciidoc ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698