11. JavaScript: Document Object Model DOM

Document Object Model is nothing but the architecture of your HTML file. When web page is loaded, your browser creates this model to display web page in well designed way.

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Understand-Programming</title>
   </head>

   <body>
      <h1> Welcome to Javascript</h1>
   </body>
</html>

html, head and body tags are all objects of this model. Check this simple presentation of DOM from w3schools.comw3school

javaScript has very rich functionalities to access all these object from html. Lets create one html file and called it DocObjectModel.html and add this code in html file and save it.

<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Understand-Programming</title>
   </head>
     
   <body>
      <h1> Welcome to Javascript</h1>
    
      <btn>
           <input type="submit" id="mybutton" value="press this button"> 
      </btn>

      <script type="text/javascript" src="DocObjectModel.js"> </script>
   </body>
</html>

In this DocObjectModel.html file you have created one button with id mybutton and one javaScript source file DocObjectModel.js which does not exist right now, so make it exist and connect this button with js file, so when user will press this button, function will trigger from js file.

Remember, to keep everything simple, both html and js files should be in same folder. Add following code in your DocObjectModel.js file and save.

window.onload = function() {
   document.getElementById('mybutton').onclick = runThisFunction;
}

function runThisFunction(){
   alert("Hello from JS file");
}


windows.onload finction

windows.onload function triggers when all objects in html files are loaded in browser. When windows.onload function triggers you can attach your function with html file.

You can access the html objects (DOM) by getElementById function. You can also instruct javaScript that trigger my runThisFunction when button clicks.

Execute html file in your browser and press button. If everything is configured correctly “Hello from Js file” message will display.


Get HTML content from specific paragraph 

You can access html contents from specific paragraph. Add paragraph in html file and and assign an id “p1”

<p id="p1"> <strong>This is a Paragraph 1</strong> </p>
DOCTYPE html>
<html lang="en">
  <head>
     <title>Understand-Programming</title>
   </head>
   <body>
   <center>
      <h1> Welcome to Javascript</h1>
      
      <p id="p1"> <strong>This is a Paragraph 1</strong> </p>
    
      <btn>
           <input type="submit" id="mybutton" value="press this button"> 
      </btn>
      
      <script type="text/javascript" src="DocObjectModel.js"> </script>
   </center>
   </body>
</html>

Update your runThisFunction in JS file. Get paragraph element by id “p1”. You can see the message “This is a paragraph 1”

// Get the content the of paragraph "p1" node in your HTML
function runThisFunction(){
   var elementname = document.getElementById('p1');
   alert(elementname.innerHTML);
}


Update HTML content 

You can directly update the html text from javaScript. Get element by id and assign new string to it.

// update the text of node "p1" in your HTML
function runThisFunction(){
      document.getElementById('p1').innerHTML = 'Hurryy..... i have changed the text';
}


Get Element by Tag

You can access all contents which are in one tag, for example centre, div. Update runThisFunction with following code. document.getElementByTagName(‘center’) function will return an array of all elements which are in between center tag.

// Get the contents by tag name (p,div,center etc) in your HTML
function runThisFunction(){
   var listofpgs = document.getElementsByTagName('center');
   if(listofpgs.length>0){
      var firstElementinList = listofpgs[0];
      alert(firstElementinList.innerHTML);
   }else{
     alert("No element found");
   }
}

 

Get / Set website address 

You can access the website address from html and you can update the existing address with new one. Add Understand Programming href in you html file and see if you can access it.

<div id="control">
    <a href="http://www.understand-programming.com" id="website"> Understand Programming</a> 
</div>
DOCTYPE html>
<html lang="en">
  <head>
     <title>Understand-Programming</title>
   </head>
     
   <body>
   <center>
      <h1> Welcome to Javascript</h1>
      
      <p id="p1">
           <strong>This is a Paragraph 1</strong>
      </p>

      <div id="control">
          <a href="http://www.understand-programming.com" id="website"> Understand Programming</a> 
      </div>
    
      <btn>
           <input type="submit" id="mybutton" value="press this button"> 
      </btn>
      
      <script type="text/javascript" src="DocObjectModel.js"> </script>
   </center>   
   </body>
   
</html>

Update runThisFunction with following code and execute it. Once you will press the button, alert will display a message of web address. Click on web link again and it will lead you to new website.

// Get and Set the value of "website" node in your HTML
function runThisFunction(){

    var elementname = document.getElementById('website');

    var webaddress = elementname.href;
    alert(webaddress);

    /// click link on website and it should transfer you to google web page
    elementname.href = "http://www.google.com";

}

This is a very quick introduction of DOM and javaScript functions. You can explore more with DOM official documentation.

 

Download file form GitHub