diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md index 52c34640a..219a0ca85 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md +++ b/2-ui/1-document/05-basic-dom-node-properties/2-lastchild-nodetype-inline/solution.md @@ -1,8 +1,8 @@ -There's a catch here. +Der er en lille hage er. -At the time of ` - - + alert(title + ': ' + count); + } + + diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/source.view/index.html b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/source.view/index.html index fbfacaa88..26ea8a0dd 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/source.view/index.html +++ b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/source.view/index.html @@ -1,47 +1,51 @@ - + - + + - - - - - + + diff --git a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md index f2d9edc67..cce6876e6 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md +++ b/2-ui/1-document/05-basic-dom-node-properties/2-tree-info/task.md @@ -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 `
  • ` shows: +Skriv den kode der for hvert `
  • ` viser: -1. What's the text inside it (without the subtree) -2. The number of nested `
  • ` -- all descendants, including the deeply nested ones. +1. Hvad er teksten inde i det (uden undertræet) +2. Antallet af indlejrede `
  • ` -- alle efterkommere, inklusiv de dybt indlejrede. [demo src="solution"] diff --git a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md index 32900a789..9eb0b4c61 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md +++ b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/solution.md @@ -1,4 +1,4 @@ -The answer: **`BODY`**. +Svaret er: **`BODY`**. ```html run ``` -What's going on step by step: +Hvad sker der trin for trin: -1. The content of `` is replaced with the comment. The comment is ``, 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 `` erstattes af en kommentar. Kommentaren er ``, 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"`. diff --git a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md index efe50b48f..1a0d9f540 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md +++ b/2-ui/1-document/05-basic-dom-node-properties/3-tag-in-comment/task.md @@ -2,9 +2,9 @@ importance: 3 --- -# Tag in comment +# Tag i kommentarer -What does this code show? +Hvad viser denne kode? ```html ``` diff --git a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md index cb9456717..1bc721ffd 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md +++ b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/solution.md @@ -1,33 +1,33 @@ -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 @@ -35,6 +35,6 @@ 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. diff --git a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md index de266c6ae..016a13fcd 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md +++ b/2-ui/1-document/05-basic-dom-node-properties/4-where-document-in-hierarchy/task.md @@ -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`? diff --git a/2-ui/1-document/05-basic-dom-node-properties/article.md b/2-ui/1-document/05-basic-dom-node-properties/article.md index 99dde5bcd..8424f287c 100644 --- a/2-ui/1-document/05-basic-dom-node-properties/article.md +++ b/2-ui/1-document/05-basic-dom-node-properties/article.md @@ -1,81 +1,81 @@ -# Node properties: type, tag and contents +# Node egenskaber: type, tag og contents -Let's get a more in-depth look at DOM nodes. +Lad os gå lidt mere i dybden med DOM-noder. -In this chapter we'll see more into what they are and learn their most used properties. +I dette kapitel vil vi se mere på, hvad de er, og lære deres mest brugte egenskaber. -## DOM node classes +## DOM node klasser -Different DOM nodes may have different properties. For instance, an element node corresponding to tag `` has link-related properties, and the one corresponding to `` has input-related properties and so on. Text nodes are not the same as element nodes. But there are also common properties and methods between all of them, because all classes of DOM nodes form a single hierarchy. +Forskellige DOM-noder kan have forskellige egenskaber. For eksempel har et element svarende til et `` tag, link-relaterede egenskaber, og den svarende til et `` tag har input-relaterede egenskaber osv. Tekst-noder er ikke de samme som element-noder. Men der er også fælles egenskaber og metoder mellem dem alle, fordi alle klasser af DOM-noder danner en enkelt hierarki. -Each DOM node belongs to the corresponding built-in class. +Hver DOM-node tilhører den tilsvarende indbyggede klasse. -The root of the hierarchy is [EventTarget](https://dom.spec.whatwg.org/#eventtarget), that is inherited by [Node](https://dom.spec.whatwg.org/#interface-node), and other DOM nodes inherit from it. +Roden af hierarkiet er [EventTarget](https://dom.spec.whatwg.org/#eventtarget), som er nedarvet fra [Node](https://dom.spec.whatwg.org/#interface-node), og andre DOM-noder nedarver fra den. -Here's the picture, explanations to follow: +Her er først en oversigt over klasserne, og derefter vil vi se på dem i detaljer: ![](dom-class-hierarchy.svg) -The classes are: +Klasserne er: -- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- is the root "abstract" class for everything. +- [EventTarget](https://dom.spec.whatwg.org/#eventtarget) -- er roden. En "abstract" klasse for alt andet. - Objects of that class are never created. It serves as a base, so that all DOM nodes support so-called "events", we'll study them later. + Objekter af denne klasse bliver aldrig oprettet. Den fungerer som en base så alle DOM-noder understøtter hændelser (såkaldte "events"), som vi vil studere senere. -- [Node](https://dom.spec.whatwg.org/#interface-node) -- is also an "abstract" class, serving as a base for DOM nodes. +- [Node](https://dom.spec.whatwg.org/#interface-node) -- er også en "abstract" klasse, der fungerer som en base for DOM-noder. - It provides the core tree functionality: `parentNode`, `nextSibling`, `childNodes` and so on (they are getters). Objects of `Node` class are never created. But there are other classes that inherit from it (and so inherit the `Node` functionality). + Den tilbyder den grundlæggende træ-funktionalitet: `parentNode`, `nextSibling`, `childNodes` og så videre (de er getters). Objekter af `Node`-klassen bliver aldrig oprettet. Men der er andre klasser, der nedarver fra den (og derigennem nedarver `Node`-funktionaliteten). -- [Document](https://dom.spec.whatwg.org/#interface-document), for historical reasons often inherited by `HTMLDocument` (though the latest spec doesn't dictate it) -- is a document as a whole. +- [Document](https://dom.spec.whatwg.org/#interface-document), af historiske grunde ofte nedarvet af `HTMLDocument` (selvom den nyeste specifikation ikke dikterer det) -- refererer til dokumentet som et hele. - The `document` global object belongs exactly to this class. It serves as an entry point to the DOM. + Det globale objekt `document` tilhører præcis denne klasse. Det fungerer som et indgangspunkt til DOM. -- [CharacterData](https://dom.spec.whatwg.org/#interface-characterdata) -- an "abstract" class, inherited by: - - [Text](https://dom.spec.whatwg.org/#interface-text) -- the class corresponding to a text inside elements, e.g. `Hello` in `

    Hello

    `. - - [Comment](https://dom.spec.whatwg.org/#interface-comment) -- the class for comments. They are not shown, but each comment becomes a member of DOM. +- [CharacterData](https://dom.spec.whatwg.org/#interface-characterdata) -- en "abstract" klasse, nedarves af: + - [Text](https://dom.spec.whatwg.org/#interface-text) -- klassen der korresponderer med en tekst indeni elementer, f.eks. `Hej` i `

    Hej

    `. + - [Comment](https://dom.spec.whatwg.org/#interface-comment) -- klassen for kommentarer. De vises ikke, men hver kommentar bliver et medlem af DOM. -- [Element](https://dom.spec.whatwg.org/#interface-element) -- is the base class for DOM elements. +- [Element](https://dom.spec.whatwg.org/#interface-element) -- er den grundlæggende klasse for DOM-elementer. - It provides element-level navigation like `nextElementSibling`, `children` and searching methods like `getElementsByTagName`, `querySelector`. + Den tilbyder element-niveau navigation som `nextElementSibling`, `children` og søgemetoder som `getElementsByTagName`, `querySelector`. - A browser supports not only HTML, but also XML and SVG. So the `Element` class serves as a base for more specific classes: `SVGElement`, `XMLElement` (we don't need them here) and `HTMLElement`. + En browser understøtter ikke kun HTML. Den understøtter også ting som XML and SVG. Så `Element` klassen fungerer som base for mere specifikke klasser: `SVGElement`, `XMLElement` (vi bruger dem ikke i denne sammenhæng) og `HTMLElement`. -- Finally, [HTMLElement](https://html.spec.whatwg.org/multipage/dom.html#htmlelement) is the basic class for all HTML elements. We'll work with it most of the time. +- Endelig er [HTMLElement](https://html.spec.whatwg.org/multipage/dom.html#htmlelement) den grundlæggende klasse for alle HTML-elementer. Vi vil arbejde med den det meste af tiden. - It is inherited by concrete HTML elements: - - [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) -- the class for `` elements, - - [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) -- the class for `` elements, - - [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlanchorelement) -- the class for `    ` elements, + Den bliver nedarvet af konkrete HTML-elementer, som har deres egne klasser, for eksempel: + - [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) -- klassen for `` elements, + - [HTMLBodyElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlbodyelement) -- klassen for `` elements, + - [HTMLAnchorElement](https://html.spec.whatwg.org/multipage/semantics.html#htmlanchorelement) -- klassen for `` elements, - ...and so on. -There are many other tags with their own classes that may have specific properties and methods, while some elements, such as ``, `
    `, `
    ` do not have any specific properties, so they are instances of `HTMLElement` class. +Der er mange andre tags med deres egne klasser, der kan have specifikke egenskaber og metoder, mens nogle elementer, såsom ``, `
    `, `
    ` ikke har nogen specifikke egenskaber, så de er instanser af `HTMLElement`-klassen. -So, the full set of properties and methods of a given node comes as the result of the chain of inheritance. +Således kommer det fulde sæt af egenskaber og metoder for en given node som resultatet af arvekæden. -For example, let's consider the DOM object for an `` element. It belongs to [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) class. +For eksempel, lad os betragte DOM-objektet for et `` element. Det tilhører [HTMLInputElement](https://html.spec.whatwg.org/multipage/forms.html#htmlinputelement) klassen. -It gets properties and methods as a superposition of (listed in inheritance order): +Den får sine egenskaber og metoder som en superposition af (opstillet i arveorden): -- `HTMLInputElement` -- this class provides input-specific properties, -- `HTMLElement` -- it provides common HTML element methods (and getters/setters), -- `Element` -- provides generic element methods, -- `Node` -- provides common DOM node properties, -- `EventTarget` -- gives the support for events (to be covered), -- ...and finally it inherits from `Object`, so "plain object" methods like `hasOwnProperty` are also available. +- `HTMLInputElement` -- denne klasse leverer input-specifikke egenskaber, +- `HTMLElement` -- den leverer fælles HTML-elementmetoder (og getters/setters), +- `Element` -- den leverer generiske elementmetoder, +- `Node` -- den leverer fælles DOM-nodeegenskaber, +- `EventTarget` -- den giver støtte for hændelser (til dækning), +- ...og endelig nedarver den fra `Object`, så "almene objektmetoder" som `hasOwnProperty` også er tilgængelige. -To see the DOM node class name, we can recall that an object usually has the `constructor` property. It references the class constructor, and `constructor.name` is its name: +For at se DOM-nodens klasse navn, kan vi huske på, at et objekt normalt har `constructor` egenskaben. Den refererer til klasse constructor, og `constructor.name` er dens navn. Så for `document.body` kan vi se: ```js run alert( document.body.constructor.name ); // HTMLBodyElement ``` -...Or we can just `toString` it: +... eller vi kan bare bruge `toString` på den: ```js run alert( document.body ); // [object HTMLBodyElement] ``` -We also can use `instanceof` to check the inheritance: +Vi kan også bruge `instanceof` for at tjekke nedarvning: ```js run alert( document.body instanceof HTMLBodyElement ); // true @@ -85,38 +85,38 @@ alert( document.body instanceof Node ); // true alert( document.body instanceof EventTarget ); // true ``` -As we can see, DOM nodes are regular JavaScript objects. They use prototype-based classes for inheritance. +Som vi kan se er DOM-noder regulære JavaScript-objekter. De bruger prototype-baserede klasser til arv. -That's also easy to see by outputting an element with `console.dir(elem)` in a browser. There in the console you can see `HTMLElement.prototype`, `Element.prototype` and so on. +Det kan også nemt vises ved at outputte et element med `console.dir(elem)` i en browser. Her kan du i konsollen se `HTMLElement.prototype`, `Element.prototype` og så videre. ```smart header="`console.dir(elem)` versus `console.log(elem)`" -Most browsers support two commands in their developer tools: `console.log` and `console.dir`. They output their arguments to the console. For JavaScript objects these commands usually do the same. +De fleste browsere understøtter to udviklerrværktøjer: `console.log` og `console.dir`. De outputter deres argumenter til konsollen. For JavaScript-objekter er disse kommandoer normalt ens. -But for DOM elements they are different: +Men for DOM-elementer er de forskellige: -- `console.log(elem)` shows the element DOM tree. -- `console.dir(elem)` shows the element as a DOM object, good to explore its properties. +- `console.log(elem)` viser elementets DOM-træ. +- `console.dir(elem)` viser elementet som et DOM-objekt, godt til at udforske dets egenskaber. -Try it on `document.body`. +Prøv det på `document.body`. ``` -````smart header="IDL in the spec" -In the specification, DOM classes aren't described by using JavaScript, but a special [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), that is usually easy to understand. +````smart header="IDL i specifikationen" +I specifikationen beskrives DOM-klasser ikke ved hjælp af JavaScript, men ved hjælp af et specielt [Interface description language](https://en.wikipedia.org/wiki/Interface_description_language) (IDL), som er nemmere at forstå. -In IDL all properties are prepended with their types. For instance, `DOMString`, `boolean` and so on. +I IDL er alle egenskaber foranstillet med deres typer. For eksempel, `DOMString`, `boolean` og så videre. -Here's an excerpt from it, with comments: +Her er et uddrag fra specifikationen med kommentarer, der forklarer IDL-syntaksen: ```js // Define HTMLInputElement *!* -// The colon ":" means that HTMLInputElement inherits from HTMLElement +// Kolon ":" betyder at HTMLInputElement nedarver fra HTMLElement */!* interface HTMLInputElement: HTMLElement { // here go properties and methods of elements *!* - // "DOMString" means that the value of a property is a string + // "DOMString" betyder at værdien af en egenskab er en streng */!* attribute DOMString accept; attribute DOMString alt; @@ -124,12 +124,12 @@ interface HTMLInputElement: HTMLElement { attribute DOMString value; *!* - // boolean value property (true/false) + // boolesk værdi i egenskab (true/false) attribute boolean autofocus; */!* ... *!* - // now the method: "void" means that the method returns no value + // nNu til metoderne: "void" betyder at metoden ikke returnerer nogen værdi */!* void select(); ... @@ -137,60 +137,60 @@ interface HTMLInputElement: HTMLElement { ``` ```` -## The "nodeType" property +## Egenskaben "nodeType" -The `nodeType` property provides one more, "old-fashioned" way to get the "type" of a DOM node. +Egenskaben `nodeType` leverer en anden mere "gammeldags" måde at få datatypen af en DOM-node på. -It has a numeric value: -- `elem.nodeType == 1` for element nodes, -- `elem.nodeType == 3` for text nodes, -- `elem.nodeType == 9` for the document object, -- there are few other values in [the specification](https://dom.spec.whatwg.org/#node). +Den har en numerisk værdi: +- `elem.nodeType == 1` for elementnoder, +- `elem.nodeType == 3` for tekstnoder, +- `elem.nodeType == 9` for dokumentobjektet, +- der er et par andre værdier i [specifikationen](https://dom.spec.whatwg.org/#node). -For instance: +For eksempel: ```html run ``` -In modern scripts, we can use `instanceof` and other class-based tests to see the node type, but sometimes `nodeType` may be simpler. We can only read `nodeType`, not change it. +I moderne scripts kan vi bruge `instanceof` og andre class-baserede tests til at se nodetype, men nogle gange kan `nodeType` være enklere. Vi kan kun læse `nodeType`, ikke ændre det. -## Tag: nodeName and tagName +## Tag: nodeName og tagName -Given a DOM node, we can read its tag name from `nodeName` or `tagName` properties: +Med en givet DOM-node kan vi læse dets tag-navn fra `nodeName` eller `tagName` egenskaber: -For instance: +For eksempel: ```js run alert( document.body.nodeName ); // BODY alert( document.body.tagName ); // BODY ``` -Is there any difference between `tagName` and `nodeName`? +Er der nogen forskel mellem `tagName` og `nodeName`? -Sure, the difference is reflected in their names, but is indeed a bit subtle. +Det er der, men forskellen er reflekteret i deres navne, og foskellen er subtil. -- The `tagName` property exists only for `Element` nodes. -- The `nodeName` is defined for any `Node`: - - for elements it means the same as `tagName`. - - for other node types (text, comment, etc.) it has a string with the node type. +- Egenskaben `tagName` eksisterer kun for `Element` noder. +- Egenskaben `nodeName` er defineret for alle noder via nedarvning fra `Node`: + - for elementer betyder det det samme som `tagName`. + - for andre typer af noder (text, comment, etc.) har det en streng med nodens type. -In other words, `tagName` is only supported by element nodes (as it originates from `Element` class), while `nodeName` can say something about other node types. +Med andre ord, `tagName` er kun understøttet af elementnoder (da det stammer fra `Element`-klassen), mens `nodeName` kan sige noget om andre nodetyper. -For instance, let's compare `tagName` and `nodeName` for the `document` and a comment node: +For eksempel, lad os sammenligne `tagName` og `nodeName` for `document` og en kommentarnode: ```html run @@ -198,220 +198,220 @@ For instance, let's compare `tagName` and `nodeName` for the `document` and a co ``` -If we only deal with elements, then we can use both `tagName` and `nodeName` - there's no difference. +Hvis vi kun arbejder med elementer, kan vi både bruge `tagName` og `nodeName` - der er ingen forskel. -```smart header="The tag name is always uppercase except in XML mode" -The browser has two modes of processing documents: HTML and XML. Usually the HTML-mode is used for webpages. XML-mode is enabled when the browser receives an XML-document with the header: `Content-Type: application/xml+xhtml`. +```smart header="Navnet på tag er altid i store bogstaver på nær i XML tilstand" +Browseren har to tilstande den kan processere dokumenter: HTML og XML. Normalt bruges HTML tilstanden for websider. XML tilstanden aktiveres når browseren modtager et XML dokument med headeren: `Content-Type: application/xml+xhtml`. -In HTML mode `tagName/nodeName` is always uppercased: it's `BODY` either for `` or ``. +I HTML tilstand skrives `tagName/nodeName` altid med store bogstaver: det er `BODY` enten for `` eller ``. -In XML mode the case is kept "as is". Nowadays XML mode is rarely used. +I XML tilstand bevares små bogstaver "som de er". I dag er XML tilstanden sjældent brugt. ``` -## innerHTML: the contents +## innerHTML: indholdet -The [innerHTML](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) property allows to get the HTML inside the element as a string. +Egenskaben [innerHTML](https://w3c.github.io/DOM-Parsing/#the-innerhtml-mixin) tillader at trække HTML ud af et andet element som en streng. -We can also modify it. So it's one of the most powerful ways to change the page. +Vi kan også ændre det, så det er en af de mest kraftige måder at ændre siden på. -The example shows the contents of `document.body` and then replaces it completely: +Eksemplet viser indholdet af `document.body` og erstatter det derefter helt: ```html run -

    A paragraph

    -
    A div
    +

    Et afsnit

    +
    En div
    ``` -We can try to insert invalid HTML, the browser will fix our errors: +Vi kan prøve at indsætte ugyldigt HTML, så vil browseren fikse vores fejl og indsætte det korrekt i DOM'en. For eksempel, hvis vi glemmer at lukke en tag, så vil browseren gøre det for os: ```html run ``` -```smart header="Scripts don't execute" -If `innerHTML` inserts a ` ``` -**Beware: unlike `innerHTML`, writing to `outerHTML` does not change the element. Instead, it replaces it in the DOM.** +**Pas på: Modsat `innerHTML`, ændrer `outerHTML` ikke elementet. I stedet erstatter det det i DOM'en.** -Yeah, sounds strange, and strange it is, that's why we make a separate note about it here. Take a look. +Ja, det lyder underligt, og det er det også. Derfor lige denne seperate note. Lad os se på det. -Consider the example: +Forestil dig dette eksempel: ```html run -
    Hello, world!
    +
    Hej, verden!
    ``` -Looks really odd, right? +Det er underligt, ikke? -In the line `(*)` we replaced `div` with `

    A new element

    `. In the outer document (the DOM) we can see the new content instead of the `
    `. But, as we can see in line `(**)`, the value of the old `div` variable hasn't changed! +I linjen med `(*)` erstattede vi `div` med `

    Et nyt element

    `. I det ydre dokument (DOM'en) kan vi se det nye indhold i stedet for den gamle `
    `. Men, som vi kan se i linjen med `(**)` har værdien af den gamle `div` ikke ændret sig! +Tildelingen af `outerHTML` ændrer ikke selve DOM-elementet (det objekt, som variablen 'div' i dette tilfælde refererer til), men fjerner det fra DOM'en og indsætter det nye HTML i dets sted. -The `outerHTML` assignment does not modify the DOM element (the object referenced by, in this case, the variable 'div'), but removes it from the DOM and inserts the new HTML in its place. +Så, hvad der sker `div.outerHTML=...` er: +- `div` blev fjernet fra dokumentet. +- Et nyt stykke HTML `

    Et nyt element

    ` blev indsat i dets sted. +- `div` har stadig den gamle værdi. Det nye HTML blev ikke gemt i nogen variabel. -So what happened in `div.outerHTML=...` is: -- `div` was removed from the document. -- Another piece of HTML `

    A new element

    ` was inserted in its place. -- `div` still has its old value. The new HTML wasn't saved to any variable. +Det er så nemt at lave en fejl her: Ændr `div.outerHTML` og arbejd bagefter videre med `div` som om det indeholder det nye indhold. Men det gør det ikke. Det vil være korrekt for `innerHTML`, men ikke for `outerHTML`. -It's so easy to make an error here: modify `div.outerHTML` and then continue to work with `div` as if it had the new content in it. But it doesn't. Such thing is correct for `innerHTML`, but not for `outerHTML`. +Vi kan skrive til `elem.outerHTML`, men skal huske, at det ikke ændrer det element, vi skriver til ('elem'). Det indsætter det nye HTML i stedet. Vi kan få referencer til de nye elementer ved at forespørge på DOM'en. -We can write to `elem.outerHTML`, but should keep in mind that it doesn't change the element we're writing to ('elem'). It puts the new HTML in its place instead. We can get references to the new elements by querying the DOM. +## nodeValue/data: tekst noders indhold -## nodeValue/data: text node content +Egenskaben `innerHTML` er kun gyldig for element noder. -The `innerHTML` property is only valid for element nodes. +Andre node typer, såsom tekst noder, har deres modstykke: `nodeValue` og `data` egenskaber. Disse to er praktisk taget de næsten de samme, der er kun små specifikationsforskelle. Så vi vil bruge `data`, fordi det er kortere. -Other node types, such as text nodes, have their counterpart: `nodeValue` and `data` properties. These two are almost the same for practical use, there are only minor specification differences. So we'll use `data`, because it's shorter. - -An example of reading the content of a text node and a comment: +Her er et eksempel på læsning af indholdet fra en tekstnode og en kommentarnode: ```html run height="50" - Hello - + Hej + ``` -For text nodes we can imagine a reason to read or modify them, but why comments? +Vi kan forestille os grunde til at læse eller ændre dem, men hvorfor kommentarer? -Sometimes developers embed information or template instructions into HTML in them, like this: +Nogle gange indlejrer udviklere information eller template instruktioner til HTML brug i dem, i stil med: ```html -
    Welcome, Admin!
    +
    Velkommen, administrator!
    ``` -...Then JavaScript can read it from `data` property and process embedded instructions. +... så kan JavaScript læse det fra `data` egenskaben og behandle de indlejrede instruktioner. -## textContent: pure text +## textContent: ren tekst -The `textContent` provides access to the *text* inside the element: only text, minus all ``. +Egenskaben `textContent` leverer adgang til selve *teksten* inde i elementet: kun tekst - minus alle ``. -For instance: +For eksempel: ```html run
    -

    Headline!

    -

    Martians attack people!

    +

    Overskrift!

    +

    Marsboere angriber folk!

    ``` -As we can see, only text is returned, as if all `` were cut out, but the text in them remained. +Som vi kan se returneres kun teksten. Det er som om alle `` var klippet ud, men teksten i dem har fået lov til at blive. -In practice, reading such text is rarely needed. +I praksis er læsning af teksten på denne måde ikke så tit brugt. -**Writing to `textContent` is much more useful, because it allows to write text the "safe way".** +**Skrivning til `textContent` er meget mere nyttig, fordi det tillader os at skrive tekst på den "sikre måde".** -Let's say we have an arbitrary string, for instance entered by a user, and want to show it. +Lad os sige, vi har en vilkårlig streng, for eksempel indtastet af en bruger, og vi vil vise den på siden. -- With `innerHTML` we'll have it inserted "as HTML", with all HTML tags. -- With `textContent` we'll have it inserted "as text", all symbols are treated literally. +- Med `innerHTML` bliver det sat ind "som HTML", med alle HTML tags. +- Med `textContent` bliver det sat ind "som tekst", og alle symboler behandles bogstaveligt. Compare the two: @@ -420,7 +420,7 @@ Compare the two:
    ``` -Technically, `hidden` works the same as `style="display:none"`. But it's shorter to write. +Teksnisk set virker `hidden` på samme måde som `style="display:none"`. men er kortere at skrive. -Here's a blinking element: +Her er et blinkende element: ```html run height=50 -
    A blinking element
    +
    Et blinkende element
    ``` -## More properties +## Flere egenskaber -DOM elements also have additional properties, in particular those that depend on the class: +DOM elementer har flere egenskaber. Særligt findes egenskaber der afhænger af klassen. For eksempel: -- `value` -- the value for ``, `