Alexey Pyltsyn
GitHub
commit
18d63f5e6c
1 changed files with 23 additions and 23 deletions
|
|
@ -6,13 +6,13 @@ libs:
|
|||
|
||||
# DOM tree
|
||||
|
||||
The backbone of an HTML document are tags.
|
||||
The backbone of an HTML document is tags.
|
||||
|
||||
According to Document Object Model (DOM), every HTML-tag is an object. Nested tags are "children" of the enclosing one. The text inside a tag it is an object as well.
|
||||
According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are "children" of the enclosing one. The text inside a tag is an object as well.
|
||||
|
||||
All these objects are accessible using JavaScript, we can use them to modify the page.
|
||||
All these objects are accessible using JavaScript, and we can use them to modify the page.
|
||||
|
||||
For example, `document.body` is the object representing `<body>` tag.
|
||||
For example, `document.body` is the object representing the `<body>` tag.
|
||||
|
||||
Running this code will make the `<body>` red for 3 seconds:
|
||||
|
||||
|
|
@ -22,11 +22,11 @@ document.body.style.background = 'red'; // make the background red
|
|||
setTimeout(() => document.body.style.background = '', 3000); // return back
|
||||
```
|
||||
|
||||
That was just a glimpse of DOM power. Soon we'll learn more ways to manipulate DOM, but first we need to know about its structure.
|
||||
That was just a glimpse of the DOM's power. Soon we'll learn more ways to manipulate the DOM, but first we need to know about its structure.
|
||||
|
||||
## An example of DOM
|
||||
## An example of the DOM
|
||||
|
||||
Let's start with the following simple docment:
|
||||
Let's start with the following simple document:
|
||||
|
||||
```html run no-beautify
|
||||
<!DOCTYPE HTML>
|
||||
|
|
@ -56,7 +56,7 @@ On the picture above, you can click on element nodes and their children will ope
|
|||
|
||||
Every tree node is an object.
|
||||
|
||||
Tags are *element nodes* (or just elements), they form the tree structure: `<html>` is at the root, then `<head>` and `<body>` are its children, etc.
|
||||
Tags are *element nodes* (or just elements) and form the tree structure: `<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.
|
||||
|
||||
|
|
@ -67,13 +67,13 @@ Please note the special characters in text nodes:
|
|||
- a newline: `↵` (in JavaScript known as `\n`)
|
||||
- a space: `␣`
|
||||
|
||||
Spaces and newlines -- are totally valid characters, like letters and digits. 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).
|
||||
Spaces and newlines are totally valid characters, like letters and digits. 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 the HTML spec requires that all content must be inside `<body>`. So there may be no spaces after `</body>`.
|
||||
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 the HTML spec requires that all content must be inside `<body>`. So there can't be any spaces after `</body>`.
|
||||
|
||||
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.
|
||||
In other cases everything's straightforward -- if there are spaces (just like any character) in the document, then they become text nodes in the DOM, and if we remove them, then there won't be any.
|
||||
|
||||
Here are no space-only text nodes:
|
||||
|
||||
|
|
@ -100,11 +100,11 @@ On further DOM pictures we'll sometimes omit them when they are irrelevant. Such
|
|||
|
||||
## Autocorrection
|
||||
|
||||
If the browser encounters malformed HTML, it automatically corrects it when making DOM.
|
||||
If the browser encounters malformed HTML, it automatically corrects it when making the DOM.
|
||||
|
||||
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>`.
|
||||
For instance, the top tag is always `<html>`. Even if it doesn't exist in the document, it will exist in the DOM, because 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:
|
||||
As an example, if the HTML file is the single word `"Hello"`, the browser will wrap it into `<html>` and `<body>`, and add the required `<head>`, and the DOM will be:
|
||||
|
||||
|
||||
<div class="domtree"></div>
|
||||
|
|
@ -117,7 +117,7 @@ drawHtmlTree(node3, 'div.domtree', 690, 150);
|
|||
|
||||
While generating the DOM, browsers automatically process errors in the document, close tags and so on.
|
||||
|
||||
Such document with unclosed tags:
|
||||
A document with unclosed tags:
|
||||
|
||||
```html no-beautify
|
||||
<p>Hello
|
||||
|
|
@ -126,7 +126,7 @@ Such document with unclosed tags:
|
|||
<li>Dad
|
||||
```
|
||||
|
||||
...Will become a normal DOM, as the browser reads 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>
|
||||
|
||||
|
|
@ -137,7 +137,7 @@ drawHtmlTree(node4, 'div.domtree', 690, 360);
|
|||
</script>
|
||||
|
||||
````warn header="Tables always have `<tbody>`"
|
||||
An interesting "special case" is tables. By the DOM specification they must have `<tbody>`, but HTML text may (officially) omit it. Then the browser creates `<tbody>` in DOM automatically.
|
||||
An interesting "special case" is tables. By the DOM specification they must have `<tbody>`, but HTML text may (officially) omit it. Then the browser creates `<tbody>` in the DOM automatically.
|
||||
|
||||
For the HTML:
|
||||
|
||||
|
|
@ -202,15 +202,15 @@ 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 the DOM.
|
||||
4. comments -- sometimes we can put information there, it won't be shown, but JS can read it from the DOM.
|
||||
|
||||
## 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.
|
||||
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 as a DOM at an instant.
|
||||
|
||||
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 the browser developer tools and switch to the 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.
|
||||
|
||||
It should look like this:
|
||||
|
||||
|
|
@ -220,7 +220,7 @@ 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). This works great when we have a huge HTML page (and corresponding huge DOM) and would like to see the place of a particular element in it.
|
||||
Clicking the <span class="devtools" style="background-position:-328px -124px"></span> button in the left-upper corner allows us 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 particular element in it.
|
||||
|
||||
Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu.
|
||||
|
||||
|
|
@ -253,7 +253,7 @@ That's how to get a node from Elements in Console.
|
|||
|
||||
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.
|
||||
|
||||
Or we can just output DOM-node in the console and explore "at-place", like `document.body` below:
|
||||
Or we can just output the DOM node in the console and explore "in-place", like `document.body` below:
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue