April 15, 2021

Programmingempire

In this article on Introduction to HTML DOM Methods in JavaScript, I will explain the HTML DOM methods and their examples. To begin with, in the earlier post on Document Object Model (DOM), its basic concept is explained. Basically, the JavaScript API for HTML DOM comprises several methods that allow us to add, update, and remove HTML elements on a web page.

Important HTML DOM Methods in JavaScript

The following are some important HTML DOM methods available in JavaScript.

Basically, the getElementById() method is used to retrieve an HTML element whose id we pass as a string parameter to this method. In other words, this method determines the id of which element matches with the string parameter and returns that element. For Example:

var ob=document.getElementById('paragraph1');

where paragraph1 is the id of a paragraph in the HTML document.

Another HTML DOM method is getElementsByClassName(). Instead of returning a single element, this method returns a collection of elements whose class name matches with the string parameter passed to this method. Also, it is possible to pass more than one class as a parameter to this method. For example,

var elements=document.getElementsByClassName("c1");
var moreelements=document.getElementsByClassName("c1 c2 c3");

where c1, c2, c3 are the name of classes used in the HTML document.

Likewise, the getElementsByTagName() is a HTML DOM method that also returns a collection of HTML elements. Basically, this method takes a string parameter and determines the corresponding HTML tag. Further, it returns all HTML elements belonging to that HTML tag on the web page. For example,

var alldivs = document.getElementsByTagName('div');

Hence, the variable alldivs will be assigned the collection of all div elements on the web page.

HTML DOM Methods for Adding and Removing Child Elements

Similarly, we have another HTML DOM method called createElement() that we can use to create an HTML element dynamically. Basically, this method takes as a parameter the name of an HTML tag. Further, it creates that HTML element and returns it. The following example shows the usage of this method.

var mydiv=document.createElement('DIV');

The above example creates a DIV element in the HTML document.

For the purpose of appending a node as the last child of another node, you can use the appendChild() method. Basically, this method appends a node to a specific element as the last child node. The following example shows the usage of this method.

var mydiv=document.createElement('DIV');
document.body.appendChild(mydiv);

The above code adds a new DIV element in the document body.

Basically, the removeChild() method eliminates a particular node from the document and also returns the eliminated node. The following example demonstrates this method.

var mydiv=document.getElementById('div1');
var mylist=document.getElementById('list1');
var removednode=mydiv.removeChild(mylist);

As can be seen, the above example removes an element with id as list1 from a DIV element.

Programmingempire

Important HTML DOM Methods in JavaScript

HTML DOM Methods for Adding and Removing Child Elements

Further Reading

You may also like...

How to Handle Mouse Events in JavaScript

Understanding JSON Web Tokens

Creating Classes in JavaScript