Working with different elements of DOM in html

Subscribe our Rurban Life YouTube Channel.. "Rural Life, Urban LifeStyle"

We tried to understand what the DOM means in html in our previous post “Understanding HTML Document Object Model (DOM)” . In this post, we will show some more fun ways to work with DOM elements so you can do many customised things from JAVA Script to update your html code.

Here we will continue with our code from previous post..

1. Updating the CSS / Style of element from JAVA Script

<html>
   <head>
      <script>
         window.onload = function() {
         var htmlElement = document.getElementById("h1ElementId");
         htmlElement.style = "color:red";
         htmlElement.innerHTML = "Lynxbee DOM TEST page!";
         }
         
      </script>
   </head>
   <body>
      <h1 id="h1ElementId"></h1>
   </body>
</html>

In above code, we updated the html element H1 and changed its color using “style”. This is just simple example, so you can change any style for any element.

2. Hide the element completely

<html>
   <head>
      <script>
         window.onload = function() {
         var htmlElement = document.getElementById("h1ElementId");
         htmlElement.style = "display:none";
         htmlElement.innerHTML = "Lynxbee DOM TEST page!";
         }
         
      </script>
   </head>
   <body>
      <h1 id="h1ElementId"></h1>
   </body>
</html>

using above code i.e. adding style “display:none” we can hide the element completely from javascript.

The code ,