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
+6-6
Original file line number
Diff line number
Diff line change
@@ -61,7 +61,7 @@ There are only two top-level exclusions:
61
61
1. Spaces and newlines before `<head>` are ignored for historical reasons,
62
62
2. If we put something after `</body>`, then that is automatically moved inside the `body`, at the end, as HTML spec requires that all content must be inside `<body>`. So there may be no spaces after `</body>`.
63
63
64
-
In other cases everything's honest -- if there are spaces (just like any character) in the document, then they text nodes in DOM, and if we remove them, then there won't be any.
64
+
In other cases everything's honest -- if there are spaces (just like any character) in the document, then they become text nodes in DOM, and if we remove them, then there won't be any.
```smart header="Edge spaces and in-between empty text are usually hidden in tools"
82
-
Browser tools (to be covered soon) that work with DOM usually do not show spaces at start/end of the text and empty text nodes (line-breaks) between tags. .
82
+
Browser tools (to be covered soon) that work with DOM usually do not show spaces at the start/end of the text and empty text nodes (line-breaks) between tags.
83
83
84
84
That's because they are mainly used to decorate HTML, and do not affect (in most cases) how it is shown.
85
85
@@ -143,7 +143,7 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType":
143
143
drawHtmlTree(node5, 'div.domtree', 600, 200);
144
144
</script>
145
145
146
-
You see? The `<tbody>` has appeared out of nowhere. Should keep in mind while working with tables to evade surprises.
146
+
You see? The `<tbody>` has appeared out of nowhere. Should keep in mind while working with tables to avoid surprises.
147
147
````
148
148
149
149
## Other node types
@@ -193,7 +193,7 @@ There are [12 node types](https://dom.spec.whatwg.org/#node). In practice we usu
193
193
194
194
## See it yourself
195
195
196
-
To see the DOM structure in real-time, try [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up DOM at instant.
196
+
To see the DOM structure in real-time, try [Live DOM Viewer](http://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up DOM at an instant.
197
197
198
198
## In the browser inspector
199
199
@@ -207,9 +207,9 @@ Should look like this:
207
207
208
208
You can see the DOM, click on elements, see their details and so on.
209
209
210
-
Please note that the DOM structure in developer tools is simplified. Text nodes are shown just as text. And there are no "blank" (space only) text nodes at all. That's fine, because most of time we are interested in element nodes.
210
+
Please note that the DOM structure in developer tools is simplified. Text nodes are shown just as text. And there are no "blank" (space only) text nodes at all. That's fine, because most of the time we are interested in element nodes.
211
211
212
-
Clicking the <span class="devtools" style="background-position:-328px -124px"></span> button in the left-upper corner allows to choose a node from the webpage using a mouse (or other pointer device) and "inspect" it (scroll to it in the elements tab). Works great when we have a huge HTML page and would like to see the DOM of a particular place in it.
212
+
Clicking the <span class="devtools" style="background-position:-328px -124px"></span> button in the left-upper corner allows to choose a node from the webpage using a mouse (or other pointer devices) and "inspect" it (scroll to it in the elements tab). Works great when we have a huge HTML page and would like to see the DOM of a particular place in it.
213
213
214
214
Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu.
0 commit comments