jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Merge pull request #391 from brentguf/dom-tree

Browse source 
DOM Tree chapter
This commit is contained in:
Ilya Kantor 2018-03-03 09:14:06 +03:00 • committed by GitHub
commit 6f90aadc40
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@ libs:
# DOM tree
The backbone of an HTML document is tags.
The backbone of an HTML document are tags.
According to Document Object Model (DOM), every HTML-tag is an object. Nested tags are called "children" of the enclosing one.
@ -44,7 +44,7 @@ drawHtmlTree(node1, 'div.domtree', 690, 320);
On the picture above, you can click on element nodes and their children will open/collapse.
```
Tags are called *element nodes* (or just elements). Nested tags become children of the enclosing ones. As a result we have a tree of elements: `<html>` is at the root, then `<head>` and `<body>` are its children etc.
Tags are called *element nodes* (or just elements). Nested tags become children of the enclosing ones. As a result we have a tree of elements: `<html>` is at the root, then `<head>` and `<body>` are its children, etc.
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.
@ -55,15 +55,15 @@ Please note the special characters in text nodes:
- a newline: `↵` (in JavaScript known as `\n`)
- a space: `␣`
Spaces and newlines -- are totally valid characters, they form text nodes and become a part of the DOM. So, for instance, in the example above the `<head>` tag contains come spaces before `<title>`, and that text becomes a `#text` node (it contains a newline and some spaces only).
Spaces and newlines -- are totally valid characters, they form text nodes and become a part of the DOM. So, for instance, in the example above the `<head>` tag contains some spaces before `<title>`, and that text becomes a `#text` node (it contains a newline and some spaces only).
There are only two top-level exclusions:
1. Spaces and newlines before `<head>` are ignored for historical reasons,
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>`.
2. If we put something after `</body>`, then that is automatically moved inside the `body`, at the end, as the HTML spec requires that all content must be inside `<body>`. So there may be no spaces after `</body>`.
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.
In other cases everything's straightforward -- 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.
Here are no space-only text nodes:
Here are no-space, text-only nodes:
```html no-beautify
<!DOCTYPE HTML>
@ -81,7 +81,7 @@ drawHtmlTree(node2, 'div.domtree', 690, 210);
```smart header="Edge spaces and in-between empty text are usually hidden in tools"
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.
That's because they are mainly used to decorate HTML, and do not affect (in most cases) how it is shown.
That's because they are mainly used to decorate HTML, and do not affect how it is shown (in most cases).
On further DOM pictures we'll sometimes omit them where they are irrelevant, to keep things short.
```
@ -91,7 +91,7 @@ On further DOM pictures we'll sometimes omit them where they are irrelevant, to
If the browser encounters malformed HTML, it automatically corrects it when making DOM.
For instance, the top tag is always `<html>`. Even if it doesn't exist in the document -- it will be in DOM, the browser will create it. The same about `<body>`.
For instance, the top tag is always `<html>`. Even if it doesn't exist in the document -- it will exist in the DOM, the browser will create it. The same goes for `<body>`.
As an example, if the HTML file is a single word `"Hello"`, the browser will wrap it into `<html>` and `<body>`, add the required `<head>`, and the DOM will be:
@ -104,7 +104,7 @@ let node3 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1,
drawHtmlTree(node3, 'div.domtree', 690, 150);
</script>
While generating DOM, browser automatically processes errors in the document, closes tags and so on.
While generating the DOM, browsers automatically process errors in the document, close tags and so on.
Such an "invalid" document:
@ -115,7 +115,7 @@ Such an "invalid" document:
<li>Dad
```
...Will become a normal DOM, as the browser read tags and restores the missing parts:
...Will become a normal DOM, as the browser reads tags and restores the missing parts:
<div class="domtree"></div>
@ -143,7 +143,7 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType":
drawHtmlTree(node5, 'div.domtree', 600, 200);
</script>
You see? The `<tbody>` has appeared out of nowhere. Should keep in mind while working with tables to avoid surprises.
You see? The `<tbody>` appeared out of nowhere. You should keep this in mind while working with tables to avoid surprises.
````
## Other node types
@ -178,7 +178,7 @@ Here we see a new tree node type -- *comment node*, labeled as `#comment`.
We may think -- why a comment is added to the DOM? It doesn't affect the visual representation in any way. But there's a rule -- if something's in HTML, then it also must be in the DOM tree.
**Everything in HTML, even comments, becomes a part of DOM.**
**Everything in HTML, even comments, becomes a part of the DOM.**
Even the `<!DOCTYPE...>` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before `<html>`. We are not going to touch that node, we even don't draw it on diagrams for that reason, but it's there.
@ -189,19 +189,19 @@ There are [12 node types](https://dom.spec.whatwg.org/#node). In practice we usu
1. `document` -- the "entry point" into DOM.
2. element nodes -- HTML-tags, the tree building blocks.
3. text nodes -- contain text.
4. comments -- sometimes we can put the information there, it won't be shown, but JS can read it from DOM.
4. comments -- sometimes we can put the information there, it won't be shown, but JS can read it from the DOM.
## See it yourself
## See it for yourself
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.
## In the browser inspector
Another way to explore DOM is to use browser developer tools. Actually, that's what we use when developing.
Another way to explore the DOM is to use the browser developer tools. Actually, that's what we use when developing.
To do so, open the web-page [elks.html](elks.html), turn on browser developer tools and switch to Elements tab.
To do so, open the web-page [elks.html](elks.html), turn on the browser developer tools and switch to the Elements tab.
Should look like this:
It should look like this:
![](elks.png)
@ -209,19 +209,19 @@ You can see the DOM, click on elements, see their details and so on.
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.
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.
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). This works great when we have a huge HTML page (and corresponding huge DOM) and would like to see the place of a particual element in it.
Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu.
![](inspect.png)
At the right part of the tools there are following subtabs:
- Styles -- we can see CSS applied to the current element rule by rule, including built-in rules (gray). Almost everything can be edited at-place including the dimensions/margins/paddings of the box below.
- Computed -- to see CSS applied to the element by property: for each property we can see a rule that gives it (including CSS inheritance and such).
- Event Listeners -- to see event listeners attached to DOM elements (we'll cover them in the next part of the tutorial).
At the right part of the tools there are the following subtabs:
- **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.
- **Computed** -- to see CSS applied to the element by property: for each property we can see a rule that gives it (including CSS inheritance and such).
- **Event Listeners** -- to see event listeners attached to DOM elements (we'll cover them in the next part of the tutorial).
- ...and so on.
The best way to study them is to click around. Most values are in-place editable.
The best way to study them is to click around. Most values are editable in-place.
## Interaction with console
@ -244,7 +244,7 @@ Or we can just output it in the console and explore "at-place", like `document.b
That's for debugging purposes of course. From the next chapter on we'll access and modify DOM using JavaScript.
The browser developer tools are a great help in development: we can explore DOM, try things and see what goes wrong.
The browser developer tools are a great help in development: we can explore the DOM, try things and see what goes wrong.
## Summary
@ -256,6 +256,6 @@ An HTML/XML document is represented inside the browser as the DOM tree.
We can use developer tools to inspect DOM and modify it manually.
Here we covered the basics, most used and important actions to start with. There's an extensive documentation about Chrome developer tools at <https://developers.google.com/web/tools/chrome-devtools>. The best way to learn the tools is to click here and there, read menus: most options are obvious. Later, when you know them in general, read the docs and pick up the rest.
Here we covered the basics, the most used and important actions to start with. There's an extensive documentation about Chrome Developer Tools at <https://developers.google.com/web/tools/chrome-devtools>. The best way to learn the tools is to click here and there, read menus: most options are obvious. Later, when you know them in general, read the docs and pick up the rest.
DOM nodes have properties and methods that allow to travel between them, modify, move around the page and more. We'll get down to them in the next chapters.