Demystifying DOM?

Demystifying DOM?

sandeep negi's photo
sandeep negi
·

1 min read

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

screenshot_51.png

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>
HTML5