Skip to content

Node properties: type, tag and contents #268

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 17 commits into from
Mar 21, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
385420f
Update 2-ui/1-document/05-basic-dom-node-properties/article.md
marcellosurdi Mar 13, 2021
0823b82
Update 2-ui/1-document/05-basic-dom-node-properties/article.md
marcellosurdi Mar 14, 2021
21c26b8
Update 2-ui/1-document/05-basic-dom-node-properties/article.md
marcellosurdi Mar 14, 2021
9c69ccb
Update 2-ui/1-document/05-basic-dom-node-properties/article.md
marcellosurdi Mar 14, 2021
073baa9
Update 2-ui/1-document/05-basic-dom-node-properties/article.md
marcellosurdi Mar 15, 2021
6c26147
Update 2-ui/1-document/05-basic-dom-node-properties/article.md
marcellosurdi Mar 15, 2021
4367598
Update 2-ui/1-document/05-basic-dom-node-properties/article.md
marcellosurdi Mar 16, 2021
006d454
Merge branch 'master' of https://github.com/javascript-tutorial/it.ja…
marcellosurdi Mar 16, 2021
7b53647
Update 2-ui/1-document/05-basic-dom-node-properties/article.md
marcellosurdi Mar 17, 2021
2018636
Update 2-ui/1-document/05-basic-dom-node-properties/article.md
marcellosurdi Mar 18, 2021
c2dfff7
Update 2-ui/1-document/05-basic-dom-node-properties/article.md
marcellosurdi Mar 18, 2021
2cc8457
Update 2-ui/1-document/05-basic-dom-node-properties
marcellosurdi Mar 18, 2021
8d2ec2d
Update 2-ui/1-document/05-basic-dom-node-properties
marcellosurdi Mar 19, 2021
340a4c6
Update 2-ui/1-document/05-basic-dom-node-properties
marcellosurdi Mar 19, 2021
7682922
Update 2-ui/1-document/05-basic-dom-node-properties
marcellosurdi Mar 19, 2021
51e9e31
Update 2-ui/1-document/05-basic-dom-node-properties
marcellosurdi Mar 20, 2021
092e8cf
Update after first review
marcellosurdi Mar 21, 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
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
There's a catch here.
C'è un tranello in questo esercizio.

At the time of `<script>` execution the last DOM node is exactly `<script>`, because the browser did not process the rest of the page yet.
Al momento dell'esecuzione di `<script>` l'ultimo nodo del DOM è esattamente `<script>`, dal momento che il browser non ha ancora elaborato il resto della pagina.

So the result is `1` (element node).
Pertanto il risultato è `1` (nodo elemento).

```html run height=60
<html>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
importance: 5
importanza: 5

---

# What's in the nodeType?
# Cosa contiene nodeType?

What does the script show?
Cosa mostrerà lo script?

```html
<html>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
Let's make a loop over `<li>`:
Effettuiamo un ciclo iterativo sugli elementi `<li>`:

```js
for (let li of document.querySelectorAll('li')) {
...
}
```

In the loop we need to get the text inside every `li`.
Per ciascuna iterazione abbiamo bisogno di ricavare il testo all'interno di ogni `li`.

We can read the text from the first child node of `li`, that is the text node:
Possiamo leggere il testo dal primo nodo figlio di `li`, che è un nodo di testo:

```js
for (let li of document.querySelectorAll('li')) {
let title = li.firstChild.data;

// title is the text in <li> before any other nodes
// title è il testo nel <li> prima di qualsiasi altro nodo
}
```

Then we can get the number of descendants as `li.getElementsByTagName('li').length`.
A questo punto possiamo ricavare il numero dei discendenti con `li.getElementsByTagName('li').length`.
Original file line number Diff line number Diff line change
Expand Up @@ -41,12 +41,12 @@

<script>
for (let li of document.querySelectorAll('li')) {
// get the title from the text node
// ricava il titolo dal nodo di testo
let title = li.firstChild.data;

title = title.trim(); // remove extra spaces from ends
title = title.trim(); // rimuove gli spazi bianchi all'inizio e alla fine

// get the descendants count
// ottiene il numero dei discendenti
let count = li.getElementsByTagName('li').length;

alert(title + ': ' + count);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
</ul>

<script>
// ... your code...
// ... il tuo codice ...
</script>

</body>
Expand Down
12 changes: 6 additions & 6 deletions 2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
importance: 5
importanza: 5

---

# Count descendants
# Contate i discendenti

There's a tree structured as nested `ul/li`.
Abbiamo un alberatura HTML strutturata come un elenco di `ul/li` annidati.

Write the code that for each `<li>` shows:
Scrivete il codice che per ogni elemento `<li>` mostri:

1. What's the text inside it (without the subtree)
2. The number of nested `<li>` -- all descendants, including the deeply nested ones.
1. Qual è il testo al suo interno (senza considerare il testo di eventuali sottoelementi).
2. Il numero degli elementi `<li>` annidati -- tutti i discendenti, considerando tutti i livelli di annidamento.

[demo src="solution"]
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
The answer: **`BODY`**.
Risposta: **`BODY`**.

```html run
<script>
Expand All @@ -10,8 +10,8 @@ The answer: **`BODY`**.
</script>
```

What's going on step by step:
Vediamo cosa succede passo dopo passo:

1. The content of `<body>` is replaced with the comment. The comment is `<!--BODY-->`, because `body.tagName == "BODY"`. As we remember, `tagName` is always uppercase in HTML.
2. The comment is now the only child node, so we get it in `body.firstChild`.
3. The `data` property of the comment is its contents (inside `<!--...-->`): `"BODY"`.
1. Il contenuto di `<body>` è rimpiazzato con il commento. Il commento è `<!--BODY-->`, poiché `body.tagName == "BODY"`. Abbiamo detto che, `tagName` è sempre maiuscolo in modalità HTML.
2. Il commento è ora l'unico nodo figlio, perciò è il risultato di `body.firstChild`.
3. La proprietà `data` del commento è il suo contenuto (ovvero ciò che è dentro i tag di apertura e chiusura `<!--...-->`): `"BODY"`.
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
importance: 3
importanza: 3

---

# Tag in comment
# Tag nel commento

What does this code show?
Cosa mostrerà questo codice?

```html
<script>
let body = document.body;

body.innerHTML = "<!--" + body.tagName + "-->";

alert( body.firstChild.data ); // what's here?
alert( body.firstChild.data ); // cosa c'è qui?
</script>
```
Original file line number Diff line number Diff line change
@@ -1,40 +1,40 @@

We can see which class it belongs by outputting it, like:
Possiamo visualizzare a quale classe appartiene esaminandola in questo modo:

```js run
alert(document); // [object HTMLDocument]
```

Or:
Oppure:

```js run
alert(document.constructor.name); // HTMLDocument
```

So, `document` is an instance of `HTMLDocument` class.
Quindi `document` è un'istanza della classe `HTMLDocument`.

What's its place in the hierarchy?
Qual è il suo posto nella gerarchia DOM?

Yeah, we could browse the specification, but it would be faster to figure out manually.
Certo, potremmo sfogliare la specifica, ma sarebbe più veloce scoprirlo manualmente.

Let's traverse the prototype chain via `__proto__`.
Attraversiamo la catena dei prototipi tramite `__proto__`.

As we know, methods of a class are in the `prototype` of the constructor. For instance, `HTMLDocument.prototype` has methods for documents.
Come sappiamo i metodi di una classe sono nel `prototype` del costruttore. Per esempio `HTMLDocument.prototype` ha i metodi per i documenti.

Also, there's a reference to the constructor function inside the `prototype`:
C'è inoltre un riferimento al costruttore all'interno di `prototype`:

```js run
alert(HTMLDocument.prototype.constructor === HTMLDocument); // true
```

To get a name of the class as a string, we can use `constructor.name`. Let's do it for the whole `document` prototype chain, till class `Node`:
Per ricavare la stringa con il nome della classe possiamo usare `constructor.name`. Facciamolo per l'intera catena prototipale `document` fino alla classe` Node`:

```js run
alert(HTMLDocument.prototype.constructor.name); // HTMLDocument
alert(HTMLDocument.prototype.__proto__.constructor.name); // Document
alert(HTMLDocument.prototype.__proto__.__proto__.constructor.name); // Node
```

That's the hierarchy.
Questa è la gerachia.

We also could examine the object using `console.dir(document)` and see these names by opening `__proto__`. The console takes them from `constructor` internally.
Potremmo anche esaminare l'oggetto usando `console.dir(document)` e visualizzare gli stessi nomi aprendo `__proto__`. La console li ricava internamente da `constructor`.
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
importance: 4
importanza: 4

---

# Where's the "document" in the hierarchy?
# In che punto della gerarchia DOM si trova "document"?

Which class does the `document` belong to?
A quale classe appartiene `document`?

What's its place in the DOM hierarchy?
Qual è il suo posto nella gerarchia DOM?

Does it inherit from `Node` or `Element`, or maybe `HTMLElement`?
Eredita da `Node`, da `Element` o forse da `HTMLElement`?
Loading
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy