Post
Ask Question

Document Object Model in JavaScript - Part Two

Introduction 

 
In this article, we learn about the DOM methods and properties in JavaScript. In my previous article, I explained the DOM objects. To check it out, refer to this link.
 

DOM (Document Object Model) Methods

 
All HTML elements are objects. We know that each object has properties and methods. The Document object HTML contains methods that allow you to select the desired HTML element.
  • getElementByID() – find element by id
  • getElementsByName() – find element by name
  • getElement ByTagName() – find element by tag name
  • getElementsByClassName() – find element by class name

getElementById()

 
This is used to find and retrieve an HTML using a specific ID. The specific element ID must be unique. In the example below, the getElementById() method is used to select the element with id="demo" and change its content.
  1. var elm = document.getElementById("demo");  
  2. elm.innerHTML = "Welcome to C-Sharp Corners!";  
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Document object Model</title>  
  5.     <meta charset="utf-8">  
  6. </head>  
  7. <body>  
  8.     <h2>Document Object getElemtnById </h2>  
  9.     <p id="demo"></p>  
  10.     <script type="text/javascript">  
  11.         var elm = document.getElementById("demo");   //using getElementById find element by id  
  12.         elm.innerHTML = "Welcome to C-Sharp Corners!";  
  13.     </script>  
  14. </body>  
  15. </html>  
Output
 
Document Object Model In JavaScript
 

getElementsByClassName()

 
This is used to find and retrieve a collection of all elements with the specific class name. An array index is used to access the elements with the specific tag. HTML collection is an array of objects. Length property is used to find the number of elements. It searches the entire document and returns only the elements that match the specified or given class name.
 
Syntax
  1. var ele=document.getELementsByClassName('name');  
Example of getElementsByClassName() Method:
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>DOM Methods</title>  
  5.     <meta charset="utf-8">  
  6. </head>  
  7. <body>  
  8.     <h2>DOM object classname</h2>  
  9.     <h2>JavaScript</h2>  
  10.     <p class="intro">  
  11.             JavaScript is used along with HTML and CSS. It is one of the core technologies of the World Wide Web. Most powerful websites and browsers support JavaScript, like Google, Amazon, Facebook, etc.</p>  
  12.     <p class="uses">  
  13.         Uses of JavaScriptJavaScript can be used in multiple applications.It can be used for Client-Side Validation, which is for creating web pages.It is used to create web applications and server applicationsIt can be used to show the error message on the popup menu on websites.You can use JavaScript to create interactive web elements.  
  14.     </p>  
  15.     <script type="text/javascript">  
  16.         var para = document.getElementsByClassName("intro");  
  17.         var len1 = para.length;  
  18.         alert("Intro Count :"+len1);  
  19.         for (var i=0; i <len1; i++)   
  20.         {  
  21.             para[i].style.background="skyblue";  
  22.             para[i].style.color="white";  
  23.         }  
  24.         var para1 = document.getElementsByClassName("uses");  
  25.         var len2 = para1.length;  
  26.         alert("Uses Count :"+len2);  
  27.         for (var i=0; i <len2; i++)   
  28.         {  
  29.             para1[i].style.background="blue";  
  30.             para1[i].style.color="white";  
  31.         }  
  32.     </script>  
  33. </body>  
  34. </html>  
Output
 
Document Object Model In JavaScript
 
Document Object Model In JavaScript
 

getElementsByName()

 
This is used to find and retrieve all HTML elements using the specific name, access array. The element accessed is in an array. If you give the same element name, there is no problem accessing it, the first name is assigned a zero index and the second name the first index. Look at the example below, and you'll clearly understand.
 
Example of getElementsByName() Method.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Element By Name</title>  
  6. </head>  
  7. <body>  
  8.     <h2>DOM elemement by Name</h2>  
  9.     <script type="text/javascript">  
  10.         function checkbox() {  
  11.             var frt = document.getElementsByName("fruit")  
  12.             if (frt[1].checked)   
  13.             {  
  14.                 alert("It is a Fruit");  
  15.             }  
  16.             else  
  17.             {  
  18.                 alert("Not a fruit");  
  19.             }  
  20.         }  
  21.     </script>  
  22.     <h2>Select the Fruit</h2>  
  23.     <br>  
  24.      Milk<input type="radio" name="fruit"> <!-- same name to give the two element -->  
  25.     <br>  
  26.     Apple<input type="radio" name="fruit"> <!-- same name to give the two element -->  
  27.     <br><br>  
  28.     <button onclick="checkbox()">Check</button>  
  29. </body>  
  30. </html>  
Output
 
Document Object Model In JavaScript
 

getElement ByTagName()

 
This is used to find and retrieve a collection of elements using the specific tag. An array index is used to access the elements with the specific tag, and HTML collection is an array of objects. You can change the specific tag (color, size, font).
 
Example of getElement ByTagName() Method.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Element by Tag Name</title>  
  6. </head>  
  7. <body>  
  8.     <h2>JavaScript </h2>  
  9.     <h3>Select Element By Tag Name</h3>  
  10.     <div id="div1">  
  11.         <p id="intro">  
  12.             JavaScript is used along with HTML and CSS. It is one of the core technologies of the World Wide Web. Most powerful websites and browsers support JavaScript, like Google, Amazon, Facebook, etc.</p>  
  13.         <p id="uses">  
  14.         Uses of JavaScriptJavaScript can be used in multiple applications.It can be used for Client-Side Validation, which is for creating web pages.It is used to create web applications and server applicationsIt can be used to show the error message on the popup menu on websites.You can use JavaScript to create interactive web elements.</p>  
  15.     </div>  
  16.     <p> Most powerful websites and browsers support JavaScript, like Google, Amazon, Facebook, etc.</p></p>  
  17.     <script type="text/javascript">  
  18.               
  19.             var tags = document.getElementsByTagName('p');  
  20.             tags[0].style.background="skyblue";  
  21.             tags[1].style.color="blue";  
  22.             tags[2].style.background="yellow";  
  23.     </script>  
  24. </body>  
  25. </html>  
Output
 
Document Object Model In JavaScript 
 

DOM (Document Object Model) Properties

  • InnerHtml
  • Innertext

InnerHTML

 
The innerHTML is used to create a dynamic and static web content. It is used mostly in the web pages to generate dynamic HTML such as a registration form, comment form, and links. This content is created using innerHTML Properties.
 
The following example includes the HTML element using innerHTML.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>DOM Property</title>  
  6. </head>  
  7. <body>  
  8.     <h2>DOM property innerHTML</h2>  
  9.     <p id="message"></p>  
  10.     <ul id="Items">  
  11.         <li>List 1</li>  
  12.         <li>List 2</li>  
  13.         <li>List 3</li>  
  14.         <li>List 4</li>  
  15.         <li>List 5</li>  
  16.     </ul>  
  17.         <script type="text/javascript">  
  18.         function show()   
  19.         {  
  20.             var msg = document.getElementById("message"); //message include the button using innerHTML  
  21.             msg.innerHTML = "Welcome to learn JavaScript In C# cornner";  
  22.         }  
  23.         function list() {  
  24.             var l1 =document.getElementById("Items");//list includes the button innerHTML  
  25.             l1.innerHTML = "<li>HTML</li><li>CSS</li><li>JavaScript</li><li>PHP</li><li>Angular</li>"  
  26.         }  
  27.     </script>  
  28.     <button type="button" onclick="show()">Message</button>  
  29.     <button type="button" onclick="list()">List</button>  
  30. </body>  
  31. </html>  
Output
 
Document Object Model In JavaScript
 
Document Object Model In JavaScript
 

Inner Text

 
The innerHTML returns the normal text of the specific element without HTML interpretation. It is used to create dynamic web content, show validation messages, and password strength.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>DOM property</title>  
  5. </head>  
  6. <body>  
  7.     <h2>DOM innerText property</h2>  
  8.     <p id="para1">JavaScript is used along with <b>HTML</b> and CSS.</p>  
  9.     <form name="form1">  
  10.     <br>Name:  
  11.     <input type="text">  
  12.     <br><br>Password:  
  13.     <input type="Password" value="" name="pass" onkeyup="msgs()">  
  14.     strength: <span id="str">poor</span>                            <!--below five character the password sterngth will be show poor -->  
  15.     <br>  
  16.     <input type="button" value="submit" onclick="show1()">  
  17.     </form>  
  18.     <script type="text/javascript">  
  19.         var = document.getElementById("para1")  
  20.         function msgs()   
  21.         {  
  22.             var char1;   
  23.             var len = document.form1.pass.value.length;  
  24.             if (len > 5)  
  25.             {  
  26.                 char1="good";  
  27.             }  
  28.             else  
  29.             {  
  30.                 char1="poor";  
  31.             }  
  32.             document.getElementById("str").innerText="char";    
  33.         }  
  34.     </script>  
  35. </body>  
  36.   
  37. </html>  
Output
 
Document Object Model In JavaScript
 

Summary

 
In this article, we have seen some Document Object Methods in JavaScript. I hope this article was useful to you. Thanks!


Similar Articles