VIDEO 33 PART 1

PHOTO EMBED

Sat Dec 21 2024 06:28:09 GMT+0000 (Coordinated Universal Time)

Saved by @E23CSEU1151 

<!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>
content_copyCOPY