Lokasi ngalangkungan proxy:   [ UP ]  
[Ngawartoskeun bug]   [Panyetelan cookie]                
Skip to content

Node properties: type, tag and contents #293

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.

Sign up for GitHub

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
ockley merged 1 commit into from
May 4, 2026
Merged

Node properties: type, tag and contents #293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions ...1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
There's a catch here.
Der er en lille hage er.

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.
På det tidspunkt hvor `<script>` eksekveres er DOM noden præcis `<script>`, fordi browseren ikke har processeret resten af siden endnu.

So the result is `1` (element node).
Så resultatet er `1` (element node).

```html run height=60
<html>
Expand Down
4 changes: 2 additions & 2 deletions 2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@ importance: 5

---

# What's in the nodeType?
# Hvad er der i nodeType?

What does the script show?
Hvad viser scriptet nedenfor?

```html
<html>
Expand Down
10 changes: 5 additions & 5 deletions 2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
Let's make a loop over `<li>`:
Lad os lave en løkke over `<li>`:

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

In the loop we need to get the text inside every `li`.
I løkken skal vi hente teksten inde i hvert `li`.

We can read the text from the first child node of `li`, that is the text node:
Vi kan læse teksten fra det første barn af `li`, som er tekst node:

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

// title is the text in <li> before any other nodes
// title er teksten inde i <li> før andre noder
}
```

Then we can get the number of descendants as `li.getElementsByTagName('li').length`.
Derefter kan vi hente nummeret af efterkommere med `li.getElementsByTagName('li').length`.
106 changes: 55 additions & 51 deletions 2-ui/1-document/05-basic-dom-node-properties/2-tree-info/solution.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,57 +1,61 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<body>
<body>
<ul>
<li>
Dyr
<ul>
<li>
Pattedyr
<ul>
<li>Køer</li>
<li>Aber</li>
<li>Hunde</li>
<li>Tigre</li>
</ul>
</li>
<li>
Andet
<ul>
<li>Slanger</li>
<li>Fugle</li>
<li>Øgler</li>
</ul>
</li>
</ul>
</li>
<li>
Fisk
<ul>
<li>
Akvarium
<ul>
<li>Guppy</li>
<li>Skalare</li>
</ul>
</li>
<li>
Havet
<ul>
<li>Havørred</li>
</ul>
</li>
</ul>
</li>
</ul>

<ul>
<li>Animals
<ul>
<li>Mammals
<ul>
<li>Cows</li>
<li>Donkeys</li>
<li>Dogs</li>
<li>Tigers</li>
</ul>
</li>
<li>Other
<ul>
<li>Snakes</li>
<li>Birds</li>
<li>Lizards</li>
</ul>
</li>
</ul>
</li>
<li>Fishes
<ul>
<li>Aquarium
<ul>
<li>Guppy</li>
<li>Angelfish</li>
</ul>
</li>
<li>Sea
<ul>
<li>Sea trout</li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
for (let li of document.querySelectorAll('li')) {
// hent titlen fra tekstnoden
let title = li.firstChild.data;

<script>
for (let li of document.querySelectorAll('li')) {
// get the title from the text node
let title = li.firstChild.data;
title = title.trim(); // fjern ekstra mellemrum rundt om teksten

title = title.trim(); // remove extra spaces from ends
// få antallet af efterkommere
let count = li.getElementsByTagName('li').length;

// get the descendants count
let count = li.getElementsByTagName('li').length;

alert(title + ': ' + count);
}
</script>

</body>
alert(title + ': ' + count);
}
</script>
</body>
</html>
92 changes: 48 additions & 44 deletions 2-ui/1-document/05-basic-dom-node-properties/2-tree-info/source.view/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,47 +1,51 @@
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<body>
<body>
<ul>
<li>
Dyr
<ul>
<li>
Pattedyr
<ul>
<li>Køer</li>
<li>Aber</li>
<li>Hunde</li>
<li>Tigre</li>
</ul>
</li>
<li>
Andet
<ul>
<li>Slanger</li>
<li>Fugle</li>
<li>Øgler</li>
</ul>
</li>
</ul>
</li>
<li>
Fisk
<ul>
<li>
Akvarium
<ul>
<li>Guppy</li>
<li>Skalare</li>
</ul>
</li>
<li>
Havet
<ul>
<li>Havørred</li>
</ul>
</li>
</ul>
</li>
</ul>

<ul>
<li>Animals
<ul>
<li>Mammals
<ul>
<li>Cows</li>
<li>Donkeys</li>
<li>Dogs</li>
<li>Tigers</li>
</ul>
</li>
<li>Other
<ul>
<li>Snakes</li>
<li>Birds</li>
<li>Lizards</li>
</ul>
</li>
</ul>
</li>
<li>Fishes
<ul>
<li>Aquarium
<ul>
<li>Guppy</li>
<li>Angelfish</li>
</ul>
</li>
<li>Sea
<ul>
<li>Sea trout</li>
</ul>
</li>
</ul>
</li>
</ul>

<script>
// ... your code...
</script>

</body>
<script>
// ... din kode ...
</script>
</body>
</html>
10 changes: 5 additions & 5 deletions 2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,13 @@ importance: 5

---

# Count descendants
# Tæl alle efterkommere

There's a tree structured as nested `ul/li`.
Der er en træstruktur af indlejrede `ul/li`.

Write the code that for each `<li>` shows:
Skriv den kode der for hvert `<li>` viser:

1. What's the text inside it (without the subtree)
2. The number of nested `<li>` -- all descendants, including the deeply nested ones.
1. Hvad er teksten inde i det (uden undertræet)
2. Antallet af indlejrede `<li>` -- alle efterkommere, inklusiv de dybt indlejrede.

[demo src="solution"]
10 changes: 5 additions & 5 deletions 2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
The answer: **`BODY`**.
Svaret er: **`BODY`**.

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

What's going on step by step:
Hvad sker der trin for trin:

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. Indholdet af `<body>` erstattes af en kommentar. Kommentaren er `<!--BODY-->`, fordi `body.tagName == "BODY"`. Som vi husker, er `tagName` altid versaler i HTML.
2. Kommentaren er nu det eneste barn, så vi får den med `body.firstChild`.
3. `data`-egenskaben af kommentaren er dens indhold (inde i `<!--...-->`): `"BODY"`.
6 changes: 3 additions & 3 deletions 2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@ importance: 3

---

# Tag in comment
# Tag i kommentarer

What does this code show?
Hvad viser denne kode?

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

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

alert( body.firstChild.data ); // what's here?
alert( body.firstChild.data ); // hvad er der her?
</script>
```
22 changes: 11 additions & 11 deletions ...document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md
View file
Open in desktop
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:
Vi kan se, hvilken kalsse den tilhører ved at udskrive den, f. eks. sådan her:

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

Or:
eller:

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

So, `document` is an instance of `HTMLDocument` class.
Så, `document` er en udgave af klassen `HTMLDocument`.

What's its place in the hierarchy?
Hvad er dens position i hierarkiet?

Yeah, we could browse the specification, but it would be faster to figure out manually.
Ja, vi kunne selvfølgelig gennemgå specifikationen, men det er måske hurtigere at finde ud af det manuelt.

Let's traverse the prototype chain via `__proto__`.
Lad os gennemløbe prototypekæden via `__proto__`.

As we know, methods of a class are in the `prototype` of the constructor. For instance, `HTMLDocument.prototype` has methods for documents.
Vi ved følgende: Metoderne for en klasse findes i egenskaben `prototype` hos konstruktøren. For eksempel har `HTMLDocument.prototype` metoder for dokumenter.

Also, there's a reference to the constructor function inside the `prototype`:
Derudover er der en reference til `constructor` funktionen inde i `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`:
For at få et navn på klassen som en streng, kan vi bruge `constructor.name`. Lad os gøre det for hele `document` prototypekæden, indtil klassen `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.
Det er hierarkiet.

We also could examine the object using `console.dir(document)` and see these names by opening `__proto__`. The console takes them from `constructor` internally.
Vi kunne også undersøge objektet ved hjælp af `console.dir(document)` og se disse navne ved at åbne `__proto__`. Konsollen henter dem internt fra `constructor` egenskaben.
8 changes: 4 additions & 4 deletions 2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,10 @@ importance: 4

---

# Where's the "document" in the hierarchy?
# Hvor er "document" i hierarkiet?

Which class does the `document` belong to?
Hvilken klasse hører `document` til?

What's its place in the DOM hierarchy?
Hvad er dens position i DOM-hierarkiet?

Does it inherit from `Node` or `Element`, or maybe `HTMLElement`?
Arver den fra `Node` eller `Element`, eller måske `HTMLElement`?
Loading