selectors.asciidoc - Issue 14109034: Recipes for using CSS Selectors with dart:html

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: Changes based on Kathy's 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

OLD	NEW
(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='must-have'>Milk</li>

	27 <li class='must-have'>Cereal

	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('.must-have');

	48 print(elements.length); // 2

	49

	50 // Find by ID or class.

	51 elements = queryAll('#first, .must-have');

	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 Use the `[]` operator to access individual elements. You can also use the

	110 `first` and `last` getters:

	111

	112 --------------------------------------------------------------------------------

	113 print(elements[2].text); // 'Reddit'

	114 print(elements.first.text); // 'Google'

	115 print(elements.last.text); // 'Github'

	116 --------------------------------------------------------------------------------

	117

	118 You can iterate over the list, map list elements to a new list, and filter list

	119 contents:

	120

	121 --------------------------------------------------------------------------------

	122 for (var element in elements) {

	123 doSomethingWith(element);

	124 }

	125

	126 Iterable sites = elements.map((site) => site.text);

	127 print(sites.join(', ')); // "Google, StackOverflow, Reddit, Github"

	128

	129 sites = elements.where((site) => site.text.length != 6);

	130 print(sites.first.text); // "StackOverflow"

	131 --------------------------------------------------------------------------------

	132

	133 You can slice the list to obtain a sublist:

	134

	135 --------------------------------------------------------------------------------

	136 var sublist = elements.sublist(1, 3); // Get the elements at positions 1 and 2.

	137 print(sublist.first.text); // 'StackOverflow'

	138 print(sublist.last.text); // 'Reddit'

	139 --------------------------------------------------------------------------------

	140

	141 Since the list returned by `queryAll()` is read only, you cannot add, modify,

	142 or remove list elements. Attempting to change the list in any way generates an

	143 error:

	144

	145 --------------------------------------------------------------------------------

	146 elements.length = 2; // Error message: 'Cannot resize immutable List.'

	147 --------------------------------------------------------------------------------

	148

	149 Other recipes in this chapter show how you can create elements and insert them

	150 into the DOM, add modify existing DOM elements.

	151

	152

OLD	NEW

« no previous file with comments | « scoped_selectors.asciidoc ('k') | no next file » | no next file with comments »