The representation of an HTML document inside a web browser is treated as an HTML DOM tree. It is a series of objects and defines the structure of a web page.

What is DOM in JavaScript?

Overview

Welcome to another exciting blog post in the series of JavaScript programming. In this article, we are going to touch on a very basic but essential concept of web development. Yes, we are going to cover Document Object Model in JavaScript. In the past, we have published JavaScript tutorials that are mandatory to start development using JavaScript language. Therefore, we suggest you read this blog post thoroughly so that you don’t miss anything related to this important concept. Let’s start this guide and find out what is DOM in JavaScript, DOM properties, and how you can interact with it programmatically.

We will cover the following topics in this JavaScript guide:

What is Document Object Model(DOM)?

DOM stands for? Document Object Model(DOM) is the representation of a web page inside a web browser. Simply, the hierarchical representation of the elements of an HTML document in a browser is known as Document Object Model. It is formed in a tree shape that is actually generated by the web browser. It consists of various nodes which are connected to one another forming a tree shape. In addition, DOM elements have attributes and events attached to them. In fact, DOM is a programming interface that formulates the logical structure of a web page and dictates the way to access page elements. Basically, JavaScript does not recognize HTML tags such as title, H1 and etc. Therefore, once an HTML document is loaded into a web browser, DOM is created which then makes it possible for JavaScript to understand the document elements.

DOM levels

This section will demonstrate the various levels of DOM. First, there is a window object in a browser that is always on top, and then there is a document node. Let’s have a look at the image below:

DOM levels

Well, you can see the DOM elements in the picture above. Window and Document are the top-level browser objects and then we have the HTML element as the root. Moving on, we have the Head and Body nodes, Title node belongs to the Head node and the Body node contains all the nodes that are rendered and visible in the web browser. Moreover, body elements contain attributes we can see in the image such as anchor tag containing “href” attribute. Similarly, other DOM nodes contain various attributes such as img, meta, and more.

What are DOM properties and how to access them?

So far, we have come up with an answer to what is DOM in JavaScript, and DOM levels, and we have also gone through DOM nodes. In this section, we will go through DOM properties and will see how can we interact with them. Every DOM element has a value linked to it such as “p” tag has text property, img tag has the image and so on. JavaScript methods are used to access the values of nodes. Further, you can add/remove event listeners to the DOM elements.

You can find the following DOM properties:

innerHTML: This property is used to set or fetch the HTML content of a DOM node.

let htmlContent = document.getElementById("customID").innerHTML;

innerText: Use this DOM property to access or set the textual content of an HTML element.

let textualContent = document.getElementById("customID").innerText;

parentElement: You may use this property to access the parent node of the element.

let parentNode = document.getElementById("customID").parentElement.nodeName;

style: Update the style attribute of an element.

let styleAttr = document.getElementById("customID").style.color = "red";

title: Use this property to update the title element of DOM.

document.getElementById("customID").title= "this is a web page";

The following are some of the methods we can use to interact with JavaScript DOM:

addEventListener(): This DOM method is used to attach an event handler to an element.

document.getElementById("customID").addEventListener("click", customFunction);

getAttribute(): This DOM method is used to attach an event handler to an element.

document.getElementById("customID").addEventListener("click", customFunction);

getElementById(): Method to get a specific element with the given “id”.

let element = document.getElementById("myID");

querySelector(): Use this method to get the first child element that is being matched with a CSS selector.

document.getElementById("myID").querySelector(".first").innerHTML = "change the value";

toString(): You can use this method to convert an element into a string.

Likewise, there are many other methods and properties that you can explore.

Conclusion

We are ending this JavaSxcript tutorial here with the hope you have a good understanding of what is DOM in JavaScript. We also have gone through DOM, DOM levels, HTML DOM tree and DOM properties. This blog post is highly essential for newbies who are looking to have a strong grip on JavaScrit concepts. In addition, there are other relevant articles you can find in the “See Also” section.

Connect with us

Finally, containerize.com offers ongoing JavaScript tutorials on various exciting topics. You can stay in the loop by following us on our social media platforms, including Facebook, LinkedIn, and Twitter.

Ask a Question

You can let us know about your questions or queries on our forum.

FAQs

What is DOM used in JavaScript?

You can visit this link to get a detailed answer to this question.

See Also