let val;
const list = document.querySelector('ul');
const listItem = document.querySelector('li:first-of-type');
val = listItem;
// selleks, et saada elemendi laps-elemente
val = list.childNodes; //list on unordered list, mille lasteks on li'd. Vaikimisi võetakse arvesse, ka tekstiredaktoris olevaid tühje ridu, mida nim. textnode'deks
// Node'e on erinevaid tüüpe, kui me kontrollime neid meetodiga .nodeType
val = list.childNodes[0].nodeType;
// 1 - element
// 2 - attribute
// 3 - text node
// 8 - comment
// 9 - document
// 10 - doctype
val = list.children; // see variant nopib ainult tegelike laps-elemente, jättes textnode vahele. Seejuures tagastab .children elemente html kogumina.
// lapsi saab selekteerida nagu massiivist ning neid muuta
val = list.children[2].textContent = 'sibul';
//on võimalik ka lapse lapselemente saada, kui neid on
val = list.children[0].children;
//on võimalik selekteerida esimest laps-elementi
val = list.firstChild; //annab textNode'i koos ülejäänud prahiga
val = list.firstElementChild; // annab ainult elemendi, ilma prahita
// ja viimast laps-elementi
val = list.lastChild;
val = list.lastElementChild;
// laps elemente saab ka loendada
val = list.childElementCount;
// laps-elemndilt saab kätte ka vanem-elemendi
val = listItem.parentNode; //antud juhul on li vanemaks unordered list
val = listItem.parentElement; //üldjuhul annab nii Node kui element sarnase vastuse
// saab kätte ka vanem-elemendi vanemad
val = listItem.parentElement.parentElement; // antud juhul annab content'i, sest ul asub content divi sees
// kui elemendil on samal tasemel olevaid elemente, ntks li'l on teised li'd, siis saab ka neid selekteerida sõnaga sibling
val = listItem.nextSibling; //võtab node'i
val = listItem.nextElementSibling; //võtab jrägmise elemendi
val = listItem.previousSibling; //võtab eelmise node'i
val = listItem.previousElementSibling; //võtab eelmise elemendi
// näide DOM'is liikumisest:
val = listItem.nextElementSibling.nextElementSibling.previousElementSibling; // antud juhul võetakse esimene li, liigutakse nextElementSibling järgmise juurde, siis sellelt järgmise juurde ja seejärel tagasi previousElementSibling'u abil
console.log(val);