@@ -80,6 +80,33 @@ Select an element by its `id`:
80
80
81
81
* ` #top ` -> ` <h1 id="top">very tree</h1> `
82
82
83
+ Select an element by attribute:
84
+
85
+ * ` [id="top"] ` -> ` <h1 id="top">very tree</h1> `
86
+
87
+ ---
88
+ # css selector combinations
89
+
90
+ You can combine id, class, attribute, and element selectors.
91
+
92
+ All of the constraints must match:
93
+
94
+ ``` js
95
+ document .querySelector (' h1#cool.row[x="5"]' )
96
+ ```
97
+
98
+ will match:
99
+
100
+ ``` html
101
+ <h1 id =" cool" class =" row" x =" 5" >whatever</h1 >
102
+ ```
103
+
104
+ but not:
105
+
106
+ ``` html
107
+ <h1 id =" sweet" class =" row" x =" 5" >hey</h1 >
108
+ ```
109
+
83
110
---
84
111
# nested css selectors
85
112
@@ -234,19 +261,196 @@ and now the body will have an `input` element with
234
261
---
235
262
# ` .insertBefore() `
236
263
264
+ We can also insert elements before another element.
265
+ Given this html:
237
266
267
+ ``` html
268
+ <html >
269
+ <body >
270
+ <ul >
271
+ <li class =" zero" >zero</li >
272
+ <li class =" one" >one</li >
273
+ <li class =" three" >three</li >
274
+ </ul >
275
+ </body >
276
+ </html >
277
+ ```
278
+
279
+ ---
280
+ # ` .insertBefore() `
281
+
282
+ We can insert an element before ` <li>three</li> ` :
283
+
284
+ ``` js
285
+ var ul = document .querySelector (' ul' );
286
+ var three = ul .querySelector (' .three' );
287
+
288
+ var two = document .createElement (' li' );
289
+ two .textContent = ' two' ;
290
+ two .setAttribute (' class' , ' two' );
291
+
292
+ ul .insertBefore (two, three);
293
+ ```
294
+ ---
295
+ # ` .insertBefore() `
296
+
297
+ and now the html will be:
298
+
299
+ ``` html
300
+ <html >
301
+ <body >
302
+ <ul >
303
+ <li class =" zero" >zero</li >
304
+ <li class =" one" >one</li >
305
+ <li class =" two" >two</li >
306
+ <li class =" three" >three</li >
307
+ </ul >
308
+ </body >
309
+ </html >
310
+ ```
238
311
239
312
---
240
313
# ` .style `
241
314
315
+ We can adjust css on the fly with ` .style ` .
316
+ Using the html from the previous example, we can do:
317
+
318
+ ``` js
319
+ var zero = document .querySelector (' .zero' );
320
+ zero .style .color = ' purple' ;
321
+ ```
322
+
323
+ and now the first element in the list will have purple text.
324
+
242
325
---
243
- # .classList
326
+ # events
327
+
328
+ We can respond to page actions by using
329
+ ` .addEventListener() ` . With this html:
330
+
331
+ ``` html
332
+ <body >
333
+ <button >wow</button >
334
+ </body >
335
+ ```
336
+
244
337
---
245
338
# events
246
339
340
+ we can insert an element when somebody clicks the button:
341
+
342
+ ``` js
343
+ var button = document .querySelector (' button' );
344
+ button .addEventListener (' click' , function (ev ) {
345
+ var msg = document .createElement (' div' );
346
+ msg .textContent = new Date ().toISOString ();
347
+ document .body .appendChild (msg);
348
+ });
349
+ ```
350
+
351
+ ---
352
+ # forms and preventDefault
353
+
354
+ Sometimes events have default actions, like forms will send
355
+ a GET or POST request when the submit button is clicked. You
356
+ can override these actions by calling ` preventDefault() ` on
357
+ the event object.
358
+
359
+ Given this html:
360
+
361
+ ``` html
362
+ <form >
363
+ <input type =" text" name =" cool" >
364
+ <input type =" submit" >
365
+ </form >
366
+ ```
367
+
368
+ ---
369
+ # forms and preventDefault
370
+
371
+ We can capture the submit event and prevent the default
372
+ action:
373
+
374
+ ``` js
375
+ var form = document .querySelector (' form' );
376
+ form .addEventListener (' submit' , function (ev ) {
377
+ ev .preventDefault ();
378
+ form .querySelector (' [name=cool]' )
379
+ });
380
+ ```
381
+
247
382
---
248
383
# xhr
249
384
385
+ We can make http requests with the DOM too!
386
+
387
+ It's really awkward to do this with raw javascript:
388
+
389
+ ``` js
390
+ var xhr = new XMLHttpRequest ;
391
+ xhr .addEventListener (' readystatechange' , function (ev ) {
392
+ if (xhr .readyState === 4 ) {
393
+ console .log (' body=' , xhr .responseText );
394
+ }
395
+ });
396
+ xhr .open (' POST' , ' /' , true );
397
+ xhr .send (' foo=bar&x=5' );
398
+ ```
399
+
250
400
---
251
- #
401
+ # xhr
402
+
403
+ Luckily, there is a package on npm we can use. First do:
404
+
405
+ ```
406
+ npm install xhr
407
+ ```
408
+
409
+ then in your browser code you can do:
410
+
411
+ ``` js
412
+ var xhr = require (' xhr' );
413
+ var opts = {
414
+ method: ' POST' ,
415
+ uri: ' /' ,
416
+ body: ' foo=bar&x=5'
417
+ };
418
+ xhr (opts, function (err , res , body ) {
419
+ console .log (' body=' , body);
420
+ });
421
+ ```
422
+
423
+ ---
424
+ # xhr
425
+
426
+ or with the help of the built-in querystring module:
427
+
428
+ ``` js
429
+ var xhr = require (' xhr' );
430
+ var qs = require (' querystring' );
431
+ var opts = {
432
+ method: ' POST' ,
433
+ uri: ' /' ,
434
+ body: qs .stringify ({ foo: ' bar' , x: 5 })
435
+ };
436
+ xhr (opts, function (err , res , body ) {
437
+ console .log (' body=' , body);
438
+ });
439
+ ```
440
+
441
+ ---
442
+
443
+ If you want to use ` require() ` to load modules from npm,
444
+ you'll need to use a tool like
445
+ [ browserify] ( http://browserify.org ) :
446
+
447
+ ```
448
+ $ browserify browser.js > bundle.js
449
+ ```
450
+
451
+ then in your html:
452
+
453
+ ``` html
454
+ <script src =" bundle.js" ></script >
455
+ ```
252
456
0 commit comments