Hur jag byggde ”Smart Meal Planner” i Vanilla JavaScript – Steg 2

Nu har jag övat på att hitta olika element och noder i min index.html-fil med hjälp av s k DOM-manipulation. DOM är en förkortning av Document Object Model. När en webbsida laddas skapar webbläsaren denna DOM och den består av ett träd av objekt. Ett sådant objekt kan t ex vara en html-tag och det är dem man vill hitta med hjälp av metoder såsom ”getElementsById” eller ”getElementsByTagName”. För att få en mer lättläst kod brukar man spara elementen och noderna i egna variabler.

Så här ser min kod ut i detta stadie: Github

Det är inte så mycket som händer på sidan visuellt förutom att jag la till en text med hjälp av JavaScript och ”innerHTML” (en s k property). Annars ser man en mängd utskrifter som jag gjorde med ”console.log”-metoden för att testa diverse properties som t ex parentElement, parentNode, childNodes och children.

Nu är jag redo att gå vidare och använda mig av denna kunskap för att skapa funktionalitet med hjälp av ”events”.

Bra resurs: ”Traversing an HTML table with JavaScript and DOM Interfaces”

Stäng meny