What is Document Object Model (DOM) in HTML and Javascript?

What is Document Object Model (DOM)

Document Object Model (DOM) constitutes an integral web interaction tool that creates a virtual map of the web page that loads in the browser. It may also be labeled as a programming interface for both HTML and XML documents. Web programs manipulate the structure of the document, the style and its content due to the DOM, which has nodes and objects that form a document. Without this model, programming languages wouldn't work on a browser page. Usually, a browser contains the DOM, while JavaScript acts as the client-scripting language that completes the essential connection. JavaScript manipulates the DOM in nearly all website operations such as slideshows, providing an error report on submitting an incomplete form or even toggling navigation menus.

In simple terms, any web page that you encounter is a document. Viewing the document as an HTML source or in a browser window is just an approach of presenting one thing in different ways. The document object model (DOM) represents a webpage as objects to enable its manipulation. With the document-oriented model, a scripting language such as JavaScript may modify it by targeting the objects.

It is noteworthy that browsers have different standards and the most common are the W3C DOM and WHATWG DOM standards. This necessitates a compatibility check across standards.

For instance, the standard DOM implementation requires the getElementsByTagName method to show in the below yields <p> elements that are persistent in the document.

Assessing DOM Structure，you can refer to Document Object Model (DOM) Tutorial Series: Part 1.

Related Blogs

Understanding the DOM Tree and Nodes

This post is written as a guide to some of the concepts and terms related to the DOM tree and nodes.

You will often find the DOM (Document Object Model) being referred to as the DOM tree because of its nodes, which are trees of objects. In our short introduction to DOM, we looked at the concept behind the DOM. We were also able to differentiate the DOM from HTML source code and define instances where they are similar and dissimilar.

The aim of this post is to review some of the basic HTML terminology and also learn a bit more about DOM nodes. Understanding these concepts will help you when it comes to working on both DOM and JavaScript as well as in identifying common types of nodes. In a later tutorial we will also explore how to use JavaScript to make modifications to the DOM.

What Are Nodes in DOM

We have seen what constitutes an HTML document. In DOM terminology, all elements of an HTML document are nodes, including the entire document and all the HTML tags contained within it. To explain this, text constitutes text nodes, comments make up the comment nodes, while HTML attributes make up the attribute nodes.

Let's create a simple HTML document to explore these concepts further.

<html>
  <head>
    <title>DOM Series: Understanding the DOM </title> 
  </head> 
  <body> 
    <h1> DOM Tree and Nodes </h1> 
    <p>Hello DOM!</p> 
  </body> 
</html>

In the HTML document above, <html> is a root node within which all other nodes are contained. In other words, <html> is both the opening and closing of the document, which means in turn that the <head> and <body> are the children nodes of the <html> root node. Further down, then, the <head> node is the parent of the <title> node. The <h1> and <p> nodes are the children of the

node.

Node Design

In JavaScript, all HTML elements are handled as JavaScript objects, which are then arranged as a tree. Such an arrangement is possible since each node has specific properties or characteristics such as having a parent node, having sibling nodes, or having child nodes. A tree arises from a node's family of nodes.

When a node is saved in JavaScript, the family information in the tree is part of its node properties. We can have a property and children, which will have all its child nodes, and that is the logic that enables arranging the child nodes under the node in reference.

Learn How to Manage Nodes in the DOM

In this blog post, you will learn how you can add, change, replace and remove nodes in the DOM.

In previous blog posts, we have already explored how you can access DOM elements and handle the DOM, so from what we have learned so far, we can proceed to use classes, tags, ids, and selectors to look for nodes in the DOM. We can also further use the properties of parents, children, and siblings to find relative nodes in the DOM.

In this part of my tutorial series, you will learn how you can add, change, replace, and remove nodes in the DOM. We will be creating simple JavaScript projects where we can create, modify, and remove elements in the DOM. Our simple programs will be tailored towards the type of changes that are executed on the DOM.

If you work as a front-end developer, then you'll know that the DOM manipulation is routine business. While HTML is the default method, using JavaScript provides a greater level of flexibility and a larger number of features.

The Methods You Can Use with the DOM

In this tutorial, we will be looking at the methods outlined in the table below:

jcreateElement()
appendChild()
removeChild()
replaceChild()
addEventListner()
removeEventListner()
cloneNode()
insertBefore()
setAttribute()
getAttribute()
removeAttribute()

Accessing DOM Elements

This tutorial outlines how you can access DOM elements through ID, class, tag, and query selectors.

Previously, we looked at how the DOM is structured into trees and nodes, discussed some of the basics of getting elements in the DOM, and learned about three types of nodes, specifically text, comment, and element nodes. DOM content can be accessed through the element node.

Now, in this tutorial, we will be exploring the methods of accessing DOM elements through ID, class, tag, and query selectors. To follow this tutorial, you'll need to have working understanding of the HTML elements, CSS selectors, and the related syntax.

Related Products

Simple Application Server

Simple Application Server is a new generation computing service for stand-alone application scenarios. It provides one-click application deployment and supports all-in-one services such as domain name resolution, website publishing, security, O&M, and application management.

Elastic Compute Service

Deploy ECS instances with just a few clicks from the easy-to-use console and scale capacity up or down based on real-time demands.

Related Courses

Malicious Code Mechanism Deep Dive

For hosts running in a network environment, they are constantly facing attacks and damage from malicious code. These malicious codes are transmitted in a variety of ways, and the level of harm is not the same. Through this course, you can not only understand the common ways of malicious code classifying and spreading, but also have a deeper understanding of the attack principles of remote control, ransomware, and webshell.

JAVA Coding Standards in Alibaba Group

As one of the most popular programming languages, Java's usage in cloud application development is also very high. This certification exam is based on Alibaba's Java Coding Guidelines.

Community

What is Document Object Model (DOM) in HTML and Javascript?