
// How do we get the second list item?
let element = document.getElementById("i2");
console.log(element);

console.log(element.parentNode);  
let b = element.parentNode.parentNode; 
console.log(b);
console.log(b.parentNode);        
console.log(b.firstChild);       
console.log(b.firstElementChild); 



console.log("\n\n\nHere are the Children elements:"); 
console.log(b.children); 



console.log("\n\n\nHere are the Children elements one at a time:"); 
for (let el of b.children)
    console.log(el.tagName, el.id);



console.log("\n\n\nHere are the Child Nodes:"); 
let cNodes = b.childNodes; 
cNodes.forEach((node) => {
    if (node.nodeType === Node.ELEMENT_NODE) {
        console.log("Element:", node.tagName, "ID:", node.id || "(no ID)");
    } else if (node.nodeType === Node.TEXT_NODE) {
        console.log("Text node:", `"${node.textContent.trim()}"`);
    } else {
        console.log("Other node type:", node.nodeType);
    }
});
