🌳 DOM – Dokumenta objektu modelis

// ======================================
// Pēc ID (atgriež vienu elementu vai null)
// ======================================
const virsraksts = document.getElementById("galvenais-virsraksts");

// ======================================
// querySelector – PIRMAIS atbilstošais
// ======================================
const poga = document.querySelector("button");           // Tags
const akts = document.querySelector(".aktīvs");         // Klase
const laukums = document.querySelector("#e-pasts");      // ID
const ievades = document.querySelector("input[type=text]"); // Atribūts
const pāra = document.querySelector("tr:nth-child(even)");  // Pseudo

// ======================================
// querySelectorAll – VISI atbilstošie (NodeList)
// ======================================
const visas_pogas = document.querySelectorAll("button");
const saites = document.querySelectorAll("nav a");
const kartes = document.querySelectorAll(".karte");

// NodeList iterēšana
visas_pogas.forEach(poga => {
    poga.style.cursor = "pointer";
});

// Konvertēt uz masīvu
const pogu_masīvs = Array.from(visas_pogas);
// vai:
const pogu_masīvs2 = [...visas_pogas];

// ======================================
// Vecāki un bērni
// ======================================
const elements = document.querySelector(".karte");
elements.parentElement;          // Vecāk-elements
elements.children;               // Tiešie bērni (HTMLCollection)
elements.childNodes;             // Visi bērni + teksts
elements.firstElementChild;      // Pirmais bērns-elements
elements.lastElementChild;       // Pēdējais bērns-elements
elements.nextElementSibling;     // Nākamais brālis/māsa
elements.previousElementSibling; // Iepriekšējais

const elements = document.querySelector("#demonstrācija");

// ======================================
// textContent – tīrs teksts (drošāks)
// ======================================
elements.textContent = "Jauns teksts";
console.log(elements.textContent); // "Jauns teksts"

// innerHTML – HTML saturs (piesardzīgi ar lietotāja datiem!)
elements.innerHTML = "<strong>Treknraksts</strong> un <em>kursīvs</em>";
console.log(elements.innerHTML); // "<strong>Treknraksts</strong> ..."

// BĪSTAMI – nekad neievietojiet neuzticamu saturu ar innerHTML!
// elements.innerHTML = lietotāja_ievade; // XSS uzbrukums!

// Drošs veids – textContent vai sanitizeHTML
const ievade = "<script>alert(\"XSS\")<\/script>";
elements.textContent = ievade; // Droši – attēlo kā tekstu

// innerText – līdzīgs textContent, bet ņem vērā CSS redzamību
elements.innerText = "Redzams teksts";

// outerHTML – elements pats + tā HTML
console.log(elements.outerHTML);
// <div id="demonstrācija"><strong>...</strong></div>

// ======================================
// Formu elementi
// ======================================
const ievades_lauks = document.querySelector("#vārds");
ievades_lauks.value = "Anna";            // Iestatīt vērtību
console.log(ievades_lauks.value);        // Nolasīt vērtību

const izvēle = document.querySelector("select");
izvēle.value = "2";                      // Izvēlēties opciju
console.log(izvēle.selectedIndex);       // Izvēlētā indekss

const checkbox = document.querySelector("input[type=checkbox]");
checkbox.checked = true;

const poga = document.querySelector("#mana-poga");

// ======================================
// Atribūtu darbs
// ======================================
poga.getAttribute("id");          // "mana-poga"
poga.getAttribute("class");       // "poga aktīvs" vai null
poga.setAttribute("data-id", "42");
poga.removeAttribute("disabled");
poga.hasAttribute("required");    // true/false

// Tieša piekļuve standarta atribūtiem
poga.id;           // "mana-poga"
poga.href;         // (saitēm)
poga.src;          // (attēliem)
poga.disabled = true; // Izslēgt

// Data atribūti
// <div data-lietotājs-id="123" data-sadaļa="profils">
const karte = document.querySelector(".karte");
karte.dataset.lietotājsId;  // "123" (camelCase)
karte.dataset.sadaļa;       // "profils"
karte.dataset.jaunaDaļa = "iestatījumi"; // Pievienot

// ======================================
// CSS klases ar classList
// ======================================
const elements = document.querySelector("#elements");

elements.classList.add("aktīvs");          // Pievienot klasi
elements.classList.remove("slēpts");       // Dzēst klasi
elements.classList.toggle("tumšs");        // Pārslēgt
elements.classList.contains("aktīvs");     // vai ir klase?
elements.classList.replace("vecs", "jauns"); // Aizstāt

// Vairākas klases uzreiz
elements.classList.add("klase1", "klase2", "klase3");

// ======================================
// Stils tieši
// ======================================
elements.style.color = "red";
elements.style.backgroundColor = "lightblue"; // camelCase!
elements.style.fontSize = "18px";
elements.style.display = "none";   // Paslēpt
elements.style.display = "block";  // Rādīt

// Nolasīt aprēķināto stilu
const stils = window.getComputedStyle(elements);
console.log(stils.marginTop); // "16px"

// ======================================
// Jaunu elementu veidošana
// ======================================
const jaunais_li = document.createElement("li");
jaunais_li.textContent = "Jauns elements";
jaunais_li.classList.add("saraksta-elements");

// ======================================
// Ievietošana
// ======================================
const saraksts = document.querySelector("#saraksts");

saraksts.appendChild(jaunais_li);         // Beigās
saraksts.prepend(jaunais_li);            // Sākumā (vai elements)
saraksts.insertBefore(jaunais_li, refs); // Pirms atsauces elementa

// insertAdjacentHTML – ātri ar HTML virkni
saraksts.insertAdjacentHTML("beforeend", "<li>Pēdējais</li>");
saraksts.insertAdjacentHTML("afterbegin", "<li>Pirmais</li>");
saraksts.insertAdjacentHTML("beforebegin", "<p>Pirms saraksta</p>");
saraksts.insertAdjacentHTML("afterend", "<p>Pēc saraksta</p>");

// ======================================
// Dzēšana
// ======================================
const elements = document.querySelector(".dzēst-šo");
elements.remove();                    // ES2015 – ērtāk
// elements.parentNode.removeChild(elements); // Vec. veids

// ======================================
// Klonēšana
// ======================================
const oriģināls = document.querySelector(".veidne");
const klons = oriģināls.cloneNode(true); // true = ar bērniem
klons.id = "jauns-id";
document.body.appendChild(klons);

// ======================================
// DocumentFragment – batch DOM izmaiņas
// ======================================
const fragments = document.createDocumentFragment();
const dati = ["Ābolsami", "Bumbieris", "Ķirsis"];

dati.forEach(teksts => {
    const li = document.createElement("li");
    li.textContent = teksts;
    fragments.appendChild(li);
});

saraksts.appendChild(fragments); // Viena DOM operācija!

// Elementa pozīcija
const karte = document.querySelector(".karte");
const atrašanās = karte.getBoundingClientRect();
// { top, right, bottom, left, width, height, x, y }

console.log(atrašanās.top);    // Attālums no viewport augša
console.log(atrašanās.left);   // Attālums no viewport kreisās puses
console.log(atrašanās.width);  // Platums

// Ritināšana
window.scrollTo(0, 0);         // Lapas sākums
window.scrollTo({ top: 500, behavior: "smooth" }); // Slīds animācija

// Ritināt līdz elementam
karte.scrollIntoView({ behavior: "smooth", block: "center" });

// Ritināšanas pozīcija
console.log(window.scrollY);   // Vertikālā pozīcija
console.log(window.scrollX);   // Horizontālā pozīcija

// Viewport izmēri
console.log(window.innerWidth);   // Platums
console.log(window.innerHeight);  // Augstums

// Visa lapa
console.log(document.documentElement.scrollHeight); // Kopējais augstums