What is DOM (aka Document Object Model)

Learn what a Document Object Model aka DOM in JavaScript is. This video will help you gain understanding about the DOM in a visual manner.

Full Transcript

0:00 Hey there. It's Harit Himanshu from bonsaiilabs. Welcome to the series on JavaScript. Today. In this video, you will learn about document object model in JavaScript. Before we dive into DOM, let's understand a few important parts of the browser. As you see, I have two tabs open in Google Chrome. The first thing to know is the navigator. A navigator represents the state and the identity of the browser. It contains information such as operating system, software vendor, or software version of the browser. The second thing to know is the window. The window is the browser tab where the webpage is loaded. With window, You can control the entire browser tab. The final thing is the document. This is where the web pages are loaded. As the web developers, the HTML and CSS that we write are loaded into the document, so the document that we see on the browser is the combination of HTML and CSS source files that are loaded into the browser.

0:54 You can confirm this by making the right click on the document and clicking the view page source. This will show you the source that is same as the one that is written for the browser. Okay, so now that we know about the document and that it contains the visual representation of the source loaded into the browser, what is DOM? A DOM is an object oriented representation of the document that we see in the browser. As an object, it gives you the properties and methods that you can use to query and manipulate the documents programmatically. DOM is defined as the standard on W3C which says DOM is a platform and language-neutral interface that allows programs to dynamically access and update the content, structure and the style of documents. Which means DOM can be programmed and executed on any available platforms such as Mac, PC, or Linux.

1:43 And it is available to be programmed by many languages such as JavaScript, python and Java. So now that we have seen what a DOM is, let's understand the few fundamental data types of DOM. The first data type is called document. Visually it is the entire page where the document is loaded into the browser. Next, Every tag that you see inside the document is a node data type. A node is a generic data type for every object that exists in the document. There's another data type called element which specifies what type of node it is. It gives information about the HTML elements such as div, H1, H2 and so on. Another data type in DOM is called node list. You get the node list when there are more than one element returned in the query process such as all the child nodes for an unordered list.

2:32 Now there is another data type called as attribute. The attributes are the properties that are optionally available on the elements. They have a name property when accessing using the DOM API. For example, style is the name of the attribute and blue color is the value of the attribute. The final data type of DOM is called NamedNodeMap. It represents the collection of attributes available on the node. For example, if we query all the attributes for the H1 tag our code, we will get a NamedNodeMap back, which contains the attributes indexed by their position and also by their name. And that's it. In the next video, I will show you hands on examples to query and manipulate the DOM. I hope you learned something new today. If you liked the video, please hit the subscribe button on our channel to receive more engaging content about JavaScript every single week. Until then, keep learning new skills and apply them regularly to become an expert programmer. There is literally everything possible. Once you set your mind to achieve it, see you next time.