` tag has the text `"About elk"`. +For eksempel har `<title>` tagget teksten `"About elk"`. -Please note the special characters in text nodes: +Bemærk de specielle tegn i text noder: -- a newline: `↵` (in JavaScript known as `\n`) -- a space: `␣` +- en ny linie: `↵` (i JavaScript ofte skrevet som `\n`) +- et mellemrum: `␣` -Spaces and newlines are totally valid characters, like letters and digits. They form text nodes and become a part of the DOM. So, for instance, in the example above the `<head>` tag contains some spaces before `<title>`, and that text becomes a `#text` node (it contains a newline and some spaces only). +Mellemrum og linjeskift er gyldelige tegn, ligesom bogstaver og cifre. De danner text noder og bliver en del af DOM'en. Således bliver teksten i eksemplet ovenfor, som indeholder mellemrum før `<title>`, til en `#text` node (den indeholder en ny linie og nogle mellemrum). -There are only two top-level exclusions: -1. Spaces and newlines before `<head>` are ignored for historical reasons. -2. If we put something after `</body>`, then that is automatically moved inside the `body`, at the end, as the HTML spec requires that all content must be inside `<body>`. So there can't be any spaces after `</body>`. +Der er kun to top-niveau undtagelser: +1. Mellemrum og linjeskift før `<head>` ignoreres af historiske grunde. +2. Hvis vi putter noget efter `</body>`, så flyttes det automatisk ind i `body`, ved enden, da HTML specifikationen kræver, at alt indhold skal være inde i `<body>`. Så der kan ikke være nogle mellemrum efter `</body>`. -In other cases everything's straightforward -- if there are spaces (just like any character) in the document, then they become text nodes in the DOM, and if we remove them, then there won't be any. +I alle andre tilfælde er det lige ud af landevejen - hvis der er mellemrum (ligesom ethvert tegn) i dokumentet, så bliver de til tekst noder i DOM'en, og hvis vi fjerner dem, så vil der ikke være nogle. -Here are no space-only text nodes: +Her er et eksempel på en DOM med tekst noder uden mellemrum eller linjeskift: ```html no-beautify <!DOCTYPE HTML> @@ -96,21 +96,21 @@ let node2 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node2, 'div.domtree', 690, 210); </script> -```smart header="Spaces at string start/end and space-only text nodes are usually hidden in tools" -Browser tools (to be covered soon) that work with DOM usually do not show spaces at the start/end of the text and empty text nodes (line-breaks) between tags. +```smart header="Mellemrum ved start/slut af tekststreng og tekst noder der kun indeholder mellemrum skjules ofte i værktøjer" +Browser værktøjer (som vil blive dækket snart) der arbejder med DOM'en viser ofte ikke mellemrum ved start/end af teksten og tomme tekst noder (linjeskift) mellem tags. -Developer tools save screen space this way. +Det er en måde for udviklerværktøjet at spare på pladsen. -On further DOM pictures we'll sometimes omit them when they are irrelevant. Such spaces usually do not affect how the document is displayed. +Ved fremtidige DOM billeder vil vi ofte udelade dem, når de er irrelevante. Sådanne mellemrum påvirker normalt ikke, hvordan dokumentet vises. ``` -## Autocorrection +## Autokorrektur -If the browser encounters malformed HTML, it automatically corrects it when making the DOM. +Hvis browseren møder fejlformateret HTML, korrigere den automatisk når DOM'en oprettes. -For instance, the top tag is always `<html>`. Even if it doesn't exist in the document, it will exist in the DOM, because the browser will create it. The same goes for `<body>`. +For eksempel er første tag altid `<html>`. Selv hvis det ikke eksisterer i dokumentet, vil det eksistere i DOM'en, fordi browseren vil oprette det. Det samme gælder for `<body>`. -As an example, if the HTML file is the single word `"Hello"`, the browser will wrap it into `<html>` and `<body>`, and add the required `<head>`, and the DOM will be: +Som et eksempel, hvis HTML-filen er det ene ord `"Hello"`, vil browseren pakke det ind i `<html>` og `<body>`, og tilføje det nødvendige `<head>`, og DOM'en vil være: <div class="domtree"></div> @@ -121,9 +121,9 @@ let node3 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node3, 'div.domtree', 690, 150); </script> -While generating the DOM, browsers automatically process errors in the document, close tags and so on. +Når DOM'en genereres, korrigere browseren automatisk fejl i dokumentet, lukker tags og så videre. -A document with unclosed tags: +Et dokument med åbne tags: ```html no-beautify <p>Hello @@ -132,7 +132,7 @@ A document with unclosed tags: <li>Dad ``` -...will become a normal DOM as the browser reads tags and restores the missing parts: +...vil blive til et normalt DOM træ, da browseren læser tags og gendanner de manglende dele: <div class="domtree"></div> @@ -142,16 +142,16 @@ let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node4, 'div.domtree', 690, 360); </script> -````warn header="Tables always have `<tbody>`" -An interesting "special case" is tables. By DOM specification they must have `<tbody>` tag, but HTML text may omit it. Then the browser creates `<tbody>` in the DOM automatically. +````warn header="Tabeller har altid `<tbody>`" +Et interessant "særtilfælde" er ved tabeller. Ifølge DOM specifikationen skal de have `<tbody>` tag, men HTML tekst kan udelade det. Derfor opretter browseren `<tbody>` i DOM'en automatisk. -For the HTML: +For HTML der ser sådan ud: ```html no-beautify <table id="table"><tr><td>1</td></tr></table> ``` -DOM-structure will be: +vil DOM-strukturen være: <div class="domtree"></div> <script> @@ -160,14 +160,14 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType": drawHtmlTree(node5, 'div.domtree', 600, 200); </script> -You see? The `<tbody>` appeared out of nowhere. We should keep this in mind while working with tables to avoid surprises. +Kan du se det? Tagget `<tbody>` skabes ud af det blå. Det er værd at have i baghovedet, når vi arbejder med tabeller for at undgå overraskelser. ```` -## Other node types +## Andre typer af noder -There are some other node types besides elements and text nodes. +Der findes et par andre noder end elementer og tekstnoder. -For example, comments: +For eksempel, kommentarer: ```html <!DOCTYPE HTML> @@ -193,90 +193,90 @@ let node6 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node6, 'div.domtree', 690, 500); </script> -We can see here a new tree node type -- *comment node*, labeled as `#comment`, between two text nodes. +Her ser vi en ny type node -- *kommentar node*, mærket som `#comment`, imellem to tekstnoder. -We may think -- why is a comment added to the DOM? It doesn't affect the visual representation in any way. But there's a rule -- if something's in HTML, then it also must be in the DOM tree. +Vi kan tænke -- hvorfor bliver en kommentar tilføjet til DOM'en? Det påvirker ikke den visuelle repræsentation på nogen måde. Men der er en regel -- hvis noget er i HTML, så skal det også være i DOM-træet. -**Everything in HTML, even comments, becomes a part of the DOM.** +**Alt i HTML, også kommentarer, bliver en del af DOM'en.** -Even the `<!DOCTYPE...>` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before `<html>`. Few people know about that. We are not going to touch that node, we even don't draw it on diagrams, but it's there. +Selv `<!DOCTYPE...>`-direktivet i begyndelsen af HTML er også en DOM-node. Den er i DOM-træet lige før `<html>`. Få mennesker ved det. Vi kommer ikke til at røre den node, vi tegner den heller ikke på diagrammer, men den er der. -The `document` object that represents the whole document is, formally, a DOM node as well. +Objektet `document` der repræsenterer hele dokumentet er formelt set også en DOM node. -There are [12 node types](https://dom.spec.whatwg.org/#node). In practice we usually work with 4 of them: +Der er [12 typer af noder](https://dom.spec.whatwg.org/#node). I praksis arbejder vi mest med fire af dem: -1. `document` -- the "entry point" into DOM. -2. element nodes -- HTML-tags, the tree building blocks. -3. text nodes -- contain text. -4. comments -- sometimes we can put information there, it won't be shown, but JS can read it from the DOM. +1. `document` -- "hoveddøren" ind til DOM. +2. element noder -- HTML-tags, byggeblokkene til selve træset. +3. tekst noder -- indeholder tekst. +4. kommentarer -- Vi kan placere information der, det vil ikke blive vist, men JS kan læse det fra DOM'en. -## See it for yourself +## Test det selv -To see the DOM structure in real-time, try [Live DOM Viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up as a DOM at an instant. +For at se DOM-strukturen i realtid, kan du prøve at bruge [Live DOM Viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/). Skriv blot i dokumentet, og det vil blive vist som en DOM med det samme. -Another way to explore the DOM is to use the browser developer tools. Actually, that's what we use when developing. +En anden måde at udforske DOM'en er at bruge browserens udviklerværktøjer. Faktisk er det, vi bruger, når vi udvikler. -To do so, open the web page [elk.html](elk.html), turn on the browser developer tools and switch to the Elements tab. +For at gøre det, åbn web siden [elk.html](elk.html), slå browserens udviklerværktøjer til og skift til Elements-fanen. -It should look like this: +Det burde se ud i stil med dette: ![](elk.svg) -You can see the DOM, click on elements, see their details and so on. +Du kan se din DOM, klikke på elementer for at se detaljer etc. -Please note that the DOM structure in developer tools is simplified. Text nodes are shown just as text. And there are no "blank" (space only) text nodes at all. That's fine, because most of the time we are interested in element nodes. +Bemærk, at DOM strukturen i udviklerværktøjer er forenklet. Tekstnoder vises kun som tekst. Og der er ingen "tomme" (kun mellemrum) tekstnoder overhovedet. Det er i orden, fordi de fleste gange er vi kun interesseret i elementnoder. -Clicking the <span class="devtools" style="background-position:-328px -124px"></span> button in the left-upper corner allows us to choose a node from the webpage using a mouse (or other pointer devices) and "inspect" it (scroll to it in the Elements tab). This works great when we have a huge HTML page (and corresponding huge DOM) and would like to see the place of a particular element in it. +At klikke på <span class="devtools" style="background-position:-328px -124px"></span> knappen i det øverste venstre hjørne giver os mulighed for at vælge en node fra siden ved hjælp af en mus og "inspicere" den (rulle ned til den i Elements-fanen). Dette virker godt, når vi har en meget stor HTML-side (og derfor en tilsvarende stor DOM) og gerne vil se placeringen af en bestemt element i den. -Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu. +En anden måde at gøre det på ville være at højreklikke på en web side og vælge "Inspect" i kontekstmenuen. ![](inspect.svg) -At the right part of the tools there are the following subtabs: -- **Styles** -- we can see CSS applied to the current element rule by rule, including built-in rules (gray). Almost everything can be edited in-place, including the dimensions/margins/paddings of the box below. -- **Computed** -- to see CSS applied to the element by property: for each property we can see a rule that gives it (including CSS inheritance and such). -- **Event Listeners** -- to see event listeners attached to DOM elements (we'll cover them in the next part of the tutorial). -- ...and so on. +I højre side af værktøjerne er følgende underfaner: +- **Styles** -- vi kan se CSS påført til det aktuelle element regel for regel, inklusive indbyggede regler (grå). Næsten alt kan redigeres "på stedet", herunder dimensioner/margin/padding af boksen. +- **Computed** -- for at se CSS påført til elementet efter egenskab: for hver egenskab kan vi se de regler som giver den sit udseende (inklusiv CSS arv mm.). +- **Event Listeners** -- for at se hvilke hændelser der lyttes efter på DOM elementer (de bliver dækket i den næste del af tutorialen). +... og flere endnu, som jeg ikke vil dække i denne del. -The best way to study them is to click around. Most values are editable in-place. +Den bedste måde at studere dem er at klikke rundt. De fleste værdier er redigerbare in-place. -## Interaction with console +## Interaktion med konsollen -As we work the DOM, we also may want to apply JavaScript to it. Like: get a node and run some code to modify it, to see the result. Here are few tips to travel between the Elements tab and the console. +Når vi arbejder med DOM'en, vil vi ofte bruge JavaScript i den sammenhæng: Hente et element og afvikle noget kode der modificerer det og sende det tilbage for at se resultatet. Her er et par tips til at bevæge dig mellem Elements-fanen og konsollen. -For the start: +Start med: -1. Select the first `<li>` in the Elements tab. -2. Press `key:Esc` -- it will open console right below the Elements tab. +1. Vælg det første `<li>` i Elements-fanen. +2. Tryk `key:Esc` -- det vil åbne konsollen lige under Elements-fanen. -Now the last selected element is available as `$0`, the previously selected is `$1` etc. +Nu er det sidst valgte element tilgængeligt som `$0`, det tidligere valgte er `$1` etc. -We can run commands on them. For instance, `$0.style.background = 'red'` makes the selected list item red, like this: +Nu kan vi køre kommandoer som f. eks. `$0.style.background = 'red'` for at gøre det valgte listeelement rødt: ![](domconsole0.svg) -That's how to get a node from Elements in Console. +Sådan kan du referere direkte til en node fra Elements i konsollen. -There's also a road back. If there's a variable referencing a DOM node, then we can use the command `inspect(node)` in Console to see it in the Elements pane. +Der er også en vej tilbage. Hvis der er en variabel der refererer til en DOM-node, så kan vi bruge kommandoen `inspect(node)` i konsollen for at se den i Elements-fanen. -Or we can just output the DOM node in the console and explore "in-place", like `document.body` below: +Eller vi kan bare outputte DOM-noden i konsollen og udforske den "på stedet", som `document.body` nedenfor: ![](domconsole1.svg) -That's for debugging purposes of course. From the next chapter on we'll access and modify DOM using JavaScript. +Dette er selvfølgelig kun til debugging. Fra og med næste kapitel vil vi se nærmere på, hvordan vi arbejder med DOM'en ved hjælp af JavaScript. -The browser developer tools are a great help in development: we can explore the DOM, try things and see what goes wrong. +Browserens udviklingsværktøjer er en stor hjælp i udviklingen: vi kan udforske DOM'en, prøve ting og se, hvad der går galt. -## Summary +## Opsummering -An HTML/XML document is represented inside the browser as the DOM tree. +Et HTML/XML dokument er repræsenteret inde i browseren som et DOM-træ. -- Tags become element nodes and form the structure. -- Text becomes text nodes. -- ...etc, everything in HTML has its place in DOM, even comments. +- Tags bliver til elementnoder og former selve strukturen. +- Tekst bliver til tekstnoder. +- ...etc, alt i HTML har sin plads i DOM, også kommentarer. -We can use developer tools to inspect DOM and modify it manually. +Vi kan bruge udviklerværktøjer til at inpicere DOM'en og modificere den manuelt. -Here we covered the basics, the most used and important actions to start with. There's an extensive documentation about Chrome Developer Tools at <https://developers.google.com/web/tools/chrome-devtools>. The best way to learn the tools is to click here and there, read menus: most options are obvious. Later, when you know them in general, read the docs and pick up the rest. +Vi har dækket de grundlæggende koncepter, de mest brugte og vigtige handlinger for at komme i gang. Der er en omfattende dokumentation om Chrome Developer Tools på <https://developers.google.com/web/tools/chrome-devtools>. Den bedste måde at lære værktøjerne på er at klikke her og der, læse menuerne: de fleste muligheder er åbenlyse. Senere, når du føler dig mere tryg, kan du læse dokumentationen og opdage resten. -DOM nodes have properties and methods that allow us to travel between them, modify them, move around the page, and more. We'll get down to them in the next chapters. +DOM-noder har egenskaber og metoder, der tillader os at rejse mellem dem, modificere dem, flytte rundt på siden og mere. Vi vil komme ind på dem i de næste kapitler.

From a0a033c573995e423b56542dad8b88e08454ee51 Mon Sep 17 00:00:00 2001 From: ockley Date: Thu, 30 Apr 2026 11:43:06 +0200 Subject: [PATCH] Oversat til dansk Co-authored-by: Copilot --- 2-ui/1-document/02-dom-nodes/article.md | 188 ++++++++++++------------ 1 file changed, 94 insertions(+), 94 deletions(-) diff --git a/2-ui/1-document/02-dom-nodes/article.md b/2-ui/1-document/02-dom-nodes/article.md index f7f2be91..721da37a 100644 --- a/2-ui/1-document/02-dom-nodes/article.md +++ b/2-ui/1-document/02-dom-nodes/article.md @@ -4,35 +4,35 @@ libs: --- -# DOM tree +# DOM træet -The backbone of an HTML document is tags. +Rygraden i et HTML dokument er tags. -According to the Document Object Model (DOM), every HTML tag is an object. Nested tags are "children" of the enclosing one. The text inside a tag is an object as well. +Ifølge Document Object Model (DOM) er alle HTML tag objekter. Indlejrede tags kaldes "Børn" ("children" på engelsk)af det omkransende tag. Fri tekst inde i et tag er også objekter. -All these objects are accessible using JavaScript, and we can use them to modify the page. +Alle disse objekter er tilgængelige ved hjælp af JavaScript, og vi kan bruge dem til at ændre siden. -For example, `document.body` is the object representing the `` tag. +For eksempel er `document.body` objektet, der repræsenterer `` tagget. -Running this code will make the `` red for 3 seconds: +Hvis vi kører denne kode, vil `` blive rød i 3 sekunder: ```js run -document.body.style.background = 'red'; // make the background red +document.body.style.background = 'red'; // gør baggrunden rød -setTimeout(() => document.body.style.background = '', 3000); // return back +setTimeout(() => document.body.style.background = '', 3000); // vend tilbage ``` -Here we used `style.background` to change the background color of `document.body`, but there are many other properties, such as: +Her bruger vi `style.background` til at ændre baggrundsfarven på `document.body`, men der er mange andre egenskaber, såsom: -- `innerHTML` -- HTML contents of the node. -- `offsetWidth` -- the node width (in pixels) -- ...and so on. +- `innerHTML` -- HTML-indholdet af noden. +- `offsetWidth` -- nodens bredde (i pixels) +- ...og så videre. -Soon we'll learn more ways to manipulate the DOM, but first we need to know about its structure. +Snart vil vi lære flere måder at manipulere DOM'en på, men først skal vi kende dens struktur. -## An example of the DOM +## Et eksempel på DOM'en -Let's start with the following simple document: +Lad os starte med følgende simple dokument: ```html run no-beautify @@ -46,7 +46,7 @@ Let's start with the following simple document: ``` -The DOM represents HTML as a tree structure of tags. Here's how it looks: +DOM'en repræsenterer HTML dokumentet som en træstruktur af tags. Her er hvordan det ser ud:

@@ -57,31 +57,31 @@ drawHtmlTree(node1, 'div.domtree', 690, 320); ```online -On the picture above, you can click on element nodes and their children will open/collapse. +På billedet ovenfor kan du klikke på elementer og deres børn vil åbne/lukke. ``` -Every tree node is an object. +Hver node i træet er et objekt. -Tags are *element nodes* (or just elements) and form the tree structure: `` is at the root, then `` and `` are its children, etc. +Tags er *element-noder* (eller bare elementer) og danner træstrukturer: `` er på roden, så `` og `` er dens børn, etc. -The text inside elements forms *text nodes*, labelled as `#text`. A text node contains only a string. It may not have children and is always a leaf of the tree. +Teksten inde i elementer danner *tekst noder*, mærket som `#text`. En text node indeholder kun en streng. Den må ikke have børn og kan ses som et blad (leaf på engelsk) i træet. -For instance, the `` tag has the text `"About elk"`. +For eksempel har `<title>` tagget teksten `"About elk"`. -Please note the special characters in text nodes: +Bemærk de specielle tegn i text noder: -- a newline: `↵` (in JavaScript known as `\n`) -- a space: `␣` +- en ny linie: `↵` (i JavaScript ofte skrevet som `\n`) +- et mellemrum: `␣` -Spaces and newlines are totally valid characters, like letters and digits. They form text nodes and become a part of the DOM. So, for instance, in the example above the `<head>` tag contains some spaces before `<title>`, and that text becomes a `#text` node (it contains a newline and some spaces only). +Mellemrum og linjeskift er gyldelige tegn, ligesom bogstaver og cifre. De danner text noder og bliver en del af DOM'en. Således bliver teksten i eksemplet ovenfor, som indeholder mellemrum før `<title>`, til en `#text` node (den indeholder en ny linie og nogle mellemrum). -There are only two top-level exclusions: -1. Spaces and newlines before `<head>` are ignored for historical reasons. -2. If we put something after `</body>`, then that is automatically moved inside the `body`, at the end, as the HTML spec requires that all content must be inside `<body>`. So there can't be any spaces after `</body>`. +Der er kun to top-niveau undtagelser: +1. Mellemrum og linjeskift før `<head>` ignoreres af historiske grunde. +2. Hvis vi putter noget efter `</body>`, så flyttes det automatisk ind i `body`, ved enden, da HTML specifikationen kræver, at alt indhold skal være inde i `<body>`. Så der kan ikke være nogle mellemrum efter `</body>`. -In other cases everything's straightforward -- if there are spaces (just like any character) in the document, then they become text nodes in the DOM, and if we remove them, then there won't be any. +I alle andre tilfælde er det lige ud af landevejen - hvis der er mellemrum (ligesom ethvert tegn) i dokumentet, så bliver de til tekst noder i DOM'en, og hvis vi fjerner dem, så vil der ikke være nogle. -Here are no space-only text nodes: +Her er et eksempel på en DOM med tekst noder uden mellemrum eller linjeskift: ```html no-beautify <!DOCTYPE HTML> @@ -96,21 +96,21 @@ let node2 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node2, 'div.domtree', 690, 210); </script> -```smart header="Spaces at string start/end and space-only text nodes are usually hidden in tools" -Browser tools (to be covered soon) that work with DOM usually do not show spaces at the start/end of the text and empty text nodes (line-breaks) between tags. +```smart header="Mellemrum ved start/slut af tekststreng og tekst noder der kun indeholder mellemrum skjules ofte i værktøjer" +Browser værktøjer (som vil blive dækket snart) der arbejder med DOM'en viser ofte ikke mellemrum ved start/end af teksten og tomme tekst noder (linjeskift) mellem tags. -Developer tools save screen space this way. +Det er en måde for udviklerværktøjet at spare på pladsen. -On further DOM pictures we'll sometimes omit them when they are irrelevant. Such spaces usually do not affect how the document is displayed. +Ved fremtidige DOM billeder vil vi ofte udelade dem, når de er irrelevante. Sådanne mellemrum påvirker normalt ikke, hvordan dokumentet vises. ``` -## Autocorrection +## Autokorrektur -If the browser encounters malformed HTML, it automatically corrects it when making the DOM. +Hvis browseren møder fejlformateret HTML, korrigere den automatisk når DOM'en oprettes. -For instance, the top tag is always `<html>`. Even if it doesn't exist in the document, it will exist in the DOM, because the browser will create it. The same goes for `<body>`. +For eksempel er første tag altid `<html>`. Selv hvis det ikke eksisterer i dokumentet, vil det eksistere i DOM'en, fordi browseren vil oprette det. Det samme gælder for `<body>`. -As an example, if the HTML file is the single word `"Hello"`, the browser will wrap it into `<html>` and `<body>`, and add the required `<head>`, and the DOM will be: +Som et eksempel, hvis HTML-filen er det ene ord `"Hello"`, vil browseren pakke det ind i `<html>` og `<body>`, og tilføje det nødvendige `<head>`, og DOM'en vil være: <div class="domtree"></div> @@ -121,9 +121,9 @@ let node3 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node3, 'div.domtree', 690, 150); </script> -While generating the DOM, browsers automatically process errors in the document, close tags and so on. +Når DOM'en genereres, korrigere browseren automatisk fejl i dokumentet, lukker tags og så videre. -A document with unclosed tags: +Et dokument med åbne tags: ```html no-beautify <p>Hello @@ -132,7 +132,7 @@ A document with unclosed tags: <li>Dad ``` -...will become a normal DOM as the browser reads tags and restores the missing parts: +...vil blive til et normalt DOM træ, da browseren læser tags og gendanner de manglende dele: <div class="domtree"></div> @@ -142,16 +142,16 @@ let node4 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node4, 'div.domtree', 690, 360); </script> -````warn header="Tables always have `<tbody>`" -An interesting "special case" is tables. By DOM specification they must have `<tbody>` tag, but HTML text may omit it. Then the browser creates `<tbody>` in the DOM automatically. +````warn header="Tabeller har altid `<tbody>`" +Et interessant "særtilfælde" er ved tabeller. Ifølge DOM specifikationen skal de have `<tbody>` tag, men HTML tekst kan udelade det. Derfor opretter browseren `<tbody>` i DOM'en automatisk. -For the HTML: +For HTML der ser sådan ud: ```html no-beautify <table id="table"><tr><td>1</td></tr></table> ``` -DOM-structure will be: +vil DOM-strukturen være: <div class="domtree"></div> <script> @@ -160,14 +160,14 @@ let node5 = {"name":"TABLE","nodeType":1,"children":[{"name":"TBODY","nodeType": drawHtmlTree(node5, 'div.domtree', 600, 200); </script> -You see? The `<tbody>` appeared out of nowhere. We should keep this in mind while working with tables to avoid surprises. +Kan du se det? Tagget `<tbody>` skabes ud af det blå. Det er værd at have i baghovedet, når vi arbejder med tabeller for at undgå overraskelser. ```` -## Other node types +## Andre typer af noder -There are some other node types besides elements and text nodes. +Der findes et par andre noder end elementer og tekstnoder. -For example, comments: +For eksempel, kommentarer: ```html <!DOCTYPE HTML> @@ -193,90 +193,90 @@ let node6 = {"name":"HTML","nodeType":1,"children":[{"name":"HEAD","nodeType":1, drawHtmlTree(node6, 'div.domtree', 690, 500); </script> -We can see here a new tree node type -- *comment node*, labeled as `#comment`, between two text nodes. +Her ser vi en ny type node -- *kommentar node*, mærket som `#comment`, imellem to tekstnoder. -We may think -- why is a comment added to the DOM? It doesn't affect the visual representation in any way. But there's a rule -- if something's in HTML, then it also must be in the DOM tree. +Vi kan tænke -- hvorfor bliver en kommentar tilføjet til DOM'en? Det påvirker ikke den visuelle repræsentation på nogen måde. Men der er en regel -- hvis noget er i HTML, så skal det også være i DOM-træet. -**Everything in HTML, even comments, becomes a part of the DOM.** +**Alt i HTML, også kommentarer, bliver en del af DOM'en.** -Even the `<!DOCTYPE...>` directive at the very beginning of HTML is also a DOM node. It's in the DOM tree right before `<html>`. Few people know about that. We are not going to touch that node, we even don't draw it on diagrams, but it's there. +Selv `<!DOCTYPE...>`-direktivet i begyndelsen af HTML er også en DOM-node. Den er i DOM-træet lige før `<html>`. Få mennesker ved det. Vi kommer ikke til at røre den node, vi tegner den heller ikke på diagrammer, men den er der. -The `document` object that represents the whole document is, formally, a DOM node as well. +Objektet `document` der repræsenterer hele dokumentet er formelt set også en DOM node. -There are [12 node types](https://dom.spec.whatwg.org/#node). In practice we usually work with 4 of them: +Der er [12 typer af noder](https://dom.spec.whatwg.org/#node). I praksis arbejder vi mest med fire af dem: -1. `document` -- the "entry point" into DOM. -2. element nodes -- HTML-tags, the tree building blocks. -3. text nodes -- contain text. -4. comments -- sometimes we can put information there, it won't be shown, but JS can read it from the DOM. +1. `document` -- "hoveddøren" ind til DOM. +2. element noder -- HTML-tags, byggeblokkene til selve træset. +3. tekst noder -- indeholder tekst. +4. kommentarer -- Vi kan placere information der, det vil ikke blive vist, men JS kan læse det fra DOM'en. -## See it for yourself +## Test det selv -To see the DOM structure in real-time, try [Live DOM Viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/). Just type in the document, and it will show up as a DOM at an instant. +For at se DOM-strukturen i realtid, kan du prøve at bruge [Live DOM Viewer](https://software.hixie.ch/utilities/js/live-dom-viewer/). Skriv blot i dokumentet, og det vil blive vist som en DOM med det samme. -Another way to explore the DOM is to use the browser developer tools. Actually, that's what we use when developing. +En anden måde at udforske DOM'en er at bruge browserens udviklerværktøjer. Faktisk er det, vi bruger, når vi udvikler. -To do so, open the web page [elk.html](elk.html), turn on the browser developer tools and switch to the Elements tab. +For at gøre det, åbn web siden [elk.html](elk.html), slå browserens udviklerværktøjer til og skift til Elements-fanen. -It should look like this: +Det burde se ud i stil med dette: ![](elk.svg) -You can see the DOM, click on elements, see their details and so on. +Du kan se din DOM, klikke på elementer for at se detaljer etc. -Please note that the DOM structure in developer tools is simplified. Text nodes are shown just as text. And there are no "blank" (space only) text nodes at all. That's fine, because most of the time we are interested in element nodes. +Bemærk, at DOM strukturen i udviklerværktøjer er forenklet. Tekstnoder vises kun som tekst. Og der er ingen "tomme" (kun mellemrum) tekstnoder overhovedet. Det er i orden, fordi de fleste gange er vi kun interesseret i elementnoder. -Clicking the <span class="devtools" style="background-position:-328px -124px"></span> button in the left-upper corner allows us to choose a node from the webpage using a mouse (or other pointer devices) and "inspect" it (scroll to it in the Elements tab). This works great when we have a huge HTML page (and corresponding huge DOM) and would like to see the place of a particular element in it. +At klikke på <span class="devtools" style="background-position:-328px -124px"></span> knappen i det øverste venstre hjørne giver os mulighed for at vælge en node fra siden ved hjælp af en mus og "inspicere" den (rulle ned til den i Elements-fanen). Dette virker godt, når vi har en meget stor HTML-side (og derfor en tilsvarende stor DOM) og gerne vil se placeringen af en bestemt element i den. -Another way to do it would be just right-clicking on a webpage and selecting "Inspect" in the context menu. +En anden måde at gøre det på ville være at højreklikke på en web side og vælge "Inspect" i kontekstmenuen. ![](inspect.svg) -At the right part of the tools there are the following subtabs: -- **Styles** -- we can see CSS applied to the current element rule by rule, including built-in rules (gray). Almost everything can be edited in-place, including the dimensions/margins/paddings of the box below. -- **Computed** -- to see CSS applied to the element by property: for each property we can see a rule that gives it (including CSS inheritance and such). -- **Event Listeners** -- to see event listeners attached to DOM elements (we'll cover them in the next part of the tutorial). -- ...and so on. +I højre side af værktøjerne er følgende underfaner: +- **Styles** -- vi kan se CSS påført til det aktuelle element regel for regel, inklusive indbyggede regler (grå). Næsten alt kan redigeres "på stedet", herunder dimensioner/margin/padding af boksen. +- **Computed** -- for at se CSS påført til elementet efter egenskab: for hver egenskab kan vi se de regler som giver den sit udseende (inklusiv CSS arv mm.). +- **Event Listeners** -- for at se hvilke hændelser der lyttes efter på DOM elementer (de bliver dækket i den næste del af tutorialen). +... og flere endnu, som jeg ikke vil dække i denne del. -The best way to study them is to click around. Most values are editable in-place. +Den bedste måde at studere dem er at klikke rundt. De fleste værdier er redigerbare in-place. -## Interaction with console +## Interaktion med konsollen -As we work the DOM, we also may want to apply JavaScript to it. Like: get a node and run some code to modify it, to see the result. Here are few tips to travel between the Elements tab and the console. +Når vi arbejder med DOM'en, vil vi ofte bruge JavaScript i den sammenhæng: Hente et element og afvikle noget kode der modificerer det og sende det tilbage for at se resultatet. Her er et par tips til at bevæge dig mellem Elements-fanen og konsollen. -For the start: +Start med: -1. Select the first `<li>` in the Elements tab. -2. Press `key:Esc` -- it will open console right below the Elements tab. +1. Vælg det første `<li>` i Elements-fanen. +2. Tryk `key:Esc` -- det vil åbne konsollen lige under Elements-fanen. -Now the last selected element is available as `$0`, the previously selected is `$1` etc. +Nu er det sidst valgte element tilgængeligt som `$0`, det tidligere valgte er `$1` etc. -We can run commands on them. For instance, `$0.style.background = 'red'` makes the selected list item red, like this: +Nu kan vi køre kommandoer som f. eks. `$0.style.background = 'red'` for at gøre det valgte listeelement rødt: ![](domconsole0.svg) -That's how to get a node from Elements in Console. +Sådan kan du referere direkte til en node fra Elements i konsollen. -There's also a road back. If there's a variable referencing a DOM node, then we can use the command `inspect(node)` in Console to see it in the Elements pane. +Der er også en vej tilbage. Hvis der er en variabel der refererer til en DOM-node, så kan vi bruge kommandoen `inspect(node)` i konsollen for at se den i Elements-fanen. -Or we can just output the DOM node in the console and explore "in-place", like `document.body` below: +Eller vi kan bare outputte DOM-noden i konsollen og udforske den "på stedet", som `document.body` nedenfor: ![](domconsole1.svg) -That's for debugging purposes of course. From the next chapter on we'll access and modify DOM using JavaScript. +Dette er selvfølgelig kun til debugging. Fra og med næste kapitel vil vi se nærmere på, hvordan vi arbejder med DOM'en ved hjælp af JavaScript. -The browser developer tools are a great help in development: we can explore the DOM, try things and see what goes wrong. +Browserens udviklingsværktøjer er en stor hjælp i udviklingen: vi kan udforske DOM'en, prøve ting og se, hvad der går galt. -## Summary +## Opsummering -An HTML/XML document is represented inside the browser as the DOM tree. +Et HTML/XML dokument er repræsenteret inde i browseren som et DOM-træ. -- Tags become element nodes and form the structure. -- Text becomes text nodes. -- ...etc, everything in HTML has its place in DOM, even comments. +- Tags bliver til elementnoder og former selve strukturen. +- Tekst bliver til tekstnoder. +- ...etc, alt i HTML har sin plads i DOM, også kommentarer. -We can use developer tools to inspect DOM and modify it manually. +Vi kan bruge udviklerværktøjer til at inpicere DOM'en og modificere den manuelt. -Here we covered the basics, the most used and important actions to start with. There's an extensive documentation about Chrome Developer Tools at <https://developers.google.com/web/tools/chrome-devtools>. The best way to learn the tools is to click here and there, read menus: most options are obvious. Later, when you know them in general, read the docs and pick up the rest. +Vi har dækket de grundlæggende koncepter, de mest brugte og vigtige handlinger for at komme i gang. Der er en omfattende dokumentation om Chrome Developer Tools på <https://developers.google.com/web/tools/chrome-devtools>. Den bedste måde at lære værktøjerne på er at klikke her og der, læse menuerne: de fleste muligheder er åbenlyse. Senere, når du føler dig mere tryg, kan du læse dokumentationen og opdage resten. -DOM nodes have properties and methods that allow us to travel between them, modify them, move around the page, and more. We'll get down to them in the next chapters. +DOM-noder har egenskaber og metoder, der tillader os at rejse mellem dem, modificere dem, flytte rundt på siden og mere. Vi vil komme ind på dem i de næste kapitler.