Skip to content

Walking the DOM #253

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
ef63bf2
article/03-dom-navigation translation
pasor1 Mar 9, 2021
d5c565b
Update 2-ui/1-document/03-dom-navigation/1-dom-children/solution.md
pasor1 Mar 11, 2021
6deed96
Update 2-ui/1-document/03-dom-navigation/1-dom-children/task.md
pasor1 Mar 11, 2021
c015e27
Update 2-ui/1-document/03-dom-navigation/3-navigation-links-which-nul…
pasor1 Mar 11, 2021
4557521
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
d363b30
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
1aba349
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
9df42ed
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
d2eecdf
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
0518da5
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
1b501c2
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
26cffdc
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
ae1cd1b
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
118aca9
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
8bc67cd
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
771d257
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
1b4f429
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
735c0c7
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
2b1f720
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 11, 2021
2429e8a
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 14, 2021
56bb06b
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 14, 2021
8862cfb
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 14, 2021
613bbd2
Update 2-ui/1-document/03-dom-navigation/1-dom-children/solution.md
pasor1 Mar 14, 2021
042060b
Update 2-ui/1-document/03-dom-navigation/article.md
pasor1 Mar 14, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions 2-ui/1-document/03-dom-navigation/1-dom-children/solution.md
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
There are many ways, for instance:
E' possibile farlo in diversi modi, ad esempio:


The `<div>` DOM node:
Il nodo DOM `<div>`:

```js
document.body.firstElementChild
// or
// oppure
document.body.children[0]
// or (the first node is space, so we take 2nd)
// oppure (il primo nodo è uno spazio, quindi prendiamo il secondo)
document.body.childNodes[1]
```

The `<ul>` DOM node:
Il nodo DOM `<ul>`:

```js
document.body.lastElementChild
// or
// oppure
document.body.children[1]
```

The second `<li>` (with Pete):
Il secondo `<li>` (con Pete):

```js
// get <ul>, and then get its last element child
// prendi <ul>, e quindi il suo ultimo elemento figlio
document.body.lastElementChild.lastElementChild
```
14 changes: 7 additions & 7 deletions 2-ui/1-document/03-dom-navigation/1-dom-children/task.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,14 @@ importance: 5

---

# DOM children
# Figli nel DOM

Look at this page:
Guardiamo questa pagina:

```html
<html>
<body>
<div>Users:</div>
<div>Utenti:</div>
<ul>
<li>John</li>
<li>Pete</li>
Expand All @@ -18,7 +18,7 @@ Look at this page:
</html>
```

For each of the following, give at least one way of how to access them:
- The `<div>` DOM node?
- The `<ul>` DOM node?
- The second `<li>` (with Pete)?
Per ciascuno dei seguenti, fornire almeno un modo per accedervi:
- Il nodo DOM `<div>` ?
- Il nodo DOM `<ul>` ?
- Il secondo `<li>` (con Pete)?
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
1. Yes, true. The element `elem.lastChild` is always the last one, it has no `nextSibling`.
2. No, wrong, because `elem.children[0]` is the first child *among elements*. But there may exist non-element nodes before it. So `previousSibling` may be a text node.
1. Si, è vero. L'elemento `elem.lastChild` è sempre l'ultimo, non ha `nextSibling`.
2. No, è falso, perché `elem.children[0]` è il primo figlio tra i nodi di tipo *elemento*, ma potrebbero esserci nodi di tipo diverso. Ad esempio `previousSibling` potrebbe essere un nodo di testo.

Please note: for both cases if there are no children, then there will be an error.
Nota: in entrambi i casi, se non ci sono figli si verificherà un errore.

If there are no children, `elem.lastChild` is `null`, so we can't access `elem.lastChild.nextSibling`. And the collection `elem.children` is empty (like an empty array `[]`).
Se non ci sono figli, `elem.lastChild` è `null`, quindi non possiamo accedere a `elem.lastChild.nextSibling`. E la collection `elem.children` sarà vuota (come un array vuoto `[]`).
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ importance: 5

---

# The sibling question
# La questione dei fratelli

If `elem` -- is an arbitrary DOM element node...
Se `elem` è un nodo arbitrario del DOM...

- Is it true that `elem.lastChild.nextSibling` is always `null`?
- Is it true that `elem.children[0].previousSibling` is always `null` ?
- E' vero che `elem.lastChild.nextSibling` è sempre `null`?
- E' vero che `elem.children[0].previousSibling` è sempre `null`?
Original file line number Diff line number Diff line change
@@ -1 +1 @@
We'll be using `rows` and `cells` properties to access diagonal table cells.
Useremo le proprietà `rows` e `cells` per accedere alle celle sulla diagonale della tabella.
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
<script>
let table = document.body.firstElementChild;

// your code
// il tuo codice
</script>
</body>
</html>
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ importance: 5

---

# Select all diagonal cells
# Seleziona tutte le celle sulla diagonale

Write the code to paint all diagonal table cells in red.
Scrivi il codice per evidenziare in rosso tutte celle sulla diagonale della tabella.

You'll need to get all diagonal `<td>` from the `<table>` and paint them using the code:
Dovrai estrarre tutte i `<td>` in diagonale da `<table>` ed evidenziarli usando il codice:

```js
// td should be the reference to the table cell
// td dovrebbe essere il riferimento alla cella della tabella
td.style.backgroundColor = 'red';
```

The result should be:
Il risultato dovrebbe essere:

[iframe src="solution" height=180]
Loading