Traversing the DOM
Table of Content:
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);