You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: 2-ui/1-document/02-dom-nodes/article.md
+13-13Lines changed: 13 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -32,10 +32,10 @@ Let's start with the following simple document:
32
32
<!DOCTYPE HTML>
33
33
<html>
34
34
<head>
35
-
<title>About elks</title>
35
+
<title>About elk</title>
36
36
</head>
37
37
<body>
38
-
The truth about elks.
38
+
The truth about elk.
39
39
</body>
40
40
</html>
41
41
```
@@ -45,7 +45,7 @@ The DOM represents HTML as a tree structure of tags. Here's how it looks:
45
45
<divclass="domtree"></div>
46
46
47
47
<script>
48
-
let node1 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n"},{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elks"}]},{"name":"#text","nodeType":3,"content":"\n"}]},{"name":"#text","nodeType":3,"content":"\n"},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n The truth about elks."}]}]}
48
+
let node1 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n"},{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elk"}]},{"name":"#text","nodeType":3,"content":"\n"}]},{"name":"#text","nodeType":3,"content":"\n"},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n The truth about elk."}]}]}
49
49
50
50
drawHtmlTree(node1, 'div.domtree', 690, 320);
51
51
</script>
@@ -60,7 +60,7 @@ Tags are *element nodes* (or just elements) and form the tree structure: `<html>
60
60
61
61
The text inside elements forms *text nodes*, labelled as `#text`. A text node contains only a string. It may not have children and is always a leaf of the tree.
62
62
63
-
For instance, the `<title>` tag has the text `"About elks"`.
63
+
For instance, the `<title>` tag has the text `"About elk"`.
64
64
65
65
Please note the special characters in text nodes:
66
66
@@ -79,13 +79,13 @@ Here are no space-only text nodes:
79
79
80
80
```html no-beautify
81
81
<!DOCTYPE HTML>
82
-
<html><head><title>About elks</title></head><body>The truth about elks.</body></html>
82
+
<html><head><title>About elk</title></head><body>The truth about elk.</body></html>
83
83
```
84
84
85
85
<divclass="domtree"></div>
86
86
87
87
<script>
88
-
let node2 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elks"}]}]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"The truth about elks."}]}]}
88
+
let node2 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[{"name":"TITLE","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"About elk"}]}]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"The truth about elk."}]}]}
89
89
90
90
drawHtmlTree(node2, 'div.domtree', 690, 210);
91
91
</script>
@@ -167,7 +167,7 @@ For example, comments:
167
167
<!DOCTYPE HTML>
168
168
<html>
169
169
<body>
170
-
The truth about elks.
170
+
The truth about elk.
171
171
<ol>
172
172
<li>An elk is a smart</li>
173
173
*!*
@@ -182,7 +182,7 @@ For example, comments:
182
182
<div class="domtree"></div>
183
183
184
184
<script>
185
-
let node6 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n The truth about elks.\n "},{"name":"OL","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"An elk is a smart"}]},{"name":"#text","nodeType":3,"content":"\n "},{"name":"#comment","nodeType":8,"content":"comment"},{"name":"#text","nodeType":3,"content":"\n "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"...and cunning animal!"}]},{"name":"#text","nodeType":3,"content":"\n "}]},{"name":"#text","nodeType":3,"content":"\n \n"}]}]};
185
+
let node6 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,"children":[]},{"name":"BODY","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n The truth about elk.\n "},{"name":"OL","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"\n "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"An elk is a smart"}]},{"name":"#text","nodeType":3,"content":"\n "},{"name":"#comment","nodeType":8,"content":"comment"},{"name":"#text","nodeType":3,"content":"\n "},{"name":"LI","nodeType":1,"children":[{"name":"#text","nodeType":3,"content":"...and cunning animal!"}]},{"name":"#text","nodeType":3,"content":"\n "}]},{"name":"#text","nodeType":3,"content":"\n \n"}]}]};
186
186
187
187
drawHtmlTree(node6, 'div.domtree', 690, 500);
188
188
</script>
@@ -210,11 +210,11 @@ To see the DOM structure in real-time, try [Live DOM Viewer](http://software.hix
210
210
211
211
Another way to explore the DOM is to use the browser developer tools. Actually, that's what we use when developing.
212
212
213
-
To do so, open the web page [elks.html](elks.html), turn on the browser developer tools and switch to the Elements tab.
213
+
To do so, open the web page [elk.html](elk.html), turn on the browser developer tools and switch to the Elements tab.
214
214
215
215
It should look like this:
216
216
217
-
217
+
218
218
219
219
You can see the DOM, click on elements, see their details and so on.
220
220
@@ -224,7 +224,7 @@ Clicking the <span class="devtools" style="background-position:-328px -124px"></
224
224
225
225
Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu.
226
226
227
-
227
+
228
228
229
229
At the right part of the tools there are the following subtabs:
230
230
- **Styles** -- we can see CSS applied to the current element rule by rule, including built-in rules (gray). Almost everything can be edited in-place, including the dimensions/margins/paddings of the box below.
@@ -247,15 +247,15 @@ Now the last selected element is available as `$0`, the previously selected is `
247
247
248
248
We can run commands on them. For instance, `$0.style.background = 'red'` makes the selected list item red, like this:
249
249
250
-
250
+
251
251
252
252
That's how to get a node from Elements in Console.
253
253
254
254
There's also a road back. If there's a variable referencing a DOM node, then we can use the command `inspect(node)` in Console to see it in the Elements pane.
255
255
256
256
Or we can just output the DOM node in the console and explore "in-place", like `document.body` below:
257
257
258
-
258
+
259
259
260
260
That's for debugging purposes of course. From the next chapter on we'll access and modify DOM using JavaScript.
0 commit comments