HTML, CSS, and JavaScript are essential technologies for modern web development. By combining these technologies, web developers can create dynamic and interactive web applications. HTML supplies the static structure of a web page, CSS includes the style, and JavaScript adds interactivity.
To provide this interactivity, JavaScript uses an object model known as the DOM. Here, you will learn what DOM is, its hierarchical structure, and how HTML DOM can be used to access and manipulate different web page elements. So, let us start with what is the HTML DOM in JavaScript.
What is Javascript HTML DOM?
The DOM, also known as Document Object Model, represents and modifies HTML documents. The document object model is a standard object model that allows programs and scripts to dynamically access and update an HTML document’s content, structure, and style.
The results can be incorporated into the website if the document is further processed. Scripting the document object model also enables programmers to dynamically create, modify or change any document’s content, structure, or style.
Structure of Javascript HTML DOM
On the backend, the DOM of an HTML document is represented by a tree structure whose nodes are the HTML document’s elements. The root of this tree structure is the element, and all other elements are children of this root node. Using this tree structure of the DOM, we can traverse every element on our website. Suppose that my website has the following HTML document:
<!DOCTYPE html>
<html>
<head>
<title>Javascript HTML DOM </title>
</head>
<body>
<h1>Welcome to AlgoIdeas</h1>
<div>What is the Javascript HTML DOM?</div>
</body>
</html>
Then the DOM of this HTML document will have the following hierarchy:
DOM Manipulation
To take advantage of the scripting capacities of the DOM, the programmer must be able to manipulate the HTML document using the functionalities provided by the DOM. The document object model treats the entire HTML document as a single object.
By using the dot (.) operator, programmers can access various pre-defined methods to accomplish various tasks as follow.
- Adding new HTML elements to the website.
- Removing existing elements.
- Editing the content of existing elements.
- Changing the structure and content of their website dynamically.
Some of the most important methods in the DOM are:
getElementById()
This method returns the HTML element whose ID is given as an input parameter. If the element does not exist, the method returns null. In the above-given HTML page, we can access the DIV element using the code:
var myDivTag = document.getElementById("myDIV");
getElementsByTagName()
This method is similar to the getElementById method, but this method takes the HTML tag as an input. To access the DIV element using this method, we can use the following code:
var myDivTag = document.getElementsByTagName("div");
If there is more than one div element on the page, this method will return an array of all div elements which can be traversed by indexing i.e. myDivTag[0].
CreateElement()
This method is used to create new HTML elements whose tag is given as an input parameter to the function.
var newElement = document.CreateElement("p");// Create a new paragraph tag.
InnerHTML()
This method is used to change the inner content of any HTML element. It can be used to create content inside newly create elements or change the content of existing elements.
var myDivTag = document.getElementById("myDIV");myDivTag.InnerHTML="<div>Newly edited content</div>";
AppendChild()
This method is used to link newly created elements with already existing elements, thus making them a part of the HTML document. It can also be used to change the structuring of your HTML page.
var myDivTag = document.getElementById("myDIV");var newElement = document.CreateElement("p");newElement.InnerHTML="<p>This is a new paragraph.<\p>";myDivTag.AppendChild(newElement);
This will make newElement a child of myDivTag thus making it a part of the website and the DOM will also be changed to reflect the updated document.
