JavaScript

Dokumentsobjektmodellen

 

DOM:en

eller kort sagt

DOM:en

Document Object Model

Hur man använder Javascript för att modifiera en webbsida

Du använder dig av DOM:en vid all form av interaktivitet med sidans innehåll (HTML) m.h.a JavaScript, exempelvis:

 

  • Slideshow
  • Modaler
  • Drop-down menyer
  • Formulär validering
  • Web applikationer
  • e.t.c...

 

Dokumentobjektsmodellen (DOM:en)

<!doctype html>
<html>
  <head>
    <title>My home page</title>
  </head>
  <body>
    <h1>My home page</h1>
    <p>Hello, I am Marijn and this is my home page.</p>
    <p>I also wrote a book! Read it
      <a href="http://eloquentjavascript.net">here</a>.</p>
  </body>
</html>

Ett HTML dokument

http://eloquentjavascript.net/14_dom.html

En webbläsare strukturerar html-dokumentet och gör en representation av det i form av en trädstruktur

Javascript tolkar varje del i "trädet" som ett objekt.  Med olika metoder kan man söka efter ett eller flera objekt för att manipulera eller ändra innehåll

Varför heter det

Dokumentobjektsmodellen?

document

Jo...för att varje webbsida ligger i document-objektet

Den innehåller alltså hela webbsidan, den är roten i trädet

Prova: Öppna consolen och skriv document + enter. Vad händer?

DOM

Selektorer

Metoder att välja element i html-dokument m.h.a Javascript

Metoder

  • document.getElementById()
  • document.getElementsByClassName()
  • document.getElementsByTagName()
  • document.querySelector()
  • document.querySelectorAll()
  • document.getElementById()
  • document.querySelector()
  • document.querySelectorAll()
  • document.getElementsByClassName()
  • document.getElementsByTagName()

Det finns olika metoder att hitta element med Javascript.

Dessa brukar vara mest användbara

Men det finns även dessa...

getElementById()

Tar en sträng som argument och returnerar det matchande element med det angivna id:et

//Hittar referensen med id="namn"
const element = document.getElementById("namn");
<h1>Om mig</h1>

<ul>
    <li>Namn: <span id="namn"></span>
    <li>Ort: <span id="ort"></span>
    <li>Intressen: <span id="intressen"></span>
</ul>

HTML

JavaScript

querySelector()

//Hittar referensen till elementet h1 
const element = document.querySelector("h1");

<h1>Om mig</h1>

<ul>
    <li>Namn: <span id="namn"></span>
    <li>Ort: <span id="ort"></span>
    <li>Intressen: <span id="intressen"></span>
</ul>

HTML

JavaScript

Returnerar det första elementet som matchar argumentet - samma som CSS selektorer fungerar

querySelectorAll()

//Returnerar alla <li> 
const lis = document.querySelectorAll("li");

console.log(li[0]); //Skriver ut första li elementet 

<h1>Om mig</h1>

<ul>
    <li>Namn: <span id="namn"></span>
    <li>Ort: <span id="ort"></span>
    <li>Intressen: <span id="intressen"></span>
</ul>

HTML

JavaScript

Returnerar alla element som en lista (s.k Nodelist) som matchar CSS-selektorn. Varje element kan nås utifrån vald arrayposition.

DOM

Manipulation

  • Ändra innehåll (text/element)
  • Ändra style
  • Ändra attribut (src, href, etc)
  • Lägga till eller ta bort class-attribut
  • Lägga till element
  • Lägga till HTML med template string 

textContent

Kan hämta eller ändra texten inuti ett html-element

//Hittar <p> 
const element = document.querySelector("p");

//Ändra texten som ligger i elementet
element.textContent = "Det här är paragrafens nya text";
<h1>Titel</h1>

<p>Det här en text som kan ändras med Javascript DOM.</p>

HTML

JavaScript

 innerHTML

Samma som textContent men här kan man även inkludera html-element

//Hittar <p> 
const element = document.querySelector("p");

//Ändra texten som ligger i elementet
element.innerHTML = "<strong> Ändra innehåll här </strong>";
<h1>Titel</h1>

<p>Ändra innehåll här</p>

HTML

JavaScript

Ändra style

Ett sätt att ändra style på ett eller flera element

//Hitta element
const element = document.querySelector("p");

//Manipulera elementets style
element.style.color = "blue";
element.style.border = "10px solid red";
element.style.fontSize = "70px";
element.style.backgroundColor = "yellow";
element.style.marginTop = "200px";

Det är dock inte rekommenderat att förändra style så här på ett omfattande sätt.

Bättre att välja metoden med lägga till/ta bort classer

<h1>Titel</h1>

<p>Det här en text som kan stylas med Javascript DOM.</p>

HTML

JavaScript

Lägga till/ta bort en class

Istället för att ändra style med Javascript kan vi använda oss av toggla ett class attribut på ett element.

Detta sätt upprätthåller regeln om separation av logik, d.v.s html, css och js åtskilda :-)

/*Definiera en class i CSS*/
.some-class {
  color: blue;
  border: 10px solid red;
}
//Hitta elementet <p>
const element = document.querySelector("p");

//Lägga till classen .some-class i <p>
element.classList.add("some-class");

//Ta bort classen .some-class i <p>
element.classList.remove("some-class");

//Eller toggla en class
element.classList.toggle("some-class");

JavaScript

CSS

<p>Det här en text som kan stylas med Javascript DOM.</p>

HTML

Ändra attribut

getAttribute() och setAttribute() hämtar eller ändrar ett elements attribut.

<a href="www.google.com">Jag är en länk</a>
<img src="logo.png">
//Hämtar element där attributet finns
const element = document.querySelector("a");
const href = element.getAttribute("href"); 


//Ändra länkadressen, d.v.s attributet href
element.setAttribute("href","http://www.dogs.com"); 


//Att ändra bildkälla, d.v.s src i img
const img = document.querySelector("img");
img.setAttribute("src", "bird.png");

HTML

JavaScript

Ändra attribut

Eller enbart detta sätt fungerar...

<a href="www.google.com">Jag är en länk</a>
<img src="logo.png">
//Hämtar element där attributet finns
const element = document.querySelector("a");
const href = element.getAttribute("href"); 


//Ändra länkadressen, d.v.s attributet href
element.href = "http://www.dogs.com"; 


//Att ändra bildkälla, d.v.s src i img
const img = document.querySelector("img");
img.src = bird.png";

HTML

JavaScript

Lägga till element

createElement() skapar ett nytt element. 

appenChild() lägger elementet sist i listan av barnelemen för den specificierade föräldraelementet.

<body>
  <div class="wrapper">
    <p class="special">
       I am a paragraph
    </p>
    <img src="https://picsum.photos/500" 
         alt="Nice photo">
  </div>
</body>
const myParagraph = document.createElement('p');
myParagraph.textContent = 'I am a paragraph';
myParagraph.classList.add('special');

const myImage = document.createElement('img');
myImage.src = 'https://picsum.photos/500';
myImage.alt = 'Nice photo';

const myDiv = document.createElement('div');
myDiv.classList.add('wrapper');
console.log(myDiv);

myDiv.appendChild(myParagraph);
myDiv.appendChild(myImage);

document.body.appendChild(myDiv);

Ger följande HTML

JavaScript

Lägga till element med template strings

Med en template string (d.v.s backticks ´´) kan man lägga in HTML som en sträng

const item = document.querySelector('.item');

const width = 500;
const src = `https://picsum.photos/${width}`;
const desc = `Cute Pup`;
const myHTML = `
  <div class="wrapper">
    <h2>Cute ${desc}</h2>
    <img src="${src}" alt="${desc}"/>
  </div>
`;

//Lägger in HTML som en sträng 
item.innerHTML = myHTML;

Lägga in HTML som sträng

Mer flexibla metoder var html-kod ska läggas in i förhållande till elementet

<!-- beforebegin -->
<p>
  <!-- afterbegin -->
  foo
  <!-- beforeend -->
</p>
<!-- afterend -->

Position i HTML

  • 'beforebegin': Innan elementet
  • 'afterbegin': Innanför elementet före första barnet
  • 'beforeend': Innanför elementet efter sista barnet
  • 'afterend': Efter elementet

targetElement.insertAdjacentText(position, element)

targetElement.insertAdjacentElement(position, element)

targetElement.insertAdjacentHTML(position, text)

DOM:en

Document Object Model

Hur man använder Javascript för att modifiera en webbsida

Så....

HTML dokument

Document

document = {                                }

Object

Gör HTML-dokumentet till ett Javascript-objekt!

Model

En representation av något...

DOM:en 😎

JavaScript Dokumentobjektsmodellen

By sandra-larsson

JavaScript Dokumentobjektsmodellen

  • 37

More from sandra-larsson