Demystifying DOM?
Updated
•1 min read
S
I love learning about technology and sharing that with others
DOM Stands for Document object model,
So when we have an HTML and that HTML is read or parsed by the browser it will create a object out of it . That object can be used for interacting or modifying the DOM Structure or elements.It is a tree like structure based on the HTML document
The document object in javascript basically represents DOM and it provides various method to select and update element contents.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document Object Model</title>
</head>
<body>
<div>
<p>
<span></span>
</p>
<label></label>
<input>
</div>
</body>
</html>
DOM for above is like this
Lets see some method provided by the document object.
simplest example we will click on the button and onClick we will be calling a method and this method will basically get the dom element using document object and change the color
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the color of this paragraph.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var x = document.getElementById("demo");
x.style.color = "red";
}
</script>
</body>
</html>
11 views
