traversing dom

let val;

const list = document.querySelector("ul.collection");
const listItem = document.querySelector("li.collection-item:first-child");

val = listItem;
val = list;

// Get child nodes
val = list.childNodes;  // count line breaker as a text node.
val = list.childNodes[0];
val = list.childNodes[0].nodeName;
val = list.childNodes[1].nodeType;

// nodetypes
// 1 - Element
// 2 - Attribute
// 3 - Text node
// 8 - Comment
// 9 - Document itself
// 10 - Doctype

// get children element nodes
// val = list.children;  // just elements. return HTMLCollection

val = list.children;
val = list.children[1];
list.children[1].textContent = "Hello";

// Children of children
list.children[3].children[0].id = "test-id";
val = list.children[3].children[0];

// First child
val = list.firstChild;  // text node
val = list.firstElementChild; // element

// last child
val = list.lastChild;  // text node
val = list.lastElementChild; // element

// Count child elements
val = list.childElementCount;

// Get parent node
val = listItem.parentNode;
val = listItem.parentElement;
val = listItem.parentElement.parentElement;

// Get next sibling
val = listItem.nextSibling;
val = listItem.nextElementSibling.nextElementSibling.previousElementSibling;

// Get Next
// val = listItem.previousSibling;
// val = listItem.previousElementSibling;  // null

console.log(val);