Skip to content

Commit b869d1e

Browse files
author
James Halliday
committed
all the dom
1 parent 90a37db commit b869d1e

File tree

1 file changed

+206
-2
lines changed

1 file changed

+206
-2
lines changed

‎dom.markdown

+206-2
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,33 @@ Select an element by its `id`:
8080

8181
* `#top` -> `<h1 id="top">very tree</h1>`
8282

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+
83110
---
84111
# nested css selectors
85112

@@ -234,19 +261,196 @@ and now the body will have an `input` element with
234261
---
235262
# `.insertBefore()`
236263

264+
We can also insert elements before another element.
265+
Given this html:
237266

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+
```
238311

239312
---
240313
# `.style`
241314

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+
242325
---
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+
244337
---
245338
# events
246339

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+
247382
---
248383
# xhr
249384

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+
250400
---
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+
```
252456

0 commit comments

Comments
 (0)