Traversing the DOM in JavaScript: Techniques and Examples

 let val;


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

// Get child node

val = list.childNodes;
val = list.childNodes[0];
val = list.childNodes[0].nodeName;
val = list.childNodes[0].nodeType;
val = list.childNodes[1].nodeType;

// 1 - Element
// 2 - Attribute (Deprecated)
// 3 - Text Node
// 8 - Commnent
// 9 - Document itself
// 10 - Doctype


// Get childern elements node

val = list.childern;
val = list.childern[1];
list.childern[1].textontent = 'Hello';

// childern of children

val = list.children[3].children[0].id ='test-link';
val = list.children[3].childern[0];

// first child
val = list.firstChild;
val = list.firstElementChild;

// last child
val = list.lastChild;
val = list.lastElementChild;

// Count child elements
val = list.childElementCount;


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

// Get next siblings
val = listItem.nextSibling; 
val = listItem.nextElementSibling.nextElementSibling.nextpreviousElementSibling;
 


// Get previous siblings
val = listItem.previousSibling; 
val = listItem.previousElementSibling;
 


console.log(val);