---
title: "What is HTML DOM?"  
description: "What is HTML DOM?"  
author: "Ravi Vishwakarma"  
published: 2021-07-19  
canonical: https://answers.mindstick.com/qa/93743/what-is-html-dom  
category: "web application"  
tags: ["web application development", "javascript", "web development"]  
reading_time: 4 minutes  

---

# What is HTML DOM?

What is [HTML](https://www.mindstick.com/articles/1530/design-a-simple-stylish-calculator-using-html-css-and-javascript) [DOM](https://www.mindstick.com/blog/304003/what-is-the-difference-between-virtual-dom-and-shadow-dom)?

## Answers

### Answer by user

JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page. When the page loads, it is called an event. When the user clicks a button, that click too is an event. Other examples include events like pressing any key, closing a window, resizing a window, etc. Developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable. Events are a part of the Document Object Model (DOM) Level 3 and every HTML element contains a set of events which can trigger JavaScript Code. Here we will see a few examples to understand a relation between Event and JavaScript In JavaScript many types of events, onchange, onclick, onmouseover, onmouseout, onkeydown, onload, onblur, ondrop, onfocus, etc. **Onclick event** This is most frequently used event type which occur when a user click the button of his mouse. **Somejs.js**

```
function changeColor() {
        var name = window.document.getElementById('color');
        alert('Your selected color is : ' + name.value);
        name.style.backgroundColor = name.value;
        window.document.body.style.backgroundColor = name.value;
    }
```

**Some.html**

```
<!DOCTYPE html>
<html lang='en' xmlns='http://www.w3.org/1999/xhtml'>
<head>
    <meta charset='utf-8' />
    <title>JS Demo</title>
    <style type='text/css'>
        * {
            margin:10px;
            padding:0px;
        }
        select {
            width:100px;
        }
    </style>
    <script src='JavaScript.js' type='text/javascript'></script>
</head>
<body>
    <span>Select Color name  : </span>
    <select name='color' id='color' >
        <option value='red'>Red</option>
        <option value='yellow'>Yellow</option>
        <option value='white'>White</option>
        <option value='pink'>Pink</option>
        <option value='green'>Green</option>
    </select>
    <button type='button' onclick='changeColor()' value=' Submit '> Submit </button>
</body>
</html>
```

\

### Answer by user

When a web page is loaded, the browser creates a Document object model of the page. • JavaScript can change all the HTML elements in the page • JavaScript can change all the HTML attributes in the page • JavaScript can change all the CSS styles in the page • JavaScript can remove existing HTML elements and attributes • JavaScript can add new HTML elements and attributes • JavaScript can react to all existing HTML events in the page • JavaScript can create new HTML events in the page The HTML DOM is a standard object model and programming interface for HTML in DOM. • The HTML elements as objects • The properties of all HTML elements • The methods to access all HTML elements • The events for all HTML elements The HTML DOM is a standard for how to get, change, add, or delete HTML elements. **Finding HTML elements** document.getElemntById(id) document.getElemntsByClassName(class-name) document.getElemntsByTagName(tagname) **Changing HTML element** element.innerHTML element.attribute element.style.property **Adding events handler** document.getElementById(id).event-name= function-name(){ Function body } \

### Answer by Ethan Karla

The Document Object Model is a standard of the W3C (World Wide Web). It defines the standard for accessing a document. In other words, the Document Object Model provides a platform for programs and scripts to dynamically access and update the structure, style, and content of a document. The Document Object Model is a W3C (World Wide Web) standard. It defines the standard for accessing a document. In other words, the DocumentObject model provides a platform for programs and scripts to dynamically access and update the structure, style, and content of a document.

## feature of javaScript

1. Javascript can access and change all the tags of the webpage.
2. Javascript can access and change all the attributes of the webpage.
3. Javascript can remove old html elements such as Tags, Attributes from the webpage.
4. New tags and attributes can be added to the webpage by Javascript.
5. Javascript can change all the CSS styles of the webpage.
6. New events can be created by Javascript.

```
 NOTE: Document means Webpage.
Object means different elements like tags, attributes etc.
Model means texture or structure.
```

Example

```
<!DOCTYPE HTML><html><head>  <title>About elk</title></head><body>  The truth about elk.</body></html>
```

## DOM represents HTML as a tree structure of tags

![What is HTML DOM?](https://answers.mindstick.com/questionanswer/21e6fd39-8bd2-4d95-af22-ffcb9c0b58d9/images/8409ca33-9e0b-4bde-ba1f-6f898ea1b39e.png)\


---

Original Source: https://answers.mindstick.com/qa/93743/what-is-html-dom

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.
