Webbutveckling02 [weuweb02]

Moment03 - Document Object Model (DOM)

Introduktion

Inom ramen för kursen så ligger vikt på att du skall kunna separera olika sorters logik såsom html och css. Du skall också kunna hantera DOM-script. Vi skall nu träna på detta genom att du skall bygga en stilmall till en given sida.

DOM-struktur

Document Object Model, förkortat DOM, är ett plattforms- och språkoberoende gränssnitt för åtkomst och dynamiskt uppdatering av ett dokuments innehåll, struktur och formatering.
(Wikipedia, 2015-02-03, http://sv.wikipedia.org/wiki/Document_Object_Model) DOM-model enligt wikipedia.
http://upload.wikimedia.org/wikipedia/commons/5/5a/DOM-model.svg

Vi kommer senare i kursen ha nytta av DOM när vi senare skall jobba med JavaScript och olika scriptpaket. Vi använder också DOM för att med css kunna formatera specifika objekt i en sida. Vi kollar genom att rita upp denna sidas DOM-träd.
DOM-modell för denna sidan.

De gula <section>-elementen finns inte i dokumentet men vi behöver använda dem för att förstå upplägget med DOM, vi antar att de finns i vår sida.

Nu ser vi att <section>-taggen är "child" i olika parent-selektorer. Vi kan nu välja att formattera dessa på olika sätt.

Flera selektorer med samma inställningar

section, p, .enKlass, #ettId { ... }
Alla dessa selektorer kommer nu att formateras på samma sätt oavsett var i DOM-strukturen de befinner sig.

En selektor som är barn inuti en annan selektor, oavsett nivå

article header { ... }
aside section { ... }
Här styr man specifika selektorer som kan finnas på olika "barnnivåer" inom en viss selektor. Tänk att <nav> också har en selektor som barn, då kommer båda <section>-elementen inom <aside class="sidebar1"> att påverkas.

En selektor som är direkt barn till en annan selektor, dvs endast nivån under

article > header { ... }
div > h2 { ... }
Här är det viktigt att elementet/selektorn är direkt underställd ett annat element/selektor, alltså en ren förälder-barn-relation.

Pseudoklasser

a:hover { ... }
tr:nth-child(even) { ... }
article > div:first-of-type { ... }
En pseudo-class används för att definiera ett speciellt tillstånd för ett element tex när musen förs över ett element samt att besökta och ej besökta länkar visas på olika sätt.

Pseudoelement

div > h1::first-letter { ... font-size:2em; ... }
Ett pseudo-element används för att styla en specifik del av ett element. Det kan tex användas för att formatera den första bokstaven av ett element.

Klasser, id, och "rena taggar"

Om vi vill förlita oss på bara DOM så skapar du så "rena" taggar som möjligt utan att skapa en mängd klasser och id:n. Mitt exempel nedan bygger bara på rena taggar. Senare i kursen kommer vi kolla på den raka motsatsen, där allt bygger på generella taggar med flera olika klasser som styr designen. När man bygger större webbplatser som har en mer avancerad design så är det svårt att helt klara sig ifrån klasser och id:n och som alltid annars så finns det flera olika sätt att lösa ett problem på.

Ju fler sätt du lär dig desto enklare är det att välja rätt sätt vid rätt tillfälle.

Resurser

Länkar
pseudo class selectors
an ultimate guide to css pseudo classes and pseudo elements

thenewboston
Introduction to pseudo-classes
Negation pseudo
Sweet New CSS3 Selectors

Kodexempel

Här finns ett kodexempel som du kan spara på din egen dator och genom att ändra i css-filen få en känsla för vad som händer om du ändrar denna. Kolla främst på de taggar som finns flera gånger och som påverkas olika beroende på vilken föräldertagg den har.

dom.html

<!DOCTYPE html>
<html lang="sv">
  <head>
    <meta charset="UTF-8">
    <title>Domexempel</title>
    <link rel="stylesheet" href="m02_dom.css">
  </head>
  <body>
    <article>
      <header>
        Header i article
      </header>
      <h1>h1 i article</h1>
      <div>
        <h1>h1 i div</h1>
      </div>
      <section>
        <header>
          Header i section
        </header>
        <h1>h1 i section</h1>
        <div>
          <h1>h1 i div</h1>
        </div>
        <div>
          <h1>h1 i div</h1>
          <div>
            <h1>h1 i div-div</h1>
          </div>
        </div>
      </section>
      <section>
        <h1>h1 i section</h1>
        <div>
        </div>
      </section>
      <section>
        <h1>h1 i section</h1>
        <div>div!
        </div>
      </section>
      <section>
        <h1>h1 i section</h1>
        <section>
          <h1>h1 i section-section</h1>
          <div>Div</div>
        </section>
      </section>
    </article>
  </body>
</html>

dom.css

@charset "UTF-8";

article {
    background-color: white;
    border: 1px solid black;
    padding:10px;
    float:left;
}

h1 {
  text-align: center;
}

section {
    width:120px;
    border:2px solid red;
    float:left;
    padding:10px;
    margin-left: 10px;
}

section > section{
  padding: 0px;
  margin: 0px;
}

article div {
    background-color: #CCC;
}

body, section>div {
    background-color: #DDD;
}

article header {
    text-align: left;
    font-weight: bold;
}

article > header {
    text-align: center;
    color:red;
    font-size: 30px;
}

section:nth-child(even) {
    border-color: lime;
}

article div:first-of-type {
    margin-bottom: 20px;
    padding:0px;
    font-weight: bold;
    color: orange;
}

div > div > h1 {
    text-transform: uppercase;
}

div > div > h1::first-letter {
    font-size:2em;
}

Resultatet

Uppgift

Innan vi är redo att testa på en större uppgift så gäller det att du hittar känslan med att jobba med DOM.
Testa nu att ändra bakgrundsfärgen på div:en som ligger i en annan div, eller gör texten blå i den där h1-taggen som ligger i en section-tagg som ligger i en annan section-tagg.

Uppgift

Du skall skapa ett css till följande sida. Du kommer bli tvungen att jobba med DOM-struktur, då vissa taggar finns i flera olika selektorer, kolla främst på <h2>-taggarna som kan/bör formateras olika beroende på i vilken selektor den ligger.

Uppgiften kan tyckas vara stor men börja att skapa någon form av formatering på de stora blocken, allt eftersom kommer du känna att det lossnar och då har du troligtvis redan förstått hur allt hänger ihop. Fastna inte i petitesser och om någon ruta skall vara 640 eller 800px bred. Sätt de stora grejerna först så kan du finlira senare.

Tips1. Identifiera DOM-strukturen och fundera på hur du skall skriva din CSS. Gör det någon skillnad att selektorer är direkta barn till en annan selektor eller räcker det att det är en selektor som finns i en annan selektor? Skall alla <h2>-selektorer formateras på samma sätt oavsett om den ligger i <nav> eller i <article>

Tips2. Det finns en kod som påverkar alla element i en hemsida och det är *. Fördelen med denna kod är att det går att nollställa alla element, nackdelen är att det tar onödigt lång tid att skapa sidor med denna kod. Det hindrar oss ju inte från att kunna använda den under utvecklingen.

* {
  border: 1px dashed red;
  padding: 0;
  margin: 0;
}

Uppgiften är tvådelad, den första delen är att du rent tekniskt kan använda CSS och DOM för att styla en hemsida. Den andra delen av uppgiften är att göra ett snyggt och funktionellt alternativ till kursolle.se.

När du anser dig klar med uppgifterna, lägg upp dem på din domän, koppla dem från din samlingssida och skriv sedan någonting om hur du uppfattade momentet, uppgiften och hur det gick att lösa den.