DOM :
DOM is a Document Object Model
Its consider the each line of the HTML tag as a object
Browser will convert the HTML in a DOM Tree Structure.
Each part of the document in tree are the node.
Document -> Browser (HTML page)
Object -> each tag in the HTML is a Object && one full tag is a element
Model -> Logic
Why use the DOM ?
DOM is used to modify the HTML & CSS in Runtime Environment.
DOM METHODS :
There are many methods in a DOM are,
document.getElementById("----"); -> it is used to access the id based element.
document.getElemntByClassName("---"); -> it is used to access the class based element.
*DOM EVENTS *
In Dom Event is called as a Action. which action are take place in the browser like (click, select, scroll, type, hover) its all are events in the DOM.
if you want to click a button means use "onclick".
eg: On and OFF program
<button id="mybutton" onclick="Switch()">ON</button>
<script>
function Switch(){
const switchbutton = document.getElementById("mybutton");
console.log(switchbutton.innerText);
console.log(switchbutton);
if(switchbutton.innerText=="ON"){
switchbutton.innerText="OFF";
}
else{
switchbutton.innerText="ON";
}
}
output:
Eg : 2 bulb on and off program
<style>
*{
margin:0;
padding:0;
box-sizing: border-box;
}
img{
height:50vh;
width:50vh;
margin-top:150px;
margin-left:500px;
}
</style>
</head>
<body>
<img id = "on" onclick="Click()" src="https://img.magnific.com/free-vector/realistic-lit-light-bulb-isolated_1284-41774.jpg?semt=ais_hybrid&w=740&q=80">
<script>
function Click(){
const imgon = document.getElementById("on");
if(imgon.src=="https://img.magnific.com/free-vector/realistic-lit-light-bulb-isolated_1284-41774.jpg?semt=ais_hybrid&w=740&q=80"){
imgon.src= "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRElyjgtARDfzq0eKr3Oh54Rka7sMJEoaP_o_nK1Ki9RA&s=10";
console.log("OFF")
}
else{
imgon.src="https://img.magnific.com/free-vector/realistic-lit-light-bulb-isolated_1284-41774.jpg?semt=ais_hybrid&w=740&q=80";
console.log("ON")
}
}
</script>
output:
Top comments (0)