DOM Konsepter

Document Object Model (DOM) lar JavaScript endre HTML og CSS på nettsiden.

Velge elementer

getElementById

Velger ett element basert på ID.

const title = document.getElementById("main-title");

<h1 id="main-title">Hello</h1>

querySelector

Velger første element som matcher CSS-selektor.

const button = document.querySelector(".btn");
const firstP = document.querySelector("p");
const header = document.querySelector("header nav");

querySelectorAll

Velger alle elementer som matcher.

const allButtons = document.querySelectorAll(".btn");
const allP = document.querySelectorAll("p");

// Loop through
allButtons.forEach(btn => {
    console.log(btn);
});

Tip

Bruk querySelector og querySelectorAll - de er mest fleksible.

Endre innhold

textContent

Endrer kun tekst (tryggere).

const el = document.querySelector("#message");
el.textContent = "New message";

innerHTML

Endrer HTML (kan inkludere tagger).

const el = document.querySelector("#content");
el.innerHTML = "<strong>Bold</strong> and <em>italic</em>";

Warning

Bruk textContent når du bare trenger tekst. innerHTML kan være usikkert med brukerinput.

Endre attributter

const img = document.querySelector("img");

// Get attribute
const src = img.getAttribute("src");

// Set attribute
img.setAttribute("src", "new-image.jpg");
img.setAttribute("alt", "Description");

// Remove attribute
img.removeAttribute("title");

// Direct access (common attributes)
img.src = "another-image.jpg";
img.alt = "New description";

data-attributter

<div id="user" data-id="123" data-role="admin"></div>

const user = document.querySelector("#user");

// Read
const userId = user.dataset.id;      // "123"
const role = user.dataset.role;      // "admin"

// Write
user.dataset.status = "active";

Endre stil

Inline styles

const box = document.querySelector(".box");

box.style.color = "blue";
box.style.backgroundColor = "yellow";    // camelCase!
box.style.fontSize = "20px";
box.style.border = "2px solid black";

CSS til JavaScript

CSS-egenskaper med bindestrek blir camelCase i JavaScript:

background-color → backgroundColor
font-size → fontSize
border-radius → borderRadius

classList

Bedre måte å style - bruk CSS-klasser.

const el = document.querySelector(".box");

el.classList.add("active");           // Add class
el.classList.remove("hidden");        // Remove class
el.classList.toggle("selected");      // Add/remove
el.classList.contains("active");      // Check (true/false)
el.classList.replace("old", "new");   // Replace class

/* In CSS */
.active {
    background: green;
    color: white;
}

.hidden {
    display: none;
}

Opprette elementer

// 1. Create element
const newDiv = document.createElement("div");

// 2. Add content
newDiv.textContent = "Hello!";
newDiv.classList.add("message");

// 3. Add to page
document.body.appendChild(newDiv);

// Or add to specific element
const container = document.querySelector("#container");
container.appendChild(newDiv);

Flere metoder for å legge til

const parent = document.querySelector("#parent");
const newEl = document.createElement("p");
newEl.textContent = "New paragraph";

// Add at end
parent.appendChild(newEl);

// Add at beginning
parent.prepend(newEl);

// Add before another element
const target = document.querySelector("#target");
parent.insertBefore(newEl, target);

// Remove element
parent.removeChild(newEl);
// Or
newEl.remove();

Events

addEventListener

const btn = document.querySelector("#myButton");

btn.addEventListener("click", function() {
    console.log("Button clicked!");
});

// With arrow function
btn.addEventListener("click", () => {
    console.log("Clicked!");
});

Event-objektet

btn.addEventListener("click", function(event) {
    console.log(event.target);        // Element that was clicked
    console.log(event.type);          // "click"
    event.preventDefault();           // Stop default behavior
});

Vanlige events

Event	Beskrivelse
`click`	Museklikk
`dblclick`	Dobbeltklikk
`mouseover`	Mus over element
`mouseout`	Mus forlater element
`keydown`	Tast trykket ned
`keyup`	Tast sluppet
`submit`	Skjema sendt
`change`	Input-verdi endret
`input`	Input-verdi endres (live)
`focus`	Element får fokus
`blur`	Element mister fokus
`load`	Side/bilde lastet

Skjema-events

const form = document.querySelector("form");

form.addEventListener("submit", function(event) {
    event.preventDefault();  // Stop page reload

    const name = document.querySelector("#name").value;
    const email = document.querySelector("#email").value;

    console.log(name, email);
});

Input-events

const input = document.querySelector("#search");

// Fires on every keystroke
input.addEventListener("input", function(event) {
    console.log(event.target.value);
});

// Fires when input loses focus
input.addEventListener("change", function(event) {
    console.log("Final value:", event.target.value);
});

Keyboard-events

document.addEventListener("keydown", function(event) {
    console.log(event.key);      // "Enter", "a", "Escape", etc.
    console.log(event.code);     // "Enter", "KeyA", "Escape", etc.

    if (event.key === "Escape") {
        closeModal();
    }

    if (event.key === "Enter" && event.ctrlKey) {
        submitForm();
    }
});

Traversering

Navigere mellom elementer.

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

// Parent
item.parentElement;

// Children
item.children;              // All child elements
item.firstElementChild;     // First child
item.lastElementChild;      // Last child

// Siblings
item.nextElementSibling;    // Next sibling
item.previousElementSibling; // Previous sibling

<ul id="list">
    <li>First</li>
    <li class="item">Second</li>  <!-- item -->
    <li>Third</li>
</ul>

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

item.parentElement;              // <ul id="list">
item.nextElementSibling;         // <li>Third</li>
item.previousElementSibling;     // <li>First</li>

Eksempler

Toggle dark mode

const toggle = document.querySelector("#darkModeToggle");

toggle.addEventListener("click", () => {
    document.body.classList.toggle("dark-mode");
});

Vis/skjul element

const btn = document.querySelector("#toggleBtn");
const content = document.querySelector("#content");

btn.addEventListener("click", () => {
    content.classList.toggle("hidden");
});

Dynamisk liste

const input = document.querySelector("#itemInput");
const addBtn = document.querySelector("#addBtn");
const list = document.querySelector("#itemList");

addBtn.addEventListener("click", () => {
    const text = input.value.trim();

    if (text) {
        const li = document.createElement("li");
        li.textContent = text;
        list.appendChild(li);
        input.value = "";
    }
});

Teller

const counter = document.querySelector("#counter");
const addBtn = document.querySelector("#add");
const subBtn = document.querySelector("#subtract");

let count = 0;

addBtn.addEventListener("click", () => {
    count++;
    counter.textContent = count;
});

subBtn.addEventListener("click", () => {
    count--;
    counter.textContent = count;
});