DOM Methods in JavaScript – Easy Tutorial for Beginners

DOM Methods in JavaScript – Easy Tutorial for Beginners

This article is all about DOM Methods in JavaScript that will cover all aspects to play with HTML Elements like adding, removing, getting and changing elements in HTML Document. DOM stands for “Document Object Model” and it refers to a structure of document where all the elements have an hierarchy and each element is related to one and another and these elements can be accessed by programming languages like JavaScript.

This article on DOM methods in JavaScript is divided into two parts

  1. Basic DOM Methods
  2. Advanced DOM Methods

Basic DOM Methods

Basic DOM Methods start with basic manipulation of HTML Elements that is done by JavaScript, I will start from very normally used methods in JavaScript to make the things happen.

  1. The getElementById Method: It is very first and common way to access HTML elements as method itself defines getting element by its “Id”, here it will directly pick that id element which will be put in “getElementById” Method.
  2. The innerHTML Property: innerHTML Property access content stored in a HTML element. We can anytime change the content with our desired content by using this property. Now both the point can be explained through a illustration, Lets see How its done!.

Example:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Demo</h1>
<p id="para1">Hello!</p>
<script type="text/javascript">
document.getElementById('para1').innerHTML = “Hello World!”;
</script>
</body>
</html>

Explanation:

Now, You can see in above example I have used “getElementById” method that catch the <p id=”para1″> tag element and innerHTML access content of that element and changes the content from “Hello” to “Hello World!”.

  1. The getElementByTagName Method: This method is just simply used to access any set of particular tags in HTML Document. Be it <h1> tags, <p> tags or <a> tags etc. User can select any element by writing this method and can also make desired changes.

Example:

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Demo</h1>
<p>Hi</p>
<p>Hello</p>
<p>How are you</p>
<p id="msg"></p>
<script type="text/javascript">
var x = document.getElementsByTagName('p');
var y = document.getElementById('msg').innerHTML = "Message: " +x[0].innerHTML;
</script>
</body>
</html>

Explanation:

In above example, getElementsByTagName has been used to select all <p> tags and to set a length that is stored in variable x. Variable y has been declared to fetch the innerHTML value to <p id=”msg”> tag with id named “msg”.

And in innerHTML there is a string stored “Message: ” +x[0].innerHTML; where x[0] gets first <p> tag innerHTML.

  1. DOM Collection: DOM offers us various element collection properties in a web page using JavaScript. UI developers can easily select many elements using them.
  • document.forms – collect all the forms in your document.
  • document.images – collect all the images available in your web page for you.
  • document.links – select all the link in your document.
  • document.anchors – select all the anchors in your document.

Note: all the above collection methods create an array always even if you have only one element in your web page e.g. ‘document.forms[0]’ selects the first form given in your website.

Advanced DOM Methods

There are some advanced DOM Methods that covers all rest manipulation techniques to allow a user for finding, changing, adding and deleting elements. All we need to write some simple syntax then all the things will happen accordingly.

  1. element.setAttribute(attribute, value): This method is very useful when we have to change the value of any attribute given within a tag. A theme changer can be a great example of this method which is as follows.

Illustration:

<!DOCTYPE html>
<html>
<head>
<link id="linkCss" rel="stylesheet" type="text/css" href="css/default.css">
</head>
<body>
<button onclick="theme(css/default.css)"></button>
<button onclick="theme(css/default.css)"></button>
<button onclick="theme(css/default.css)"></button>
<script type="text/javascript">
function theme(sheet) {
document.getElementById('linkCss').setAttribute('href', sheet);
}
</script>
</body>
</html>
  1. element.style.property = new style: This method is used to add CSS style to any element. Now, by this technique anyone can add styles to any text, images or link without writing CSS. JavaScript made it so easy.

Illustration:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p id="demo">Hello Javascript!</p>
<script type="text/javascript">
document.getElementById('demo').style.color = "red";
</script>
</body>
</html>

Explaination:

It’s a simple example of adding CSS to any element as explained above. Here I have changed the text color of <p id=”demo”> tag to red, I have just selected Id “demo” by using getElementById and changed the color with style property.

  1. document.createElement: Create Element method creates elements anywhere in the document. All we need is to write document.createElement to create an element that could be appended under any element.
  2. document.appendChild: appendChild Works for adding newly element to its parent. It makes that element last child and appends to it parent element.
  3. document.removeChild: Now, removing html elements is so easy by this method. Elements can be removed under any parent or parent itself by just using simple technique.
  4. document.replaceChild: replace child simply replaces element with our desired element when changes needed.

Now I am going to show an illustration which is based on all above points from 3rd point to 6th point.

Example:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.center {
text-align:center; 
}
</style>
</head>
<body>
<div id="table">
</div> 
<script type="text/javascript">
var getTable = document.getElementById('table');
var table = document.createElement('table');
table.setAttribute('width', '500px');
table.setAttribute('align', 'center');
table.setAttribute('border', '1');
table.setAttribute('cellpadding', '10');
table.setAttribute('cellspacing', '10');
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
var tr = document.createElement('tr'); 
var heads = ['Name', 'Age', 'Designation'];
for (var i = 0; i < heads.length; i++) {
var th = document.createElement('th');
th.innerHTML = heads[i]; 
tr.appendChild(th);
}
var dt1 = ['Faizan', '20', 'Process Associate'];
var tr1 = document.createElement('tr');
for (var i = 0; i < dt1.length; i++) {
var td = document.createElement('td');
td.setAttribute('class', 'center');
td.innerHTML = dt1[i]; 
tr1.appendChild(td);
}
var dt2 = ['Mukesh', '25', 'Developer'];
var tr2 = document.createElement('tr');
for (var i = 0; i < dt2.length; i++) {
var td = document.createElement('td');
td.setAttribute('class', 'center');
td.innerHTML = dt2[i]; 
tr2.appendChild(td);
}
var dt3 = ['Imtiyaz', '23', 'Angular JS Developer'];
var tr3 = document.createElement('tr');
for (var i = 0; i < dt3.length; i++) {
var td = document.createElement('td');
td.setAttribute('class', 'center');
td.innerHTML = dt3[i]; 
tr3.appendChild(td);
}
var dt4 = ['Bhaskar', '26', 'Software Developer'];
var tr4 = document.createElement('tr');
for (var i = 0; i < dt4.length; i++) {
var td = document.createElement('td');
td.setAttribute('class', 'center');
td.innerHTML = dt4[i]; 
tr4.appendChild(td);
}
var dt5 = ['Lalit', '27', 'PHP Developer'];
var tr5 = document.createElement('tr');
for (var i = 0; i < dt5.length; i++) {
var td = document.createElement('td');
td.setAttribute('class', 'center');
td.innerHTML = dt5[i]; 
tr5.appendChild(td);
} 
thead.appendChild(tr);
table.appendChild(thead);
table.appendChild(tbody);
tbody.appendChild(tr1);
tbody.appendChild(tr2);
tbody.appendChild(tr3);
tbody.appendChild(tr4);
tbody.appendChild(tr5);
getTable.appendChild(table);
</script>
</body>
</html>

Explanation: Here I have made a complete table without writing any single element in HTML. I have just used few methods of DOM in JavaScript such as createElement, removeElement, setAttribute and appendChild to generate the table. Start from <div id=”table”> that I have put in HTML and then rest of the things have been done by JavaScript.

While learning Javascript, I have made a global var named getTable that access the <div id=”table”> tag in HTML, then I have written a var named table that creates an element <table></table>. Further I have set some attributes like width, align, border, cellspacing and cellpadding to give the table a proper look. Further I have again made two var that creates two element <thead></thead> and <tbody></tbody>. Same as I created two more elements <th></th>, <td></td> by variable. Then I have made arrays to store the information displayed in table and used loop to run the code continuously and at the last I have appended all variable(child elements) to its parent element.

Leave a Reply

You must be logged in to post a comment.

Copy link