Document Object Model — DOM
För att JavaScript ska kunna komma åt saker i HTML dokumentet så behöver dokumentet ha någon form utav struktur. Ett sätt att ordna alla element är med DOM, eller Document Object Model. Då struktureras sidan på samma sätt som du har skrivit den.
Du kan se det lite som en klädkammare.
<html>-taggarna skapar själva rummet med väggarna.
Sen är <head>- och
<body>-taggarna skåp. Inne i skåpen kan du ha olika
sorters block som <div>,
<article> eller <section>, dem
kan du se som lådor. I dem lådorna ligger sen våra andra element.
Komma åt ett element
När du vill komma åt ett specifikt HTML-element på din sida är det lättast att ge det ett id och komma åt det så här:
let el;
el = document.getElementById("id");
// Vi ska tolka det här som:
// I dokumentet ->
//Hitta något som heter "id" ->
//Lagra det i variabeln elNär du har kommit åt ett element så kan du göra vad du vill med det.
innerHTML
För att ändra på det som finns mellan öppningstaggen och
stängningstaggen (typ mellan <h2> och
</h2>) kan du nu skriva så här:
<script>
let el;
el = document.getElementById("id");
el.innerHTML = "Rolig text";
</script>Om du vill spara innehållet i elementet kan du skriva så här:
<script>
let el;
el = document.getElementById("id");
let innehåll;
innehåll = el.innerHTML;
</script>
Om det är så att du använder dig utav <input>
för att ta emot information så behöver du skriva
value istället för innerHTML för att få ut
texten. För som du kanske minns är <input/> ett
tomt element. Så den har ingen inre HTML.
exempel
Rubriken
<h5 id="exr1">Rubriken</h5>
<input id="exi1" />
<button id="exb1">Klicka här</button>
<script>
function byt(){
let rub, inp;
rub = document.getElementById("exr1");
inp = document.getElementById("exi1");
let text;
text = inp.value;
rub.innerHTML = text;
}
let but1;
but1 = document.getElementById("exb1");
but1.addEventListener('click', byt, false);
</script>CSS
Du kan också komma åt och ändra på enskilda elements CSS-regler:
let el;
el = document.getElementById("id");
el.style['color'] = "yellow";
el.style['backgroundColor'] = "black";Exempel
Rubriken
<h5 id="exr2">Rubriken</h5>
<input id="exi2"/> <br/>
<input id="exii2"/> <br/>
<button id="exb2">Klicka här</button>
<script>
function färger(){
let rub, inp1, inp2;
rub = document.getElementById("exr2");
inp1 = document.getElementById("exi2");
inp2 = document.getElementById("exii2");
rub.style['color'] = inp1.value;
rub.style['backgroundColor'] = inp2.value;
console.log(inp1.value);
}
let but;
but.getElementById("exb2");
but.addEventListener('click',färger,false);
</script>