DOM Manuplation

JavaScript Output :

Getelementbyid

Hello H2 tag , ByTagName

Hello, I chnage By button click

This Text Will chnage !

I will chnage paragraph to heading 2 !

JavaScript File

        // DOM MANUPLATION

// Window > Documents > Html > head > title > body ...

// document.body.style    in console 

document.body.style.backgroundColor = "green";

document.getElementsByTagName("h2")[0].style.color = "blue";

// By TAg Name
let x = document.getElementsByTagName("h2")[1];
x.style.color = "red";
x.style.backgroundColor = "black";
x.style.padding = "20px";
x.style.fontFamily = "cursive";
x.style.width = "50%";

// By ID
let y = document.getElementById('hello');
y.style.backgroundColor = "yellow";
y.style.padding =  "20px";
y.style.width = "50%";
y.style.fontFamily = "verdana";



// Onclick Event

function btnonclick() {
    alert("I Alert When Button is clicked !"); 
}

// Chnage Styles by button click 

function changestyle() {
   let x = document.getElementsByTagName("h3")[2];
   x.style.color = "white";
x.style.backgroundColor = "blue";
x.style.padding = "30px";
x.style.fontFamily = "cursive";
x.style.width = "80%";
}


// Text Chnage By onclick event 

function textchange() {
    let text = document.getElementById("para");
    text.innerText = "Hello, I m Chnaged, Using InnerText ";
}


// Change HTML Element p to h2 and color and Fontfamily

function elementchange() {
    let x = document.getElementById("para2");
    x.innerHTML = "
Hello, i chnage paragraph to heading ,style, Using InnerHTML
";
    x.style.fontFamily = "cursive";
}