---
title: "Document Object Model with HTML/JavaScript"
subject: "Web Technology"
chapter: 4
key: "semester_7/web_technology:dom-html-javascript"
source: https://www.bctengineer.com/q/semester_7/web_technology/dom-html-javascript
site: BCT Engineering
---

# Document Object Model with HTML/JavaScript

Web Technology · Chapter 4: Client-side scripting

- Asked in: 2076 Chaitra, 6 marks; 2074 Asoj, 6 marks (asked 2 times)
- Video: [What is DOM (Document Object Model) ? | Javascript Lecture 4](https://www.youtube.com/watch?v=hRaDYCHqFQQ) — Apna College
- Answer checked by Claude Opus 5.5 (high effort) on 2026-10-14
- Page: https://www.bctengineer.com/q/semester_7/web_technology/dom-html-javascript
- Whole chapter: https://www.bctengineer.com/md/semester_7/web_technology/chapter-4

## Question

What is Document Object Model (DOM)? Explain DOM on the basis of HTML / Javascript.

## Short answer

The DOM is a W3C standard tree of nodes representing an HTML document, accessible through the document object. JavaScript finds elements, changes content, style, attributes, adds or removes nodes, and handles events, making pages dynamic without reloading.

## Answer

The **Document Object Model (DOM)** is a W3C standard, language-independent programming interface that represents an HTML or XML document as a **tree of objects (nodes)**. Programs such as JavaScript can use it to read and change the document's content, structure and style after the page has loaded.

#### DOM tree
```html
<html><body>
  <h1 id="t">Hello</h1>
  <p class="a">Text</p>
</body></html>
```
```text
document
  |
 html
  |
 body
 /   \
h1    p
|     |
"Hello" "Text"
```
Everything is a node: the document node, element nodes (`<h1>`), attribute nodes (`id`) and text nodes. Nodes have parent, child and sibling relationships.

#### DOM with HTML and JavaScript
The browser builds the DOM from HTML and exposes it through the global `document` object. JavaScript can:
- **Find elements:** `document.getElementById("t")`, `getElementsByClassName()`, `getElementsByTagName()`, `querySelector()`.
- **Change content:** `element.innerHTML`, `element.textContent`.
- **Change attributes and style:** `element.setAttribute("src","a.png")`, `element.style.color = "red"`.
- **Add/remove elements:** `createElement()`, `appendChild()`, `removeChild()`.
- **Handle events:** `onclick`, `addEventListener("click", fn)`.

```html
<h1 id="t">Hello</h1>
<button onclick="change()">Click</button>
<script>
function change(){
  var h = document.getElementById("t");
  h.innerHTML = "Hello, DOM!";
  h.style.color = "green";
  var p = document.createElement("p");          // new node
  p.appendChild(document.createTextNode("Added by JS"));
  document.body.appendChild(p);
}
</script>
```
Thus the DOM makes pages dynamic and interactive without reloading.

## Check yourself

The answer's key points as multiple-choice questions, with the correct option and why.

1. What is the DOM?
   A. A database for web pages
   B. A tree of objects representing an HTML/XML document that programs can read and change
   C. A CSS framework
   D. A server language
   Answer: B. A W3C language-independent interface. (Key point: DOM definition)

2. Which are DOM nodes?
   A. Only element nodes
   B. Only text
   C. Document, element, attribute and text nodes
   D. Only attributes
   Answer: C. Everything is a node. (Key point: Nodes)

3. How can JS change element text and colour?
   A. document.write only
   B. Cannot be changed
   C. Using DNS
   D. innerHTML and element.style.color
   Answer: D. The DOM exposes content and style properties. (Key point: Changing content)

4. Which methods add a new element?
   A. createElement() and appendChild()
   B. getElementById() and removeChild()
   C. querySelector() only
   D. setAttribute() only
   Answer: A. Create the node then attach it. (Key point: Adding elements)

## Related in Web Technology

- [JavaScript DOM and date-time function](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Ajavascript-dom-date-time) — Web Technology, chapter 4
- [JavaScript and significance of DOM](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Ajavascript-dom-significance) — Web Technology, chapter 4
- [HTML registration form with JS validation](https://www.bctengineer.com/question.md?key=semester_7%2Fweb_technology%3Aregistration-form-js-validation) — Web Technology, chapter 4

## Related in other subjects

- [Requirement alternatives and SRS document](https://www.bctengineer.com/question.md?key=semester_6%2Fobject_oriented_analysis_and_design%3Arequirement-alternatives-srs-unified-process) — Object Oriented Analysis and Design, chapter 2