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

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: Made changes based on reviewers' comments. 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
« no previous file with comments | « 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 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='mustHave'>Milk</li>
27 <li class='mustHave'>Cereal
sethladd 2013/04/30 16:36:40 still missing must-have
shailentuli 2013/04/30 21:52:08 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 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('.mustHave');
48 print(elements.length); // 2
49
50 // 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.
51 elements = queryAll('#first, .mustHave');
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 You can perform regular List operations on the results of `queryAll()`.
110
111 Use the `[]` operator to access individual elements. You can also use the
112 `first` and `last` getters:
113
114 --------------------------------------------------------------------------------
115 print(elements[2].text); // 'Reddit'
116 print(elements.first.text); // 'Google'
117 print(elements.last.text); // 'Github'
118 --------------------------------------------------------------------------------
119
120 You can iterate over the list, map list elements to a new list, and filter list
121 contents:
122
123 --------------------------------------------------------------------------------
124 for (var element in elements) {
125 doSomethingWith(element);
126 }
127
128 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
129 print(sites.join(', ')); // "Google, StackOverflow, Reddit, Github"
130
131 sites = elements.where((site) => site.text.length != 6);
132 print(sites.first.text); // "StackOverflow"
133 --------------------------------------------------------------------------------
134
135 You can slice `queryAll()` results to obtain a sublist:
136
137 --------------------------------------------------------------------------------
138 var sublist = elements.sublist(1, 3); // Get the elements at positions 1 and 2.
139 print(sublist.first.text); // 'StackOverflow'
140 print(sublist.last.text); // 'Reddit'
141 --------------------------------------------------------------------------------
142
143 The List returned by `queryAll()` is read-only, and attempting to modify it
144 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.
145
146 --------------------------------------------------------------------------------
147 elements.length = 2; // Error message: 'Cannot resize immutable List.'
148 --------------------------------------------------------------------------------
149
150
OLDNEW
« no previous file with comments | « scoped_selectors.asciidoc ('k') | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698