Skip to content

Commit 90a37db

Browse files
author
James Halliday
committed
dom beginnings
1 parent 98534e5 commit 90a37db

File tree

3 files changed

+261
-2
lines changed

3 files changed

+261
-2
lines changed

‎dom.markdown

+252
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
# the dom
2+
3+
(D)ocument (O)bject (M)odel:
4+
5+
the data structure of web pages.
6+
7+
---
8+
# one big tree
9+
10+
``` html
11+
<html>
12+
<head><title>wow</title></head>
13+
<body>
14+
<h1 id="top">very tree</h1>
15+
<div class="msg">
16+
so <span>tall</span>
17+
</div>
18+
</body>
19+
</html>
20+
```
21+
22+
---
23+
# document
24+
25+
* document.head -> `<head>...</head>`
26+
* document.body -> `<body>...</body>`
27+
28+
---
29+
# elements
30+
31+
Each html tag is called an element.
32+
33+
When you have an element reference, you get:
34+
35+
* `elem.childNodes` - an array of children
36+
* `elem.parentNode` - the parent of the current element
37+
38+
---
39+
40+
`document.head.childNodes[0]`
41+
=== `<title>wow</title>`
42+
43+
---
44+
45+
`document.body.childNodes[0]`
46+
=== `<h1 id="top">very tree</h1>`
47+
48+
---
49+
50+
`document.body.childNodes[1]`
51+
=== `<div class="msg">so <span>tall</span></div>`
52+
53+
---
54+
55+
`document.body.childNodes[1].childNodes[0]`
56+
=== `<span>tall</span>`
57+
58+
---
59+
# query selector
60+
61+
Using `document.body.[...]` to fetch every element is not
62+
very flexible!
63+
64+
Instead, we can fetch elements with a css selector:
65+
66+
`document.querySelector('h1')` === `<h1>very tree</h1>`
67+
68+
---
69+
# css selectors
70+
71+
Select an element by a tag name:
72+
73+
* `span` -> `<span>tall</span>`
74+
75+
Select an element by its class name:
76+
77+
* `.msg` -> `<div class="msg">...</div>`
78+
79+
Select an element by its `id`:
80+
81+
* `#top` -> `<h1 id="top">very tree</h1>`
82+
83+
---
84+
# nested css selectors
85+
86+
* `.msg span` -> `<span>tall</span>`
87+
88+
* `#top span` -> null (matches nothing)
89+
90+
---
91+
# querySelector, querySelectorAll
92+
93+
* `document.querySelector()` -> first matching element
94+
* `document.querySelectorAll()` -> all matching elements
95+
96+
---
97+
# elem.querySelector, elem.querySelectorAll
98+
99+
If you have an element, you can also call `.querySelector()`
100+
on that element to query its descendents:
101+
102+
* `elem.querySelector()` -> first matching element
103+
* `elem.querySelectorAll()` -> all matching elements
104+
105+
---
106+
# some other ways of querying
107+
108+
* `document.getElementById()`
109+
* `document.getElementsByClassName()`
110+
111+
---
112+
113+
once you have an element reference,
114+
you can modify the contents in plenty of ways:
115+
116+
* set the inner text or html
117+
* add and remove children
118+
* set and remove attributes
119+
120+
---
121+
# setting text
122+
123+
``` js
124+
var elem = document.querySelector('.msg');
125+
elem.textContent = 'purr cats <3 <3 <3'
126+
```
127+
128+
With `textContent` you don't need to worry about elements
129+
being interpreted as html.
130+
131+
---
132+
# setting html
133+
134+
``` js
135+
var elem = document.querySelector('.msg');
136+
elem.innerHTML = '<h1>wow</h1>'
137+
```
138+
139+
---
140+
# construct elements with code
141+
142+
```
143+
var div = document.createElement('div');
144+
```
145+
146+
---
147+
# construct elements with a string of html
148+
149+
``` js
150+
var div = document.createElement('div');
151+
div.innerHTML = '<b>wow such inner</b>';
152+
```
153+
154+
---
155+
# add children with `.appendChild()`
156+
157+
``` js
158+
var div = document.createElement('div');
159+
var b = document.createElement('b');
160+
b.textContent = 'wowsers';
161+
162+
div.appendChild(b);
163+
document.body.appendChild(b);
164+
```
165+
166+
---
167+
# remove children with `.removeChild()`
168+
169+
suppose we have some html:
170+
171+
``` html
172+
<html>
173+
<body>
174+
<div>
175+
cool cool
176+
<span>get rid of me</span>
177+
</div>
178+
</body>
179+
</html>
180+
```
181+
182+
---
183+
# remove children with `.removeChild()`
184+
185+
we can get rid of the inner span by fetching references to
186+
the span and its parent, then on the parent we can call
187+
`.removeChild()`:
188+
189+
``` js
190+
var div = document.querySelector('div');
191+
var span = div.querySelector('span');
192+
div.removeChild(span);
193+
```
194+
195+
---
196+
# remove children with `.removeChild()`
197+
198+
and now the html will be:
199+
200+
``` html
201+
<html>
202+
<body>
203+
<div>
204+
cool cool
205+
</div>
206+
</body>
207+
</html>
208+
```
209+
210+
---
211+
# set an attribute with `.setAttribute()`
212+
213+
``` js
214+
var input = document.createElement('input');
215+
input.setAttribute('type', 'text');
216+
input.setAttribute('value', 'wow');
217+
document.body.appendChild(input);
218+
```
219+
220+
---
221+
# set an attribute with `.setAttribute()`
222+
223+
and now the body will have an `input` element with
224+
`type="text"` and `value="wow"`:
225+
226+
``` html
227+
<html>
228+
<body>
229+
<input type="text" value="wow">
230+
</body>
231+
</html>
232+
```
233+
234+
---
235+
# `.insertBefore()`
236+
237+
238+
239+
---
240+
# `.style`
241+
242+
---
243+
# .classList
244+
---
245+
# events
246+
247+
---
248+
# xhr
249+
250+
---
251+
#
252+

‎dom/wow.html

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<html>
2+
<head><title>wow</title></head>
3+
<body>
4+
<h1 id="top">very tree</h1>
5+
<div class="msg">
6+
so <span>tall</span>
7+
</div>
8+
</body>
9+
</html>

‎dom_and_svg.markdown

-2
This file was deleted.

0 commit comments

Comments
 (0)