Les 2 Elementen uit je webpagina halen (DOM)

DOM

Als je een HTML bestand opent in je browser, dan wordt er een boom in het geheugen gemaakt. Zie hieronder wat er bijvoorbeeld in de boom kan zittten.

Het <html>-element is bijvoorbeeld de parent (ouder) van de elementen <head> en <body>. En het element <title> is bijvoorbeeld de child (kind) van <head>. De elementen <h1> en <p> zijn siblings (broers) van elkaar.

Ieder element heeft allemaal eigenschappen (attributes). Zo heeft een <title>-element een inhoud (de titel) en een <a>-element als eigenschap href oftewel de plek waar je naar verwijst.

JavaScript en DOM

Met JavaScript kun je alles in de DOM inzien en veranderen. Je kunt een element opvragen op basis van de id van het element. Dit was handig bij css maar is ook handig bij JavaScript. Kijk eens naar het volgende voorbeeld:

See the Pen wYWRYX by Jurjenh (@jurjenh) on CodePen.

In de html-code zie je dat de inhoud van het kopje is: Dit is kop 1. In JavaScript (JS) benaderen we de dom met:

let kopje = document.getElementById("kop1");

Dus we zoeken het element met id="kop1".

Je krijgt nu een element terug uit je website. Dat element kopje heeft dus weer allemaal eigenschappen die we benaderen met de .-notatie. Hiermee veranderen we de tekst (kopje.innerHTML) in iets anders. Ook de title veranderen we. Deze kun je zien als je met je muis boven het element blijft staan.

Note: Opdracht

Maak nu in Repl.it: 'Verander je website'

innerHTMl en outerHTML

Elk element heeft een innerHTML en een outerHTML eigenschap.

innerHTML is een string waarin de inhoud tussen de html-tags staat. In het geval van het element kopje hierboven is dat dus Dit is kop 1.

outerHTML is een string waarin het gehele html-element zit. Dus inclusief de html-tags en alle eigenschappen van de tags. Zie ook het plaatje hiernaast.

Note: Opdracht

Maak nu in Repl.it: 'Maak het kopje kleiner'

Plek van de <script>-tag

LET OP! Je HTML bestand wordt van boven naar beneden gelezen. Op het moment dat er een script gezien wordt, wordt dat gedownload en uitgevoerd. Dit betekent dat elementen die je daarna aanmaakt niet bekend zijn.

Voor de zekerheid kun je het beste je script in de regel voor </body> zetten zoals hiernaast.

Je kunt ook je script een eigenschap 'defer' meegeven. Dan wordt het script uitgevoerd nadat de hele pagina geladen is: <script src="mijnScript.js" defer></script>

Voorbeeld:

<html>
  <head>
    <title>hello</title>
  </head>
  <body>
    <h1 id="kopje1">Kop</h1>
    <p id="paragraaf1"></p>
    <!-- script laden net voordat de pagina af is -->
    <script src="mijnScript.js"></script>
  </body>
</html>

Note: Opdrachten

Maak nu in Repl:

  • Oefenopdracht Les 2 - Maak het kopje kleiner
  • Inleveropdracht Les 2 - Verander je website

results matching ""

    No results matching ""