Preview:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body style= "background-color: black ; color: aliceblue;">
    <div class = "parent">
        <div class = 'day'>MONDY</div>
        <div class = 'day'>TUESDY</div>
        <div class = 'day'>WEDNESDY</div>
        <div class = 'day'>THURSDY</div>
        <div class = 'day'>FRIDY</div>
    </div>
</body>
<script>
    ///// catching children from parents ////////////
    const parent = document.querySelector('.parent')
    console.log(parent);  
    /*<div class = "parent">
        <div class = 'day'>MONDY</div>
        <div class = 'day'>TUESDY</div>
        <div class = 'day'>WEDNESDY</div>
        <div class = 'day'>THURSDY</div>
        <div class = 'day'>FRIDY</div>
    </div>*/
    console.log(parent.children); // html collection as output 
    console.log(parent.children[1]); //TUESDAY AS A OUTPUT 
     
     for (let i = 0; i < parent.children.length; i++) {
       console.log(parent.children[i].innerHTML);
       /* MONDAY , TUESDAY , WEDNESDAY , THURSDAY , FRIIDAY */  
    }
    parent.children[1].style.color="orange"; // TUESDAY COBNVERTED TO YELLOW
    console.log(parent.firstElementchild);
    console.log(parent.lastElementchild);


    ///// catching  parent from children ////////////
    const dayone = document.querySelector('.day');
    console.log(dayOne);
    console.log(dayOne.parentElement);
    console.log(dayOne.parentElemenSibling);
    
</script>
</html>
downloadDownload PNG downloadDownload JPEG downloadDownload SVG

Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!

Click to optimize width for Twitter