Javascript with DOM

Javascript works with DOM

Javascript can modify the DOM (change HTML elements)

Here is an example how to change the content of the HTML element.

<!DOCTYPE html>
<html>
   <body>
       <h1>Javascript learning</h1>
   
       <button type="button" onclick="changeContent()">Click Me!</button>
       <p id="element">This is a demonstration.</p>
       <script>
           function changeContent() { 
               document.getElementById("element").innerHTML = "DOM changed";
           }
       </script>
   </body>
</html>

Using the getElementById(...) function you can make modification in your HTML element .

Using it,you can

  • Change HTML element
  • Delete HTML element
  • Create HTML element
  • Copy HTML element
  • etc...

Javascript with css

Javascript lets you work with css using getElementById(...) function .

  • Create styles
  • Change styles
  • Delete styles
  • Add css classes
  • Remove css classes
  • etc...

Here is a simple example

<!DOCTYPE html>
<html>
  <body>
    <h1>Javascript with CSS</h1>
    <p id="element">JavaScript changes styles</p>

    <script>
         function changeStyles() {
               var x = document.getElementById("element");
               x.style.fontSize = "25px";           
               x.style.color = "red"; 
         }
    </script>
    <button type="button" onclick="changeStyles()">Change Styles!</button>
  </body>
</html>