Skip to content

Commit ca046bd

Browse files
authored
Update article.md
1 parent 1f9ae74 commit ca046bd

File tree

1 file changed

+6
-6
lines changed

1 file changed

+6
-6
lines changed

2-ui/1-document/02-dom-nodes/article.md

+6-6
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ There are only two top-level exclusions:
6161
1. Spaces and newlines before `<head>` are ignored for historical reasons,
6262
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>`.
6363

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.
6565

6666
Here are no space-only text nodes:
6767

@@ -79,7 +79,7 @@ drawHtmlTree(node2, 'div.domtree', 690, 210);
7979
</script>
8080

8181
```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.
8383
8484
That's because they are mainly used to decorate HTML, and do not affect (in most cases) how it is shown.
8585
@@ -143,7 +143,7 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType":
143143
drawHtmlTree(node5, 'div.domtree', 600, 200);
144144
</script>
145145

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.
147147
````
148148
149149
## Other node types
@@ -193,7 +193,7 @@ There are [12 node types](https://dom.spec.whatwg.org/#node). In practice we usu
193193
194194
## See it yourself
195195
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.
197197
198198
## In the browser inspector
199199
@@ -207,9 +207,9 @@ Should look like this:
207207
208208
You can see the DOM, click on elements, see their details and so on.
209209
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.
211211
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.
213213
214214
Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu.
215215

0 commit comments

Comments
 (0)