What is JavaScript Dom

Document Object Model in short we knew it as DOM. Dom is represented the data and content of the document. It is an interface of HTML or XML. Document Object Model represents our page hence we can change its style, its data, and structure also when the page load.

What is Document Object Model?

Document is our HTML or XML page. The page you see on your browser window is the document. That page is the source of HTML. The content of that page is showing by HTML tag (or you can say HTML code). The code of the HTML page or the tags of HTML tags are objects.

The document object model is the interface between JavaScript and HTML. The DOM provides a tree-like hierarchy of nodes that represent all the elements in an HTML page, including text nodes that contain text.

If you’re a developer, it’s likely that you’ve heard of the DOM. It was introduced by Netscape Communications Corporation in 1996 with JavaScript support added later on.

By using HTML tags / code we can manipulate the page. We can change its structure by using bellow code.



The document.querySelector() it will select an individual tag from HTML. You might be passed a value to the querysSlector(). As you pass any value to our querysSlector(), it will return you that as an object. Once it returns you correct value you can change their style by using ‘style’. Even you can also change its innerHTML too. These changes will show you up after page load.

Let see another example. In a document you have many p tags, you need to change their style. I’m going to show you how the document object model (DOM) works in JavaScript. I’ll be showing you what a DOM is, and how it interacts with your web browser.

var p = document.querySelectorAll('p');
p[0].style.background = 'red';
p[1].style.background = 'blue';

In the given example you put all the code in JavaScript. But it works with document object model. I mean JavaScript need an object every time, while u want to manipulate the HTML element.

The DOM is a hierarchical representation of all the elements in an HTML document, and it’s what gives you access to everything from text content to form inputs. In this blog post I’ll cover some of the basics for manipulating your HTML with JavaScript.

Why Should I use numbers with variables while accessing them in the Document Object Model?

It is very simple logic to understand this matter. You know about the array. When you create an array it stores the value at a special address. That array will access by the its address which is number these number are known as index. So we need to a number while accessing the array’s value. For more details check this code.

var myArray = ['value1', 'value2', 'value3', 'value3']


The output of above example is : value2

I hope you got my point now. When u create a variable and try to fetch all elements with it. It will create an array automatically. So when we need to access any of them you need a number with variable.

This will happen every time when u call any element from the document object model. There are a lot of objects are available in JavaScript which need strictly a number while u call them. Like this:

var p = document.getElementsByName('myParagrpah')

var div = document.getEelementsByClassName('box')

var input = document.getElementsByTagName('input')

var span = document.querySelectorAll('span')

All the above variable needs a number with them while accessing them anywhere in the JavaScript program. That is why need a number with it.

Document Object Model
Document Object Model

Hope this article helps you in understanding about Document Object Model. For more Tutorial go to our site advdev.net

Leave a Comment