Document Object Model (DOM) is an Application Programming Interface (API) for manipulating HTML documents. When a webpage is loaded, the browser creates a DOM of the page. It defines a logical structure of documents and the way a document is accessed and manipulated. Using JavaScript in a HTML webpage is to make our page more interactive and dynamic. The DOM provides the mechanism for JavaScript to achieve this. It is an interface that allows a programming language to manipulate the content, structure, and style of a website.
DOM represents an HTML document as a tree of nodes. DOM is cross-platform and language independent way of manipulating HTML and XML documents.
HTML DOM model is created as a tree of Objects. With the Object model, JavaScript gets all power it needs to make dynamic HTML.
- JavaScript can change all HTML elements in a page.
- JavaScript can change all HTML attributes in the page.
- JavaScript can change all the CSS styles in the page.
- JavaScript can remove existing HTML elements and attributes.
- JavaScript can add new HTML elements and attributes.
- JavaScript can react to all existing HTML events in the page.
- JavaScript can create new HTML events in the page.
<html>
<head>
<title> DOM Example </title>
</head>
<body>
<p>DOM Tree</p>
<p id =’text’> This is a DOM tree </p>
</body>
</html>
The DOM represents a document as a hierarchical tree of nodes which have root node and child nodes. One characteristic of DOM is how it handles attributes. Attributes are property of the element node and are made up of name and value pair. Also, there are several node types in the tree each representing different information or markup in HTML document.
Four main nodes:
Document node:
It is the root node added at the top of tree and represents entire page in the browser. It is the starting point in DOM tree, and you need to navigate via this node to access any other node in DOM tree.
Element node:
All HTML elements like heading tags <h1>…<h6> , paragraph tags <p> are element nodes. You need to navigate via these nodes to gain access to its attributes and text.
Attribute node:
The opening tag in an HTML document contains attributes. These are not children of element node but part of them.
Text node:
Text content within the element are stored here. These nodes cannot have further child nodes.
JavaScript-HTML DOM Methods
- HTML DOM methods are actions you can perform on HTML elements
- HTML DOM properties are values of HTML elements that you can set or change.
How to access HTML elements in a HTML page.
- Finding HTML elements by id
Get one of HTML object which have an id attribute.
document.getElementsById( );
- Finding HTML elements by tag name
Get one or more of a HTML tag.
document.getElementsbyTagName( );
- Finding HTML elements by class name
Get one or more of HTML object which have a class attribute.
document.getElementsbyTagName( );
- Finding HTML elements by CSS selectors
Get the first of HTML object which is a CSS selector element.
document.querySelector( );
- Finding HTML elements by querySelectorAll
Get the one or more of HTML object which is a CSS selector
document.querySelectorAll( );
Changing HTML Content
The innerHTML is a property of Element which is useful for getting or replacing the content of HTML elements.
Reading the innerHTML property of element
let content = element.innerHTML;
Setting the innerHTML property of element
Element.innerHTML = newHTML;
Do not use innerHTML to set a new content that you have no control over to avoid a security risk.
DOM Manipulation
Another technique to add/remove HTML content is DOM Manipulation.
Create a HTML element
document.createElement(element)
Remove a HTML element
document.removeChild(element)
Add a HTML element
document.appendChild(element)
Replace a HTML element
document.replaceChild(new,old)
Write into the HTML output stream
document.write(text)
Conclusion:
Hence so far, we have discussed the various aspects of Document Object Model (DOM)