Make Web Pages Dynamic by Manipulating the DOM

Photo by Markus Spiske on Unsplash

Making websites dynamic is important for a lot of websites. Many of them have animations and dynamically display data. To change data without refreshing the page, we have to manipulate the document being displayed. Web pages are displayed in the browser by parsing them in the tree model called the Document Object Model (DOM).

The DOM tree is made up of individual components, called nodes. All web pages’ DOMs start with the root node, which is the document node. The node under the document node is the root element node.

For web pages, the root element node is the HTML node. Below that, every other node is under the HTML node, and there lie nodes below some of the nodes which are linked to the parent node. Together, the nodes form something that’s like an inverted tree.

There are several types of nodes in the DOM:

• Document node — the root of the DOM in all HTML documents
• Element node — the HTML elements
• Attribute nodes — attributes of the element nodes
• Text nodes — text content of HTML elements
• Comment nodes — HTML comments in a document

Relationship of Nodes