DOM

BOM: rajapinta selaimen ja JavaScriptin välissä

BOM:in (Browser Object Model) avulla kehittäjät voivat manipuloida selainikkunaa ja sen eri osia, kuten URL-osoitteita ja selaushistoriaa. BOM-mallin keskeisin fokus on selainikkunan ja sen toimintaympäristön tarjoamien objektien hallinnassa, mikä erottaa sen DOM:sta (Document Object Model), joka puolestaan keskittyy dokumentin rakenteeseen ja sisältöön.

BOM:in ytimessä on yksi pääolio - window. Se edustaa käytännössä koko selainympäristöä. Kaikki muut BOM:n liittyvät ominaisuudet, metodit ja alioliot ovat window-olion ominaisuuksia.

JavaScriptissä window on nk. globaali konteksti. Kun käytät esimerkiksi alert()-funktiota, selain tulkitsee sen automaattisesti window.alert()-muodossa.

Window-olion sisältämistä aliolioista keskeisimmät ovat:

• document - Viittaus DOM-puuhun (verkkosivun HTML-sisältö, mutta myös evästeet)
• navigator - Selaintiedot (user agent-tunniste, merkistö, jne.)
• location - URL-osoitteen hallinta
• history - Selaimen navigointihistoria (edellinen/seuraava)
• screen - Näytön fyysiset ominaisuudet
• console - Kehittäjäkonsoli (debuggaus, lokitus)
• localStorage - Tallennus selaimessa (paikallinen, pysyvä)
• sessionStorage - Tallennus selaimessa (väliaikainen, istuntokohtainen)

Esimerki BOM mahdollistaa selainikkunan hallinnan seuraavasti:

window.location.href = "https://www.2kmediat.com";  // Siirretään käyttäjä palvelun etusivulle

Näiden ominaisuuksien ansiosta JavaScript pystyy:

• lukemaan ja muokkaamaan dokumenttin sisältöä
• saamaan tietoja selaimesta
• lukemaan ja hallitsemaan osoiteriviä ja selaimen historiaa
• reagoimaan näytön ja viewportin muutoksiin
• kirjoittamaan viestejä kehittäjäkonsoliin
• hallitsemaan evästeitä

BOM-oliot JavaScriptissä

Seuraava listaus käy lävitse referenssin omaisesti BOM:n oliot ja niihin kuuluvat keskeisimmät ominaisuudet, metodit ja tapahtumat. Tämä ei ole täydellinen listaus, vaan enemmänkin "käytännöllinen".

Vaikka listaus on kirjoitettu JavaScriptin näkökulmasta, on hyvä tiedostaa, että BOM on kieliriippumaton rajapinta ja samat toiminnallisuudet ovat löytyneet mm. Internet Explorin aiemmin käyttämästä VBScript-kielestä eri nimikkeillä (esim. JavaScriptin alert on sama kuin VBSCriptin MsgBox).

window – BOM hierarkian ylin olio

window on BOM-hierarkian ylin olio. Kaikki muut BOM-oliot löytyvät sen ominaisuuksina. JavaScriptissä window-olio on oletusviite, joten esim. alert() on sama kuin window.alert()-komento.

Oheinen esimerkki hyödyntää kahta Window-olion metodia:

alert("Tervetuloa sivulle!");  // ilmoitusikkuna 
console.log("Viewportin leveys on: " + window.innerWidth + "px");  // viesti kehittäjäkonsolissa

navigator – Selaimen tunnistus

navigator tarjoaa tietoa käyttäjän selaimesta ja sen ominaisuuksista.

Oheinen esimerkki hyödyntää kahta Navigator-olion ominaisuutta:

// Tulostetaan käyttäjän selain ja kieliasetus
console.log("Selain: " + navigator.userAgent);
console.log("Kieliasetus: " + navigator.language);

screen – Näytön tiedot

screen tarjoaa tietoa käyttäjän näytön resoluutiosta.

Esimerkiksi:

// Tulostetaan käyttäjän näytön resoluutio ja tarkkuus
console.log("Näytön koko: " + screen.width + "x" + screen.height);
console.log("Värisyvyys: " + screen.colorDepth + " bittiä");

history – Selaushistoria

history mahdollistaa selaimen edellisen ja seuraavan sivun hallinnan (vain nykyisessä istunnossa).

Esimerkiksi:

if(history.length > 0) {
    document.querySelector("#takaisinNappi").addEventListener("click", () => {
        history.back();
   });
};

location – Sivun osoitetiedot

location-olio tarjoaa tietoa nykyisestä URL-osoitteesta ja mahdollisuuden ohjata sivua toiseen osoitteeseen. Huom! Tämä on käytännössä sama asia kuin document.location. Window.location-ominaisuuden käyttöä suositellaan.

Esimerkiksi:

const urlIlmanParametreja = location.origin + location.pathname;

document.querySelector("#siirryNappi").addEventListener("click", () => {
  location.href = urlIlmanParametreja;
});

localStorage ja sessionStorage

Nämä tarjoavat tavan tallentaa evästeitä käyttäjän istuntoon tai pysyvästi.

Esimerkiksi:

// Tarkistetaan, onko evästeiden suostumus jo tallennettu localStorageen
if (localStorage.getItem("cookieConsent") !== "true") {
    // Jos ei ole, tallennetaan arvo "true"
    localStorage.setItem("cookieConsent", "true");
    console.log("Evästekäytännön suostumus tallennettu.");
} else {
    console.log("Evästekäytännön suostumus on jo annettu.");
}

Artikkelin tiedot

Otsikko: BOM: rajapinta selaimen ja JavaScriptin välissä

Kuvaus: BOM (Browser Object Model): rajapinta selaimen ja JavaScriptin välissä. Sen avulla voidaan hallita selainympäristöä ohjelmallisesti.

Julkaisija: Koulutus- ja konsultointipalvelu KK Mediat

Viimeksi päivitetty: 3.9.2025

Kirjoittaja: Keijo Kortelainen

Keijo on verkkoliiketoiminnan ja digimarkkinoinnin asiantuntija, joka on auttanut satoja suomalaisia yrityksiä kasvattamaan näkyvyyttään ja myyntiään verkossa. Keijolla on BBA-tutkinto verkkokaupasta (BBA in eCommerce) sekä lähes kolmen vuosikymmen kokemus web-teknologioista (mm. HTML, CSS, JavaScript, PHP ja SQL) ja sisältömarkkinoinnista. Hän toimii yrittäjänä, konsulttina ja freelancerina – ja on jakanut osaamistaan 2kmediat.com-sivustolla yli 20 vuoden ajan.

LinkedIn