fixes #1469
This commit is contained in:
parent
95f61eeb59
commit
bb974189a1
2 changed files with 11 additions and 4 deletions
|
@ -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
|
||||
|
||||
|
|
|
@ -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>
|
||||
```
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue