Nettleseren leser -taggen og lager rotnoden i DOM-treet.
Nettleseren finner og legger den til som barn av .
blir lagt inn i <head> med tekstinnholdet "Hilsen".</li>
<li>Nettleseren finner <body> dette er det synlige innhold.</li>
<li><h1> med teksten "Si hei!" blir lagt til i <body>.</li>
<li><input>-feltet får id "navn", JavaScript kan da finne det med getElementById.</li>
<li><button> med id "hils-btn" og teksten "Hils" blir lagt til.</li>
<li><p> med id "melding" er tom foreløpig, klar for dynamisk innhold.</li>
<li>Hele filen er lest. DOM-treet er komplett og klart til bruk!</li>
</ol>
<h2 id="stepper-parsing-clickable">stepper-parsing-clickable</h2>
<ol>
<li>HTML-filen er klar til å bli lest av nettleseren.</li>
<li>Nettleseren leser <html>-taggen og lager rotnoden i DOM-treet.</li>
<li>Nettleseren finner <head> og legger den som barn av <html>.</li>
<li><title> blir lagt inne i <head> – tekstinnholdet "Hilsen" lagres.</li>
<li>Nettleseren finner <body> – her kommer alt synlig innhold.</li>
<li><h1> med teksten "Si hei!" blir lagt til i <body>.</li>
<li><input>-feltet får id "navn" – JavaScript kan finne det med getElementById.</li>
<li><button> med id "hils-btn" og teksten "Hils" blir lagt til.</li>
<li><p> med id "melding" – tom foreløpig, klar for dynamisk innhold.</li>
<li>Hele filen er lest. DOM-treet er komplett og klart til bruk!</li>
</ol>
<h2 id="stepper-search">stepper-search</h2>
<ol>
<li>HTML-filen er ferdig lest. DOM-treet er bygd i minnet.</li>
<li>Nettleseren finner <script>-taggen og laster JavaScript-filen.</li>
<li>JavaScript kjører linje 1: getElementById søker etter id "melding".</li>
<li>h1 har ingen id-egenskap. Gå videre.</li>
<li>input har id "navn" – stemmer ikke med "melding". Gå videre.</li>
<li>button har id "hils-btn" – stemmer ikke. Gå videre.</li>
<li>p har id "melding" – treff! getElementById returnerer dette objektet.</li>
<li>Variabelen message peker nå på p-objektet i DOM-treet.</li>
<li>Koden er ferdig. message er en lapp som peker på objektet – ikke en kopi.</li>
</ol>
<h2 id="stepper-textcontent">stepper-textcontent</h2>
<ol>
<li>Treet er bygd og variabelen message peker på p-objektet.</li>
<li>Linje 1: getElementById søker etter id "melding" i DOM-treet.</li>
<li>Variabelen message peker nå på p-objektet.</li>
<li>Linje 2: textContent endres til "Hei, Ola!" – direkte på objektet i minnet.</li>
<li>Men se på HTML-filen – den er helt uendret. Endringen skjedde bare i treet.</li>
<li>JavaScript endrer treet i minnet, ikke filen din. Filen ble lest én gang.</li>
<li>Koden er ferdig. Treet i minnet er oppdatert – filen er den samme.</li>
</ol>
<h2 id="stepper-create">stepper-create</h2>
<ol>
<li>Treet er bygd. Vi har en to-do-liste klar i DOM-en.</li>
<li>Linje 1: getElementById finner ul-elementet med id «task-list».</li>
<li>Linje 2: createElement lager et nytt li-objekt – men det er ikke i treet ennå.</li>
<li>Linje 3: Vi setter textContent på det nye elementet. Det er fortsatt frakoblet.</li>
<li>Linje 4: Vi setter className – elementet er fortsatt bare i minnet.</li>
<li>Linje 5: Enda et nytt element – en button. Også frakoblet fra DOM-treet.</li>
<li>Begge elementene finnes i minnet, men de er ikke synlige på siden ennå.</li>
<li>createElement lager objekter i minnet. De må kobles til treet for å bli synlige.</li>
</ol>
<h2 id="stepper-attach">stepper-attach</h2>
<ol>
<li>Tre frakoblede objekter med lapper. Nå skal vi koble dem sammen.</li>
<li>appendChild gjør span til et barn av li. De er koblet sammen – men fortsatt ikke i DOM-en.</li>
<li>Sletteknappen kobles også til li. Et lite tre er bygd – men fortsatt frakoblet.</li>
<li>appendChild kobler det nye treet til ul-elementet i DOM-en. Nå er det synlig på skjermen.</li>
</ol>
<h2 id="stepper-devtools">stepper-devtools</h2>
<ol>
<li>Treet du har sett i animasjonene finnes på ekte – du kan se det i nettleseren.</li>
<li>Samme element – to visninger. Treet til venstre er det vi har brukt. DevTools til høyre er det du ser i nettleseren.</li>
<li>Legg merke til innholdet – «Hei, Ola!» – som JavaScript la til i forrige steg.</li>
<li>Elements-panelet viser DOM-en slik den er nå – med alle JavaScript-endringer.</li>
<li>«Vis kildekode» viser den originale filen – uten JavaScript-endringer. <p> er fortsatt tom!</li>
<li>Neste gang du lurer på hva koden gjør – åpne Elements-panelet. Der ser du DOM-en, ikke filen.</li>
</ol>
</article>
</div>
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
</div>
</main>
<footer class="md-footer">
<div class="md-footer-meta md-typeset">
<div class="md-footer-meta__inner md-grid">
<div class="md-copyright">
Made with
<a href="https://zensical.org/" target="_blank" rel="noopener">
Zensical
</a>
</div>
</div>
</div>
</footer>
</div>
<div class="md-dialog" data-md-component="dialog">
<div class="md-dialog__inner md-typeset"></div>
</div>
<script id="__config" type="application/json">{"annotate":null,"base":"../../..","features":["navigation.instant","navigation.tabs","navigation.tabs.sticky","navigation.indexes","navigation.path","content.code.copy","content.code.select"],"search":"../../../assets/javascripts/workers/search.7d14d953.min.js","tags":null,"translations":{"clipboard.copied":"Kopiert til utklippstavlen","clipboard.copy":"Kopier til utklippstavlen","search.result.more.one":"1 til på denne siden","search.result.more.other":"# flere på denne siden","search.result.none":"Ingen treff","search.result.one":"1 treff","search.result.other":"# treff","search.result.placeholder":"Skriv søkeord","search.result.term.missing":"Mangler","select.version":"Velg versjon"},"version":null}</script>
<script src="../../../assets/javascripts/bundle.e886cdf1.min.js"></script>
<script src="../../../javascripts/iframe-fullscreen.js"></script>
</body>
</html>