This commit is contained in:
Ilya Kantor 2019-10-17 08:43:29 +03:00
parent 95f61eeb59
commit bb974189a1
2 changed files with 11 additions and 4 deletions

View file

@ -22,7 +22,13 @@ document.body.style.background = 'red'; // make the background red
setTimeout(() => document.body.style.background = '', 3000); // return back
```
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.
Here we used `style.background` to change the background color of `document.body`, but there are many other properties, such as:
- `innerHTML` -- HTML contents of the node.
- `offsetWidth` -- the node width (in pixels)
- ...and so on.
Soon we'll learn more ways to manipulate the DOM, but first we need to know about its structure.
## An example of the DOM

View file

@ -149,7 +149,7 @@ There are two important consequences:
The first thing is nice. The second is tolerable, because we can use `Array.from` to create a "real" array from the collection, if we want array methods:
```js run
alert( Array.from(document.body.childNodes).filter ); // now it's there
alert( Array.from(document.body.childNodes).filter ); // function
```
```warn header="DOM collections are read-only"
@ -311,8 +311,9 @@ An example of usage:
</table>
<script>
// get the content of the first row, second cell
alert( table.*!*rows[0].cells[1]*/!*.innerHTML ) // "two"
// get td with "two" (first row, second column)
let td = table.*!*rows[0].cells[1]*/!*;
td.style.backgroundColor = "red"; // highlight it
</script>
```