DOCUMENT OBJECT MODEL PART-1

DOM:

• The DOM (Document Object Model) is a programming interface provided by the browser that represents a web page's HTML structure as a tree of programmable objects.
• It acts as a bridge, allowing JavaScript to dynamically read, change, add, or delete the website's content, structure, and styles.

The DOM Tree Structure:

Document Node: The root entry point representing the entire webpage (document).
Element Nodes: The HTML tags themselves.
Text Nodes: The actual text content written inside those elements.
Attribute Nodes: Extra data stored inside tags, like href or src.

Selecting HTML Elements:

• document.getElementById(id)-Find an element by element id
• document.getElementsByTagName(name)-Find elements by tag name
• document.getElementsByClassName(name)-Find elements by class name
• document.querySelector(selector)-Find the first element that matches a CSS selector(tbd)
• document.querySelectorAll(selector)-Find all elements that match a CSS selector(tbd)

Accessing Element Content:

• element.innerHTML-The HTML content of an element
• element.textContent-The text content of an element

task 1 : button on and off

<button style="width: 100px;height: 100px;" id="new" onclick="changeText()">on</button>

<script>
    function changeText(){
        const newoff = document.getElementById("new");
        if (newoff.innerText == "on"){
            newoff.innerText = "off";
        }else{
            newoff.innerText = "on";
        }

    }
</script>

output:

task 2 : bulb on and off

<button style="width: 80px;height: 80px;font-size: 30px;" id="new" onclick="changeText()">on</button>
<div class="div">
    <img id="onpic"  src="https://www.w3schools.com/js/pic_bulbon.gif" alt="">
    <img id="offpic" style="display: none;" src="https://www.w3schools.com/js/pic_bulboff.gif" alt="">
</div>
<script>
    function changeText(){
        const newoff = document.getElementById("new");
        const firstpic = document.getElementById("onpic")
        const secondpic = document.getElementById("offpic")
        if (newoff.innerText == "on"){
            newoff.innerText = "off";
            firstpic.style.display = "none";
            secondpic.style.display = "block"
        }else{
            newoff.innerText = "on";
            firstpic.style.display = "block";
            secondpic.style.display = "none"
        }     
    }
</script>

output:

task 3 : count

<style>
    body{
        width: 100%;
        height: 90vh;
        background-color: cornflowerblue;
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;
    }
    h1{
        font-size: 55px;
        color: white;
    }
    button{
        width: 200px;
        height: max-content;
        font-size: 40px;
        padding: 20px;
        border: 2px solid black;
    }
</style>

<h1 id="div">0</h1>
<div class="group">
    <button id="add" onclick="addition()">+</button>
    <button id="sub" onclick="subraction()">-</button>
    <button id="reset" onclick="resetBack()">reset</button>
</div>

<script>
    function addition(){
        const newadd = document.getElementById("div");
        newadd.innerText = Number(newadd.innerText) + 1
    }
    function subraction(){
        const newsub = document.getElementById("div");
        newsub.innerText = Number(newsub.innerText) - 1
    }
    function resetBack(){
        const newreset = document.getElementById("div");
        newreset.innerHTML = 0
    }
</script>

output: