Skip to content
Shadow Cipher

DOMs

<!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: #212121; color: #fff;">
        <div class="parent">
            <!-- this is a comment -->
            <div class="day">Monday</div>
            <div class="day">Tuesday</div>
            <div class="day">Wednesday</div>
            <div class="day">Thursday</div>
        </div>
    </body>
    <script>
        const parent = document.querySelector('.parent');
        console.log(parent);
        console.log(parent.children[1].innerHTML);


        for(let i = 0; i < parent.children.length; i++){
            console.log(parent.children[i].innerHTML);
        }


        parent.children[1].style.color = "orange"
        console.log(parent.firstElementChild);
        console.log(parent.lastElementChild);


        const dayOne = document.querySelector(".day");
        console.log(dayOne)
        console.log(dayOne.parentElement)
        console.log(dayOne.nextElementSibling);


        console.log("NODES", parent.childNodes)


    </script>
</html>
<!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: #212121; color: #fff;">


</body>
<script>
    const div = document.createElement("div");
    console.log(div);
    div.className = "main";
    div.id = Math.round(Math.random() * 10 + 1);
    div.setAttribute("title", "Generated title");
    div.style.backgroundColor = "green";
    div.style.padding = "12px";
    const addText = document.createTextNode("chai aur code");
    div.appendChild(addText);
    document.body.appendChild(div);
</script>
</html>
<!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: #212121; color: #fff;">
    <ul class="language">
        <li>Javascript</li>
    </ul>
</body>
<script>
    function addLanguage(langName){
        const li = document.createElement("li");
        li.innerHTML = `${langName}`;
        document.querySelector(".language").appendChild(li);
    }
    addLanguage("Pyhton");
    addLanguage("typescript");


    function addOptiLanguage(langName){
        const li = document.createElement("li");
        li.appendChild(document.createTextNode(langName));
        document.querySelector('.language').appendChild(li);
    }
    addOptiLanguage('goLang');


    const secondLang = document.querySelector("li:nth-child(2)");
    console.log(secondLang);


    const newLi = document.createElement("li");
    newLi.textContent = "Mojo";
    secondLang.replaceWith(newLi);


    const firstLang = document.querySelector("li:first-child");
    firstLang.outerHTML = `<li>Typescript</li>`


    const lastLang = document.querySelector("li:last-child");
    lastLang.remove();


</script>
</html>