DOM #

Document Object Model (DOM) är ett objekt som representerar en webbsida. DOM Är en trädstruktur av noder som representerar en webbsida.

DOM är det interface som du arbetar mot när du skriver javascript för att ändra struktur, stil och innehåll på en webbsida. En stor del av javascript-kodande handlar om att manipulera DOM.

• HTML är en textstruktur, DOM är ett objekt som representerar den.
• När du väljer element med javascript, använder du CSS-selektorer.

Att introducera, förklara och lära sig DOM och hur javascript arbetar med det är lite för ambitiöst för en sida. Så detta är bara en introduktion. Läs gärna mer på MDN.

DOM låter oss välja element direkt från en sida. Element väljs med CSS-seleketorer (element, class, id).

Öppna konsollen (CTRL+SHIFT+i) i webbläsaren och koda på den här sidan.

let header = document.querySelector('.part__header-title');
header.childNodes; // listar alla childnodes för header
header.childNodes[0]; // första childnode
header.childNodes[0].textContent = 'Jag lär mig om DOM';

Det går även att manipulera klasser och attribut för element.

let instruktioner = document.querySelector('#instruktioner');
instruktioner.classList; // skriv ut elementets klasser
instruktioner.classList.add('lead'); // lägg till klass
instruktioner.classList.remove('lead'); // ta bort klass
instruktioner.classList.add('bg-theme', 'fg-theme'); // lägg till flera klasser