DOM

-DOM (Document Object Model)
-DOM is used to access UI (view) in Browser.

• Model-> Logic

1. Why DOM?

• The Document Object Model (DOM) is a programming interface that represents the structure of a web document (HTML, XML, SVG) as a tree of nodes.

OBJECT:

const h1{
     id:"heading1",
     innerText:"Hello",
     style:{
         color:red,}

DOM METHODS:

• document.getElementById(id_name);
  It is used to access the id of an element from the Document.

• document.getElementByClass(Class_name);
  It is used to access the Class of an element from the Document.

EVENT:

Even is an Action, In which Action take place in the browser. (Like: Onclick, Select, click, scroll, type, hover).

Example:

• To print Hello using "Id" when a button is clicked.

OUTPUT:

object
Hello

console.log(element.innerText);  //Hello
            element-> Object
            innerText ->CSSStyleProperties

• To change the word **hello to payilagam **when the button is clicked.

OUTPUT:

BEFORE:

Hello
Hii
Hello world
check text

After:

payilagam
Hii
Hello world
check text

1. when an on button is clicked the bulb should be turned off and when the button is again clicked, the bulb should turn on.

<button id="btn"  onclick="togglebulb()">Turn ON</button> 
<img  id="bulb" src="https://www.w3schools.com/js/pic_bulboff.gif">


        <script> 

        function togglebulb(){
            const element= document.getElementById("bulb");
            console.log(element.innerText);
            //image logic
            const bnt=document.getElementById("btn");
            bulb.src="https://www.w3schools.com/js/pic_bulbon.gif";

        }
       </script>

OUTPUT:
BEFORE:

AFTER: