What is DOM?

What is DOM
What is DOM

If you are new to the web development world then you should have a questions like what is a DOM, what it is used for, how to use it, how to learn dom etc. So now in this article, we are going to explore answer of all those questions. So now, first of all, let’s understand what is dom actually?.

The Document Object Model means DOM is a programming API (Application Programming Interface) for HTML and XML documents. Not getting it? okay, don’t worry let’s make it easier.

Whenever you load any webpage on your browser your browser creates Document Object Model of your webpage (HTML document). The structure of this model is like a tree of objects and nodes. In DOM, the document is represented as objects and node associated with each other so it can also be called an Object-oriented form of the document. Dom is a logical structure of HTML or XML document to access and manipulate that document. The W3C has standardized mainly three model HTML model, XML model, and Core mode.

What is HTML DOM?

HTML DOM(Document Object Model)
HTML DOM (Document Object Model)

Html dom is the document object model for HTML document. In HTML document, a document is the main object. Everything in HTML document is considered as a node, for example, different elements are element nodes, text within elements called text nodes, attributes of elements called attribute nodes and all nodes are objects in DOM. For an example:

<!DOCTYPE html>

<html>
<head>
<title>Home Page</title>
</head>
<body>
<h1> This is a header tag </h1>
<p> This is just an example of paragraph</p>
<img src=”img.jpg”>
</body>
</html>

Here in Document Object Model every element, text and attribute is node and considered as object in model. In DOM every object and node has relation with each other like parents, child and sibilings. Here in the above example <html> has two child <head> and <body> and <html> is called parent of both. <head> has one child <title> and <body> has three childs <h1>, <p>, and <img> and here <h1>, <p> , and <img> called siblings of each other.

What is the use of DOM?

The main use and the reason to create the DOM of the document is to access and manipulate the content of the document. You can use different types of programming languages to access and manipulate the content of the document but JavaScript the standard and widely used language for DOM manipulation. Using JavaScript you can do different things like to show or hide content, changing the style of the content, changing the content of elements etc.

As we already know JavaScript is the standard language for DOM manipulation, JavaScript has so much power and features to do a different type of things with DOM.

What you can do with DOM using JavaScript

  • Change the style of different elements
  • Change the content of elements like text, image etc.
  • Add new HTML elements
  • Remove Existing elements
  • Add or remove attributes of elements
  • Change attributes of elements
  • Perform different actions on different events like Onclick, Onload etc. (Event handling)
  • Add new events

How to access and change elements of DOM:

There are several ways to access and modify the contents of the DOM using javascript because JavaScript is the standard language used for DOM manipulation. JavaScript has so many methods available for different operation.

How to access DOM elements?

The the most used method to access the dom id is getElementBy. There are three methods to access dom elements:

  •  getElementById(“id name”): This method is used to access element using it’s id.
  •  getElementByClassName(“class name”): This method is used to access multiple elements using it’s class name.
  •  getElementByTagName(“tag name”): This method is used to access multiple elements using it’s tag name.

There are several other ways also available to access elements of the document.

How to change content using DOM?

  • Using .innerHTML=”Simple text” method you can change the content of the elements.
  • Using .attribute=”attribute value” method you can change the content of the elements.
  • Using .setAttribute(attribute name, attribute value) method you can change the content of the elements.
  • Using  .style.property=”new property value” method you can change style of the elements.

How to add or remove elements using DOM?

  • document.createElement(element) method is used to create new element.
  • document.removeChild(element) method is used to remove the existing element.
  • document.appendChild(element) method is used to add created element. Before appending new element first you have to create a new element using the first method.
  • document.replaceChild(element) method is used to replace element.

How to handle an event using DOM?

You can also use the DOM to handle different types of events. JavaScript provides different ways to handle and perform different actions on the occurrence of different events. For example:

document.getElementById(“id”).onclick=function() {
document.getElementById(“one”).innerHTML=”Simple Text”;
}

there are so many events are available for HTML DOM like onclick(), onblur(), onload(), onmouseover() etc.

Now let’s understand by example:

<!DOCTYPE html>
<html>
<head>
<title>Home page</title>
</head>
<body>

<div id=”div”>
<h1>What is DOM</h1>
<p id=”one”></p>
<img src=”one.jpg” id=”two”>
<button id=”three”>Click</button>

</div>

</body>
</html>

Here every JavaScript code is written within <script>and </script>.

Changing the content of an element

document.getElementById(“one”).innerHTML=”Simple Text”;

here document is used to access the main document.

Changing the style of an element

document.getElementById(“one”).style.color=”gray”;

Now the color of the font within the element with id one will be changed to gray. Here text of the element is Simple text.

Changing the attribute of the element

document.getElementById(“two”).src=”second.jpg”;

Now image with id two will be changed.

Handling event using DOM

document.getElementById(“three”).onclick= function() {
document.getElementById(“one”).innerHTML=”You have clicked”;
}

Whenever anyone click button with id three then the content of the element with id one will be changed.

How to create an element for DOM?

var one= document.createElement(“h1”);
var content=document.createTextNode(“What is HTML”);
one.appendChild(content);

First, we have created the h1 element using the createElement method then created text node What is HTML. Then in third line text node is inserted to h1 element.

How to add created element in a document using DOM?

var ele= document.getElementById(“div”);
ele.appendChild(one);

First, get the main element in which you want to add a newly created element. Then insert newly created element.

How to remove an element using DOM?

var main= document.getElementById(“div”);

var child=document.getElementById(“one”);

main.removeChild(child);

The first line is used to get the parent element of the document then the second line used to get the child element which you want to remove. And in third line element is removed.

How to replace an element using DOM?

var main=document.getElementById(“div”);

var child=document.getElementByTagName(“h1”);

main.replaceChild(one, child);

Here we are going to replace the H1 element with a previously created element. The first line to select the parent, second line to select element to be replaced and then the third line replace the new element with old element.

About Geek Kishan

Tech enthusiast | Geek | Programmer | Web developer | Introvert. Love to read and write about technology. I want to share my little knowledge with the world hoping that it will help someone.

View all posts by Geek Kishan →

Leave a Reply

Your email address will not be published. Required fields are marked *