Cacher is the code snippet organizer for pro developers

document.getElementById('TaskList'); //võtab DOM'ist kindla id'ga elemendi

// võtab id'ga elemendi ning muudab või annab sellele uue tekstilise väärtuse
document.getElementById('TaskList').textContent = 'Mida teha';
document.getElementById('TaskList').innerText = 'Loetelu'; //lisab tekstilise väärtuse
// document.getElementById('TaskList').innerHTML = '<span>Task List</span>'; //võimaldab lisada HTML'i

// Selleks, et ei tuleks mitu korda kirjutada document.getElementById, tasub see paigutada muutujasse.
const TaskList = document.getElementById('Tasklist');

// Query selector võimaldab meil võtta DOM'ist elementi ükskõik mille alusel, klassi, id või ka lihtsalt elemendi tagi nime alusel Seejuures aga võtab querySelector ainult ühe elemendi, esimese, ehk kui meil on mitu sarnast elementi, sama tüüpi, klassi või id'ga, siis querySelector valib ainult esimese neist
console.log(document.querySelector('h1'));


// Kui on vaja võtta mitu elementi, siis saab kasutada selleks document.getElementsByClassName('className').

const listItems = document.getElementsByClassName('TaskItem');
// siin on moodustunud HTML kogum antud klassi nimega elementidest, ning sellest saab noppida elemente kui massiivist
//NB! tehniliselt ei ole HTML kogum massiiv, selle peal ei tööta massiivi meetodid
listItems[1].style.color = 'red';
console.log(listItems);

// on võimalik ka täpsustada, piirata, kust elemente võetakse, sest sama klassiga elemente võib olla erinevate veebilehe osades

const items = document.querySelector('ul').getElementsByClassName('TaskItem');
// items.style.background = 'rgb(223, 232, 232)';


// Elemente saab valida ka tag'i nimetuste järgi ja sel juhul valitakse kõik sama tag'iga elemendid
let lis = document.getElementsByTagName('li');
// Selleks, et html kogum teha massiiviks:
lis = Array.from(lis);

// querySelectorAll eripäraks on see, et erinevalt teistest noppimise võimalustest, paigutab see selector objektid nodelisti'i mis pmst ongi massiiv
let OddItems = document.querySelectorAll('li:nth-of-type(odd)');
let EvenItems = document.querySelectorAll('li:nth-of-type(even)');