UNIT- 16 JAVASCRIPT - DOCUMENT OBJECT MODEL OR

DOM, TYPES OF DOM NODES

16.1 INTRODUCTION

16.2 OBJECTIVES

16.3 JAVASCRIPT OBJECT MODEL

16.4 DOM LEVELS

16.5 HTML DOM

16.6 ACCESSING ELEMENT IN JAVASCRIPT

16.7 DOM INTERFACES

16.8 SUMMARY

16.9 ANSWERS TO CHECK YOUR PROGRESS

16.10 SUGGESTED READINGS

16.11 TERMINAL QUESTIONS

16.1 INTRODUCTION
The DOM provides a way for programs, typically written in languages like JavaScript, to
dynamically interact with and manipulate the content, structure, and style of a web page. The
DOM represents the document as a tree of nodes, where each node represents part of the
document. Understanding the different types of nodes is crucial for web developers, as it
allows for deep manipulation and interaction with the structure of web pages.
In the DOM, every element, text, comment, and other parts of an HTML or XML document
is a node of a certain type. Different types of nodes have different roles and characteristics,
and they interact to form the complex structure of web documents.

16.2 OBJECTIVES
After the successful completion of this unit, you will be able to-
● define the Document Object Model
● learn different DOM levels
● write JavaScript code to handle HTML DOM
 ● be skilled at different DOM interfaces

16.3 JAVASCRIPT OBJECT MODEL

JavaScript is often referred to as an "object-based" language. The browser is also object
based. In other words, the browser exposes a set of objects through which you can interact
and manipulate the behaviour of the browser. The Browser Object Model (BOM) and the
Document Object Model (DOM) are two distinct object models in the context of web
development.
16.3.1 Browser Object Model (BOM)
The Browser Object Model (BOM) is a set of objects provided by web browsers to interact
with the browser itself. It represents the browser window as an object. The Browser Object
Model (BOM) enables JavaScript to communicate with the browser itself rather than the
content of the web page. In the Browser Object Model (BOM), the window object is the
top-level object and represents the browser window. It serves as the global object in
client-side JavaScript. Because it's the global object, you can often omit window and directly
invoke its properties and methods. For example
window.alert("hello javatpoint"); is same as alert("hello javatpoint");
In both cases, the alert function is a property of the window object, and you can call it
directly without explicitly referencing window.
Many properties and objects, such as document, history, screen, etc., are part of the window
object. You can access these properties directly or by using window. For instance:
let pageTitle = document.title; // Direct access
let screenWidth = window.screen.width; // Using window
Both of the above examples are correct and will give you the desired result.
Because it's the global object, you can often omit window and directly invoke its properties
and methods.
For example, the following two lines of code are equivalent:

window.alert("hello UOU");
alert("hello UOUt");

In both cases, the alert function is a property of the window object, and you can call it
directly without explicitly referencing window. You can access window properties directly or
by using window. For instance:
let pageTitle = document.title; // Direct access
let screenWidth = window.screen.width; // Using window
Both of the above examples are correct and will give you the desired result.
Understanding the window object and its properties is essential for working with the BOM
and for building interactive web applications.
16.3.2 Document Object Model the W3C (World Wide Web Consortium) DOM (Document
Object Model) is indeed a critical and standardized programming interface for web
documents. It abstracts the structure of HTML, XML, and XHTML documents into a
tree-like form where each node in the tree corresponds to a part of the document.
The W3C DOM provides a way for programmers to manipulate the structure, style, and
content of web documents dynamically using scripting languages like JavaScript. It allows
developers to access, modify, add, or delete elements and content within a web page, making
it possible to create interactive and dynamic web experiences.
JavaScript can be embedded into HTML documents, and the Document Object Model
(DOM) is a crucial part of the web development process that enhances the power of
JavaScript by allowing it to interact with HTML elements and manipulate the content and
structure of a web page dynamically.
For JavaScript to effectively access and manipulate a document using the Document Object
Model (DOM), the document must conform to a well-defined and logical structure.

The browser builds a Document Object Model (DOM) representing the structure of the web
page. The DOM is a tree-like structure where each node corresponds to an element, attribute,
or piece of text in the HTML or XML document. The properties, methods, and events
available for manipulating and creating web pages are organized into objects within the
DOM. The objects in the Document Object Model (DOM) are accessible via scripting
languages, and JavaScript is the primary scripting language used for this purpose in modern
web browsers. The DOM is essentially an interface that allows scripting languages, like
JavaScript, to interact with the structure, style, and content of web documents. When a web
page is loaded into a browser, the browser goes through several steps to render the page for
the user. One of the key steps involves parsing the HTML document and constructing the
Document Object Model (DOM) representation of the page. Upon loading, every element on
the page gets a reference in the DOM, and JavaScript can use these references to interact with
and manipulate the elements dynamically.
For example (This is what the browser reads)
<html>
<head>
<title>Sample DOM Document</title>
</head>
<body>
<h1>An HTML Document</h1>
<p>This is a <i>simple</i> document.
</body>
</html>

This is what the browser displays on screen.

16.4 DOM LEVELS
the W3C (World Wide Web Consortium) has structured the Document Object Model (DOM)
specifications into different levels, with each level introducing new features, improvements,
and extensions to the DOM. Here's an overview of the main DOM levels:
DOM Level 1 (1998): This level introduced the core structure of the DOM, defining basic
interfaces for accessing and manipulating documents. It provided a standard way to represent
documents as a tree structure.
DOM Level 2 (2000-2003): Divided into several modules, DOM Level 2 extended the
functionality of DOM Level 1. It introduced features like support for more advanced
document structures (such as XML namespaces), event handling, and the ability to modify
CSS styles. Modules included DOM Views, DOM Events, DOM Style, and others.
DOM Level 3 (2004-2015): This level further expanded the DOM by introducing new
features and improving existing functionalities. It included additional interfaces for loading
and saving documents, validation, keyboard event handling, and more precise control over
XML documents.
Each level builds upon the previous one, enhancing the capabilities of web developers to
create and manipulate web documents more effectively. The specifications within each level
aim to standardize how different programming languages (like JavaScript) interact with the
structure of web documents.
In this unit, we will be discussing about HTML DOM only.
16.5 HTML DOM
DOM serves as a programming interface for HTML (and XML) documents, facilitating a
standardized way for scripts, typically JavaScript, to interact with the webpage. By
representing the document as a tree of nodes, where each node corresponds to a part of the
document (such as elements, attributes, and text), the DOM allows for a wide range of
dynamic interactions and manipulations. In the previous unit we have studied about HTML
DOM in detail.

16.5.1 HTML DOM NODES

DOM nodes are fundamental building blocks within the Document Object Model (DOM).
Each element on web page becomes an object. Each object is represented by a Node.
Every Element is identified by the tag name (e.g. h1, p). There is parent–child relationship
between the nodes. Every element in an HTML page is represented as a DOM node. These
nodes are organized in a tree-like structure, reflecting the hierarchical relationships between
the elements on the page. The DOM represents an HTML (or XML) document as a tree of
nodes, where each node corresponds to a part of the document. This tree structure inherently
defines relationships among elements, such as parent-child and sibling relationships.
DOM Nodes Types
They represent various types of entities in a document, such as elements, text, comments, and
more. Nodes form a hierarchical tree-like structure, depicting the structure and content of an
HTML or XML document.
In HTML, different types of DOM nodes are part of the Document Object Model (DOM) and
are handled by browsers when rendering a web page. They can sometimes affect layout and
styling due to how they are treated by the browser's rendering engine.
The most common types of nodes in the DOM include:
Element Nodes: Represent the basic building blocks of documents known as elements.
These point to the element itself, not its content. These elements can contain other elements,
such as HTML, HEAD, BODY, A, DIV, P and H1 etc. They can contain other elements, text
nodes, or other types of nodes.
Text Nodes: Represents the content contained in Element nodes i.e., angle brackets, such as
My title, My link, and My header. Each text node has its own value and is attached to an
element node. For instance, if you have a paragraph (<p>) element in HTML and write
"Hello, world!" within it, "Hello, world!" would be the text node within the <p> element.
Comment Nodes: Nodes that represent comments within the HTML markup, indicated by
<--comment -->. Comments are not rendered and are usually used for developer notes,
explanations, or to temporarily disable certain parts of the code.
Document Nodes: The root node of the DOM tree. It represents the entire document and
contains all other nodes as its descendants.
Attribute Nodes: Represent attributes of an element. An attribute node is associated with an
element node and is considered to have that element node as its parent. An attribute node
does not exist in isolation; it is always tied to an element node that it describes or modifies in
some way. For example, href is an attribute node, which is contained within the BODY
element.
Example:
<a href=“https://uou.ac.in/”>UOU</a>

<a>
UOU href

https://uou.ac.in
Whitespace Nodes: These nodes represent spaces, tabs, line breaks, or any other form of
whitespace characters within the markup. They contribute to formatting and indentation but
might not always directly affect the visible content of the page. For example, spaces or line
breaks between HTML elements would be considered whitespace nodes.
Nodes have relationships with each other, creating a tree structure. Elements are nested
within other elements, forming parent-child relationships. For instance, in the HTML:
<div>
<p>Hello, <strong>world!</strong></p>
</div>
The <div> element would be a parent to the <p> element.
The <p> element would be a parent to a text node ("Hello, ") and a <strong> element.
The <strong> element would be a child of the <p> element.
16.5.2 HTML DOM NODE TREE
The HTML Document Object Model (DOM) views HTML documents as tree structures,
commonly referred to as the "Node Tree" or simply the "DOM Tree.”

Source: https://w3schools.sinsixx.com/htmldom/dom_nodetree.asp.htm
The HTML Document Object Model (DOM) provides a structured representation of the
document as a tree of nodes, and through JavaScript, developers have the ability to access,
modify, delete, and create new nodes within this tree.
16.5.3 Node Parents, Children, and Siblings
There is a hierarchical pattern in the nodes of the node tree, with a relationship among
different nodes that has quite a striking similarity with the family tree. Hence it is no surprise
that the terms parent, child, and sibling are used to describe the relationships. The node
directly above another node is called the parent node, while those at the same level are
termed as sibling nodes. Those that are one level directly below another are termed the
children nodes. The topmost node, from where the pattern starts is called the root node of a
node tree. Thus, to summarize-
● Except for the root node, each node has one parent.
● A node can have any number of children.
● Nodes with the same parent are sibling nodes.

The following image illustrates a part of the node tree and the relationship between the nodes:
Source:
https://www.javascripttutorial.net/javascript-dom/document-object-model-in-javascript/
Look at the following HTML fragment:
<html>
<head>
<title>Welcome To UOU</title>
</head>
<body>
<h1>Swayam Course</h1>
<p>Web Technology</p>
</body>
</html>

From the HTML above:

● the root node: The <html> It has no parent node.
● the parent node of the <head> and <body> : <html> node
● The parent node of the "Web Technolgy" text node : <p> node
● The child nodes of <html> : <head> and <body>
● The child node of <head> : the <title> node.
● The child node of <title> node : the text node "Welcome to UOU"
● The siblings and child nodes of <body> : <h1> and <p> nodes
● The first child of the <html> element : <head> element
● The last child of the <html> element : <body> element
● The child of the <body> element : <h1> element
● The last child of the <body> element : <p> element

16.6 ACCESSING ELEMENT IN JAVASCRIPT

Object methods and object properties comprise the interface, with each HTML object itself
defined as an object. Nodes provide access to various properties and methods that allow
manipulation of the document's structure and content.
16.6.1 Method
A method is a function that is a property of an object. It allows objects to perform actions and
manipulate data. The following table explains the methods used to access an HTML element
in different ways:
Method Description

getElementById() Used to select and retrieve an HTML element

based on its unique ID attribute.

Example: Get the element with id as “university” from the given document.

document.getElementById("university");

getElementsByTagName() Used to select multiple elements from an

HTML document based on their tag names.

Example 1: Get a list of all <p> elements in the given document.

document.getElementsByTagName("p");

Example 2: Retrieve a list of all <p> elements that are descendants (children, grand-children,
etc.) of the element with id="university" from the given document.

document.getElementById("university").getElementsByTagName("p");

getElementByClassName() Used to select and retrieve a collection of

elements from an HTML document based on
their class name.
Example : Fetch a list of all elements with class="university" from the given document.

document.getElementsByClassName("university");

16.6.2 Property
A property is a value that we can fetch or set, e.g. it can be the name or content of a node. In
the Document Object Model (DOM), properties represent the various attributes,
characteristics, or state of HTML elements or nodes in a web page. These properties are
accessible through JavaScript and can be read or modified to manipulate the elements
dynamically.
 Property Description
innerHTML ● represents the HTML content within
an element.
● Allow to access the markup and
content inside an HTML element as a
string.
● Useful for getting change or replace
the content within an element
dynamically.

Example: To change the content of an HTML element

<html>
<body>
<h2>JavaScript can Change HTML</h2>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
<p>The paragraph above was changed by a script.</p>
</body>
</html>
nodeName Used to access the name of a specific node in
the document tree.
● nodeName is read-only
● nodeName of an element node is the
same as the tag name
● nodeName of an attribute node is the
attribute name
● nodeName of a text node is always
#text
● nodeName of the document node is
always #document

Example: To get the node name of the body element from a given document.

Include the following statement in the script

document.body.nodeName;

The result will be:

BODY

nodeValue The nodeValue property is used to access or

modify the value of a node, especially for
text nodes or attribute nodes.
 ● nodeValue for element nodes is
undefined
● nodeValue for text nodes is the text itself
● nodeValue for attribute nodes is the
attribute value

Following example retrieves the text node value of the <p id="university"> tag from the given
document.

< html>
< body>
< p id="university"> Welcome to UOU </p>
< script type="text/javascript">
x=document.getElementById("university");
document.write(x.firstChild.nodeValue);
< /script>
< /body>
< /html>

nodeType The nodeType property returns the type of node.

nodeType is read only.
If the node is an element node, the nodeType
property will return 1.

If the node is an attribute node, the nodeType

property will return 2.

If the node is a text node, the nodeType property

will return 3.

If the node is a comment node, the nodeType

property will return 8.

If the node is a document node, the nodeType

property will return 9.
Example: To converts all Text node (descendants excluded) data to uppercase:

if(n.nodeType == 3 /*Node.TEXT_NODE*/

n.data = n.data.toUpperCase();

Example 1
To verify Type of Node
<html>
<head>
<title>JavaScript DOM Nodes - Check Node Type</title>
<script type="text/javascript">
function checkNodeType()
 {
var tag = document.getElementById("par1");
var value = tag.nodeType;
if(value == 1)
document.write("This is Element Node Type");
if(value == 2)
document.write("This is Attribute Node Type");
if(value == 3)
document.write("This is Text Node Type");
if(value == 8)
document.write("This is Comment Node Type");
if(value == 9)
document.write("This is Document Node Type");
}
</script>
</head>
<body>
<h3>JavaScript DOM Nodes Examples</h3>
<p id="par1">Welcome to JavaScript DOM</p>
<input type="button" onclick="checkNodeType();" value="Check Node Type">
</body>
</html>

Result

On clicking ‘check Node Type’ , we get follwing output

Example 2- Verify Child Nodes of Node

<html>
<head>
<title>JavaScript DOM Nodes - Check Child Nodes</title>
<script type="text/javascript">
function checkNode(value)
{
var tag = document.getElementById(value);
if(tag.hasChildNodes())
{
alert("Node has child nodes");
}
else
{
alert("Node has no child nodes");
}
}
</script>
</head>
<body id="T1">
<h3>JavaScript DOM Nodes Examples</h3>
<p>Click on the button given below to check the child nodes of the BODY element.</p>
<input type="button" onclick="checkNode('T1');" value="Check Child Node">
<p>Click on the button given below to check the child nodes of the INPUT element.</p>
<input type="button" id="T2" onclick="checkNode('T2');" value="Check Child Node">
</body>
</html>
Clicking on ‘check child node’, we get

While clicking on ‘check child node’ , we get

16.7 DOM INTERFACES

There are various interfaces that together make up the DOM API. These interfaces define the
structure and behavior of different types of nodes in the DOM tree. Here are some key DOM
interfaces:
Node Interface:
The Node interface is a fundamental interface in the DOM (Document Object Model) API. It
represents a generic node in the DOM tree, which can be an element, attribute, text node,
comment, or other types of nodes. The Node interface provides common properties and
methods that are shared by all types of nodes. Here are some key aspects of the Node
interface:
Properties:
nodeName: Returns the name of the node.
nodeValue: Gets or sets the value of the node, depending on its type. For example, for an
element, this is null, and for a text node, it represents the text content.

nodeType: Returns an integer representing the type of the node. Common values include:

1 for Element nodes

3 for Text nodes
8 for Comment nodes
9 for Document nodes

Methods:
appendChild(node): Adds a new child node to the end of the list of children for the current
node.
removeChild(node): Removes a child node from the list of children of the current node.
replaceChild(newNode, oldNode): Replaces an old child node with a new child node.
cloneNode(deep): Creates a duplicate of the current node. If deep is true, it also copies all
descendants.
hasChildNodes(): Returns a Boolean indicating whether the node has any child nodes.
parentNode: Returns the parent node of the current node.
nextSibling and previousSibling: Return the next and previous siblings of the current node.
parentNode: Returns the parent node of the current node.
childNodes: Returns a NodeList containing all child nodes of the current node.
The Element interfaces
The Element interface in the DOM (Document Object Model) represents an element in an
HTML or XML document. It extends the more general Node interface and provides specific
properties and methods that are applicable to elements. Common properties/methods are
tagName, attributes, children, innerHTML, etc.
The Attribute Interface
The Attribute interface in the DOM (Document Object Model) represents an attribute of an
HTML or XML element. It provides a way to interact with the attributes of an element and
retrieve information about them. Common properties/methods are name, value, etc.
The Text Interface
The Text interface in the DOM (Document Object Model) represents textual content within
an element. It is a type of node in the DOM tree and extends the more general CharacterData
interface. Common properties/methods are data (or nodeValue), textContent, etc.
Document Interface
The Document interface in the DOM (Document Object Model) represents the entire HTML
or XML document. It is the root of the document object model hierarchy, providing access to
various properties and methods for working with the document. Common properties/methods
are createElement, getElementById, createTextNode, etc.
The DocumentFragment Interface
The DocumentFragment interface in the DOM (Document Object Model) represents a
lightweight or minimal document object. It can be used to group together multiple nodes
without being part of the main document tree. DocumentFragment is often employed when
making multiple DOM manipulations before updating the live document, providing a more
efficient way to work with a collection of nodes without directly affecting the document's
layout.
The Event Interface
The Event interface in the DOM (Document Object Model) represents an event that occurs in
the browser, such as a user action (e.g., a click or a keypress) or changes in the state of an
element. The Event interface provides information about the event and methods to interact
with it. Common properties/methods are type, target, preventDefault, etc.

The DOMException interface

The DOMException interface is part of the DOM (Document Object Model) specification.
This interface represents an abnormal event that occurs with respect to the Document Object
Model (DOM). It is often used to indicate errors in web development, particularly when
working with the DOM.
The DOMException interface is defined in the DOM (Document Object Model)
specification. It provides information about an error condition in the form of an exception
object. This object has several properties that help developers identify the type and details of
the error.
Example
This code is an example of throwing and catching a DOMException in the context of creating
a DOM attribute with an invalid name. it checks for the INVALID_CHARACTER_ERR
error code when trying to create an attribute with an invalid name.
<html>
<head>
<script type="text/javascript">
function ThrowDOMException() {
try {
// Attempting to create an attribute with an invalid name (123)
var elem = document.createAttribute("123");
} catch (e) {
 // Catching the exception and checking the error code
if (e.code == DOMException.INVALID_CHARACTER_ERR) {
alert("The attribute name is invalid");
}
return;
}
// If no exception is caught (e.g., in Internet Explorer before version 9)
alert("Your browser does not throw an exception when an invalid attribute name is
used");
}
</script>
</head>
<body>
<button onclick="ThrowDOMException()">Throw a DOM exception</button>
</body>
</html>

In this example:
The ThrowDOMException function is triggered by clicking the button.
Inside the function, an attempt is made to create a DOM attribute using
document.createAttribute("123"), where "123" is considered an invalid attribute name.
The code is wrapped in a try-catch block to catch any exception that might be thrown during
the attempt.
If a DOMException is caught, the error code is checked (INVALID_CHARACTER_ERR),
and an alert is shown indicating that the attribute name is invalid.
If the browser does not throw an exception (for example, Internet Explorer before version 9),
a different alert is displayed.

Result will be :

While clicking on button, follwing will be the output

The DocumentFragment interface
The DocumentFragment interface in the Document Object Model (DOM) represents a
lightweight, minimal document object that can contain other nodes. It is often used as a
container to hold a group of nodes before they are appended to the actual document. The
DocumentFragment allows developers to manipulate a group of nodes without affecting the
main document, which can lead to improved performance when updating the DOM.
Example: Following HTML code demonstrates the usage of the createDocumentFragment()
method to efficiently add array items to an empty list in the DOM.
<html>
<head>
<title>DocumentFragment Example</title>
</head>
<body>
<ul id="myList"></ul>
<script>
// Create an array of items to add to the list
const itemsToAdd = ['Item 1', 'Item 2', 'Item 3'];
// Get a reference to the <ul> element where the items will be added
const list = document.getElementById('myList');
// Create a DocumentFragment
const fragment = document.createDocumentFragment();
// Loop through the itemsToAdd array
itemsToAdd.forEach(item => {
// For each item, create a new <li> element
const li = document.createElement('li');
// Set the text content of <li> to the current item
li.textContent = item;
// Append the <li> element to the DocumentFragment
fragment.appendChild(li);
});
// Append the DocumentFragment to the <ul> element
// This inserts all the <li> elements into the DOM in one operation
list.appendChild(fragment);
</script>
</body>
</html>

Output:

In this example, we start by creating an array itemsToAdd containing the text for each list
item we want to add. We then obtain a reference to the existing <ul> element by its ID. Next,
we create a DocumentFragment and loop through the itemsToAdd array, creating an <li>
element for each item, setting its text content, and appending it to the DocumentFragment.
Finally, we append the DocumentFragment to the <ul> element, which results in all the new
list items being added to the DOM in a single operation. This approach minimizes reflows
and repaints, enhancing the performance of dynamic content updates.

Check Your Progress

Objective type question

1. What is the basic building block of the Document Object Model (DOM)?
a. Document
b. Node
c. Element
d. Attribute

2. Which type of DOM node represents the entire document?

a. Text node
b. Document node
c. Element node
d. Attribute node

3. What type of DOM node represents an HTML or XML element?

a. Document node
b. Text node
c. Element node
d. Attribute node

4. Which of the following is responsible for text content within an HTML or XML
document?
a. Document node
b. Text node
c. Element node
d. Attribute node

5. In the DOM, what type of node represents an attribute of an HTML or XML element?
a. Document node
b. Text node
c. Element node
d. Attribute node

6. What DOM node type is used to store and manipulate textual content within an HTML
or XML document?
a. Document node
b. Text node
c. Element node
d. Attribute node

7. Which DOM node type is used to represent comments in an HTML or XML document?
a. Document node
b. Text node
c. Comment node
d. Attribute node

8. What is the role of the DocumentFragment node in the DOM?

a. It represents the entire document.
b. It is used to group together multiple nodes without being part of the main document tree.
c. It represents an HTML or XML element.
d. It represents an attribute of an HTML or XML element.
 9. What type of DOM node represents the content between opening and closing tags of an
HTML or XML element?
a. Document node
b. Text node
c. Element node
d. Attribute node

10. Which DOM node type is used to represent the doctype declaration in an HTML
document?
a. Document node
b. Text node
c. Doctype node
d. Element node

16.8 SUMMARY
In the Document Object Model (DOM), which is a cross-platform and language-independent
interface that treats an XML or HTML document as a tree structure, nodes are the primary
building blocks. Each element, attribute, and piece of text in the document is a node of
different types. In this unit, the main types of nodes you have encountered in the DOM;
Document Node, Element Node, Attribute Node, Text Node, Comment Node and whitespace
nodes etc. In the context of the Document Object Model (DOM), an "interface" is a
specification of methods, properties, and events that a particular type of DOM node must
support You have gone through various DOM interfaces in this unit.

16.9 ANSWERS TO CHECK YOUR PROGRESS

1. (b) Node
2. (b) Document node
3. (c) Element node
4. (b) Text node
5. (d) Attribute node
6. (b) Text node
7. (c) Comment node
8. (b) It is used to group together multiple nodes without being part of the main document
tree.
9. (b) Text node
 10. (d) Doctype node

16.10 SUGGESTED READINGS

● JAVAScript Programmers Reference, Cliff Woottoin, Publisher: Wrox Press Inc. Year
1999.
● Beginning Java Script, Paul Wilton, Publisher: Wrox Press Inc. 1sr Edition
● Java Scrupt: The Definitive Guide, David Flanagan. Publisher: O’ Railly. 4th Edition
2001.
● The JavaScript Bible, Danny Goodman, Publisher: Johan Wiley & Sons Inc. Edition
2001.

16.11 TERMINAL QUESTIONS

1. What is the purpose of the Node interface in the DOM?
2. Explain the role of the Element interface in the DOM.
3. What does the Attribute interface represent in the DOM?
4. Describe the purpose of the Text interface in the DOM.
5. How is a DocumentFragment different from a regular Document?
6. What role does the Event interface play in the DOM?