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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side 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, 7 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 unified diff | Download patch
« scoped_selectors.asciidoc ('K') | « scoped_selectors.asciidoc ('k') | no next file » | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
(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 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.
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='mustHave'>Milk</li>
27 <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.
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
Kathy Walrath 2013/04/29 21:17:02 delete this blank line?
shailentuli 2013/04/30 02:59:31 Done.
38 import 'dart:html';
39
40 void main() {
41
42 // Find by id.
Kathy Walrath 2013/04/29 21:17:02 id => ID
shailentuli 2013/04/30 02:59:31 Done.
43 Element element = query('#first');
44 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.
45 window.console.log(element.innerHtml); // 'Milk'
46
47 // Find by class.
48 List<Element> elements = queryAll('.mustHave');
49 window.console.log(elements.length); // 2
50
51 // Find by ID and class.
52 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".
53 window.console.log(elements.length); // 2
54
55 // Find by tag.
56 elements = queryAll('li');
57 window.console.log(elements.length); // 5
58
59 // Use hierarchical selectors.
60 elements = queryAll('li > ul > li');
61 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.
62
63 // Use pseudo-elements.
64 element = query('li:nth-child(1)');
65 window.console.log(element.innerHtml); // 'Milk'
66
67 // Find by attribute.
68 elements = queryAll('[href *= Nut]');
69 window.console.log(elements.length); // 1
70
71 }
72 </script>
73 <script src="packages/browser/dart.js"></script>
74 </body>
75 </html>
76 --------------------------------------------------------------------------------
77
78 For a comprehensive list of selectors that you can use for querying, see the
79 http://www.w3.org/TR/css3-selectors/[The CSS Selector Specification guide].
80
81 ==== Discussion
82
83 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.
84
85 --------------------------------------------------------------------------------
86 <!DOCTYPE html>
87
88 <html>
89 <body>
90 <ol>
91 <li>Google</li>
92 <li>StackOverflow</li>
93 <li>Reddit</li>
94 <li>Github</li>
95 </ol>
96
97 <script type="application/dart">
98 import 'dart:html';
99
100 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.
101
102 void main() {
103 List<Element> elements = queryAll('li');
104 }
105 </script>
106 <script src="packages/browser/dart.js"></script>
107 </body>
108 </html>
109
110 --------------------------------------------------------------------------------
111
112 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
113
114 --------------------------------------------------------------------------------
115 // Index.
116 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.
117 window.console.log(elements.last.innerHtml); // 'Github'
118
119 // Iterate.
120 for (var element in elements) {
121 doSomethingWith(element);
122 }
123
124 // Map results to create a new list.
125 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.
126 window.console.log(sites.join(', ')); // "Google, StackOverflow, Reddit, Github"
127
128 // 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.
129 sites = elements.reversed.where((site) => site.innerHtml.length != 6);
130 window.console.log(
131 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.
132
133 // Get a subset of the results.
134 var sublist = elements.sublist(1, 3);
135 window.console.log(sublist.first.innerHtml); // 'StackOverflow'
136 window.console.log(sublist.last.innerHtml); // 'Reddit'
137
138 // Call predicates.
139 window.console.log(
140 elements.any((element) => element.innerHtml.length == 6)); // true
141 --------------------------------------------------------------------------------
142
143 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.
144
145 --------------------------------------------------------------------------------
146 elements.length = 2; // Error message: 'Cannot resize immutable List.'
147 --------------------------------------------------------------------------------
148
149
OLDNEW
« 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