DOM (Document Object Model) ir programmatiska HTML dokumenta reprezentācija. JavaScript izmanto DOM, lai dinamiski mainītu lapas saturu, struktūru un izskatu.

Elementu atlasīšana

// Pēc ID (atgriež vienu elementu)
const virsraksts = document.getElementById('virsraksts');

// Pēc CSS selektora (pirmais atbilstošais)
const poga = document.querySelector('.poga');
const pirmaisLi = document.querySelector('ul > li:first-child');

// Pēc CSS selektora (visi atbilstošie)
const visasPogas = document.querySelectorAll('.poga');
const visiLinki = document.querySelectorAll('a');

querySelector un querySelectorAll atbalsta jebkuru CSS selektoru un ir ieteicamās metodes.

Satura mainīšana

const el = document.querySelector('#info');

// Teksta saturs (drošs — neizpilda HTML)
el.textContent = 'Jauns teksts';

// HTML saturs (uzmanīgi ar lietotāja datiem!)
el.innerHTML = '<strong>Treknraksts</strong>';

Atribūtu mainīšana

const saite = document.querySelector('a');
const attels = document.querySelector('img');

saite.href = 'https://example.com';
saite.setAttribute('target', '_blank');
attels.src = 'jauns-attels.jpg';
attels.alt = 'Apraksts';

// Nolasīt atribūtu
console.log(saite.getAttribute('href'));

CSS klašu pārvaldība

const el = document.querySelector('.kaste');

el.classList.add('aktīvs'); // pievienot klasi
el.classList.remove('aktīvs'); // noņemt klasi
el.classList.toggle('aktīvs'); // pārslēgt (pievieno/noņem)
el.classList.contains('aktīvs'); // pārbaudīt (true/false)

Stilu mainīšana

const el = document.querySelector('.kaste');

el.style.backgroundColor = '#3498db';
el.style.color = 'white';
el.style.padding = '20px';
el.style.display = 'none'; // paslēpt elementu

Labāka prakse ir pievienot/noņemt CSS klases, nevis mainīt stilus tieši.

Elementu izveide un pievienošana

// Izveidot jaunu elementu
const jaunsParagrafs = document.createElement('p');
jaunsParagrafs.textContent = 'Šis ir jauns paragrāfs.';
jaunsParagrafs.classList.add('jauns');

// Pievienot konteineram
const konteiners = document.querySelector('#saturs');
konteiners.appendChild(jaunsParagrafs);

// Ievietot pirms cita elementa
const pirmsŠī = document.querySelector('#atskaites-punkts');
konteiners.insertBefore(jaunsParagrafs, pirmsŠī);

Elementu dzēšana

const elements = document.querySelector('#dzēšamais');
elements.remove(); // moderna metode

Praktisks piemērs: saraksta veidošana

const augļi = ['ābols', 'bumbieris', 'ķirsis'];
const ul = document.querySelector('#auglu-saraksts');

augļi.forEach(auglis => {
const li = document.createElement('li');
li.textContent = auglis;
ul.appendChild(li);
});