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.
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.
var p = document.querySelectorAll('p'); p.style.background = 'red'; p.style.background = 'blue';
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'] console.log(myArray);
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.
var p = document.getElementsByName('myParagrpah') var div = document.getEelementsByClassName('box') var input = document.getElementsByTagName('input') var span = document.querySelectorAll('span')
Hope this article helps you in understanding about Document Object Model. For more Tutorial go to our site advdev.net