0% found this document useful (0 votes)
19 views

15 JAVASCRIPT and HTML Document Object Model or D_241025_132441

This document provides an overview of the Document Object Model (DOM) and its relationship with JavaScript and HTML. It explains the structure of HTML documents in the browser, the role of JavaScript in manipulating DOM elements, and the hierarchy of DOM objects. The document also covers scripting basics, JavaScript variables, and the evolution of the DOM through various levels.

Uploaded by

Mukul
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
19 views

15 JAVASCRIPT and HTML Document Object Model or D_241025_132441

This document provides an overview of the Document Object Model (DOM) and its relationship with JavaScript and HTML. It explains the structure of HTML documents in the browser, the role of JavaScript in manipulating DOM elements, and the hierarchy of DOM objects. The document also covers scripting basics, JavaScript variables, and the evolution of the DOM through various levels.

Uploaded by

Mukul
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

Unit- 15 JAVASCRIPT AND HTML Document Object Model or

DOM
15.1 INTRODUCTION

15.2 OBJECTIVES

15.3 SCRIPT BASICS

15.4 INTRODUCTION TO JAVASCRIPT

15.5 JAVASCRIPT VARIABLES

15.6 NEED OF DOM

15.7 DOM HIERARCHY

15.8 DOM LEVELS

15.9 HTML DOM

15.10 SUMMARY

15.11 ANSWERS TO CHECK YOUR PROGRESS

15.12 SUGGESTED READINGS

15.13 TERMINAL QUESTIONS

15.1 INTRODUCTION
HTML documents are shown in the windows of the browser, with the former represented by the window
objects. There is a document property on this window that points to a document object. The objects in the
document object are representations of the document's content. HTML documents include forms,
graphics, text, and hyperlinks. All document's content can be accessed and manipulated by JavaScript
code. The way in which a document is accessed is specified by the API and is called a Document Object
Model (DOM), providing cross-browser portability for JavaScript scripts and Java programs, as it was
originally envisaged. DOM also defines the logical structure of documents, telling how to open and edit
documents.
Document Object Model further led to ‘Dynamic HTML.’ It came to be known as DHTML. This unit
explains the Document Object Model or DOM in detail.

15.2 OBJECTIVES
● After going through this unit, you should be able to:
● define the Document Object Model
● develop JavaScript code to handle HTML DOM
● create documents and navigate through their structures
● add, modify and delete elements and content;

15.3 SCRIPT BASICS


Scripts are indeed sets of instructions executed by another program rather than directly by the computer's
hardware. Scripting languages facilitate this by offering a simpler syntax and more flexible programming
environment compared to traditional compiled languages. It can interpret and automate the execution of
tasks. It can alternatively execute tasks one by one by human intervention. In the context of web
development, scripts serve as instructions that can be executed either on the web server or within the web
browser, categorized respectively as server-side scripting and client-side scripting.

Source:
https://en.wikipedia.org/wiki/Client%E2%80%93server_model#/media/File:Client-server-model.svg

Scripting enables web pages to respond dynamically to user actions by executing a series of commands or
scripts when specific events occur. These events can be anything from clicking a button, hovering over a
link, submitting a form, to resizing a window. Script or scripting language is a computer language that
does not need the compilation step and is rather interpreted one by one at runtime. It is where the script is
written and where instructions for a run-time environment are written.
Scripting languages are often embedded in the HTML pages to change the behaviour of the web pages
according to the user’s requirements.
Difference between client-side and server-side scripting
Server-side scripts are executed on the web server in response to a user's request. The server processes the
script and sends the resulting HTML (or other formatted data) to the user's browser. Client-side scripts are
executed in the user's browser, not by the web server. The web server provides the scripts as part of the
web page, and the browser runs these scripts to modify the page dynamically after it has been loaded or in
response to user actions.
Client-side scripts are not executed by the web server. Instead, they are executed by the user's web
browser (e.g., Chrome, Firefox). The web server sends the client-side scripts (usually written in
JavaScript) along with the HTML, CSS, and other resources to the user's browser. The browser then
interprets and runs these scripts locally on the user's machine.

Source: https://images.app.goo.gl/EDQMcNaJ4AUCkRuYA

Source: https://images.app.goo.gl/p1mX8WUtDCs2eWH29

15.4 INTRODUCTION TO JAVASCRIPT


JavaScript is a scripting language that plays a crucial role in building dynamic web pages. It enables
developers to enhance user experience by adding interactivity to websites, allowing for real-time updates
and responsiveness without the need for page reloads. It is considered an object-based language,
emphasizing the use of objects to structure code and define functionalities. You draw a parallel between
real-life objects (e.g., a bike or a table) and objects in scripting languages. Real-life objects have
characteristics (colour, size, etc.) and can perform actions (riding a bike, placing items on a table). In
JavaScript, objects have a unique identity, state, and behaviour. Objects in JavaScript have a unique
identity, distinguishing them from other objects, even if they share the same type. The state represents the
characteristics (properties or fields) of the object, while behaviour consists of actions (methods or
functions) the object can perform. The object stores its identity and state in fields (also called variables)
and exposes its behaviour through functions (methods).

Source: https://slideplayer.com/slide/5854201/

Source: https://studyopedia.com/cpp/cpp-classes-objects/
JavaScript is a scripting language, which can be executed on the client-side and on the server side. It is
primarily known for its role in client-side web development, where it is executed directly in the web
browser on the user's device.

15.5 JAVASCRIPT VARIABLES


Let us first see the skeleton of a JavaScript file.
<html>
<body>
<script type="text/javascript">
document.write(“Welcome to Uttarakhand Open University");
</script>
</body>
</html>

JavaScript code should be enclosed between the <SCRIPT> and </SCRIPT> tags. <Script Tag> defines a
script for an HTML page to make them interactive. The browser that supports scripts interprets and
executes the script specified under the <script> tag when the page loads in the browser. There are two
main purposes of the <script> tag. One is to identify a given segment of the script in the HTML page and
another one is to load an external script file. Generally what people do is include the JavaScript code
within the <HEAD> and </HEAD> tags and it is the right approach.

Now let us talk about variables. A variable is a symbolic name that represents a value stored in the
computer's memory. Variables are used to store and manage data in a program, and their values can
change during the execution of the program. For example, the age of a student and the salary of an
employee can be treated as variables. Variables need to be name specific, but the names must be in
keeping with the rules. Variable names must adhere to certain rules. Names must begin with a letter
(uppercase or lowercase) or an underscore (_). The following characters can be letters (A-Z, a-z), digits
(0-9), or underscores (_). JavaScript is case-sensitive, so "myVariable" and "myvariable" would be treated
as distinct variables. The characters that follow can also be digits (0-9). It distinguishes between
uppercase and lowercase letters, so variables named with different letter cases are considered distinct.
Generally, meaningful variable names are chosen so that they relate to the value they hold.
Declaring Variables

You can declare a variable with var statement:


Syntax
<variableName>= <value>;
Where, = is the assignment operator used to assign values.
You can also declare a variable by simply assigning a value to the variable.

Example:
Var studID;
studID = 50;
StudName = “Ram”

The variable name is on the left-hand side of expression and the value you want to assign to the variable
is on the right side. Thus, the variable “StudName” shown above gets the value “Ram” assigned to it.

Functions
JavaScript functions are an integral part of the language. They allow you to encapsulate a set of
statements to perform a specific task and can be reused throughout your code. Here's an example of how
you can create a basic function:

// Defining a function named 'greet'


function greet() {
console.log("Hello, how are you?");
}
// Calling the function
greet(); // This will print 'Hello, how are you?' to the console

You can also create functions that take parameters and return values:
// Function that takes in a name as a parameter and returns a greeting
function greetWithName(name) {
return `Hello, ${name}!`;
}
// Calling the function and storing the result in a variable
let greeting = greetWithName("Alice");
console.log(greeting); // This will print 'Hello, Alice!' to the console

A JavaScript function is essentially a block of code designed to perform a particular task. A function is
executed when something invokes it (calls it). By encapsulating code within functions, you prevent it
from running immediately when the page loads. Instead, the function's code runs only when the function
is explicitly called. We may call a function from anywhere within the page. Functions can be defined
either <head> or <body> section.
They are defined using the function keyword followed by a name (if you want to name the function) and
a set of parentheses that can contain parameters.

Example
<html>
<head>
<script type="text/javascript">
function displaymessage()
{
alert("Hello World!");
}
</script>
</head>
<body>
<form>
<input type="button" value="Click me!" onclick="displaymessage()" >
</form>
</body>
</html>

So, this script first generates a click button, then calls the function and after the function
is finished it continues to execute the rest of the instructions in the calling code.

Result:

15.6 NEED OF DOM


HTML is used to structure the web pages and JavaScript is used to add behaviour to our web pages. An
HTML page is rendered (painted) in a browser. The browser assembles all the elements (objects)
contained in the HTML page, downloaded from the web server, in memory. JavaScript cannot understand
or recognize HTML elements after the page is rendered. When an HTML file is loaded into the browser,
the JavaScript is unable to understand the HTML document instantly. Consequently, it reads and works
with the content Object Model (DOM), which the browser generates from the HTML content.
DOM is basically the representation of the same HTML document but in a different format with the use
of objects. The Document object model represents the whole document. The model includes not only the
structure of a document but also the behaviour of a document. When an HTML document is loaded in the
browser, it becomes a document object. It is the root element that represents the HTML document. With
the help of document object, we can add dynamic content to our web page.
Document Object Model or DOM maps the web page for developers. When a web page is broken down
into its constituent parts, the Document Object Model (DOM) describes the unique attributes of each
element. This makes it easy for us to change the components, leading to the whole page being changed
ultimately. Because it specifies which components we may or may not change and how, as determined by
a group of developers, the DOM is prescriptive.

15.7 DOM HIERARCHY


The DOM represents an HTML document as a tree structure where each element, attribute, text, and other
content is represented as an object. This tree-like structure is hierarchical, mirroring the organization of
the HTML document.

Source:
https://sceweb.sce.uhcl.edu/helm/WEBPAGE-Javascript/my_files/Object/Module-9/module9page.html

Window Object: The window object serves as the top-level object in the browser's JavaScript
environment. It represents the window or tab that contains the web page, providing access to various
properties and methods related to the browsing context. Within the window object, several key objects
exist like current frame, history list, and the web page document. The web page document contains its
own set of objects, including links, anchors, and forms. Within each form are form objects, such as input
boxes, radio buttons, or selection lists.
The window object includes a wide array of properties and methods to interact with the browser window
or tab. One of the most significant properties of the window object is the document property.
when you access the document object in JavaScript within a browser, you're actually referencing a
property of the window object. For instance, you might see code like:

// Accessing the document object


const doc = window.document;
// or simply
const doc = document; // This is implicitly referencing window.document

Both window.document and document are interchangeable when referring to the Document object within
the browser's JavaScript environment. This is because document is a property of the window object and
serves as an entry point to interact with the DOM.
Document object: The document object is the representation of an HTML document once it's loaded into
a browser window. It serves as an entry point to interact with and manipulate the content of the webpage.

Form Object: It represents an HTML form element and its associated properties and methods. Within a
web page's Document Object Model (DOM), forms are represented as objects, allowing JavaScript to
interact with and manipulate their attributes and elements.

Link Object: This used to link external resources, such as stylesheets or icon files, to an HTML
document. The link object, accessed through the document object, represents each <link> element in the
DOM and allows JavaScript to interact with and manipulate these elements. These <link> elements are
typically used to reference external resources and provide metadata about the document.

Anchor Object: The anchor object represents an HTML <a> (anchor) element. Anchors are used to
create hyperlinks within HTML documents, allowing users to navigate to different pages or sections
within the same page.

Form Control Elements: Form control elements in the Document Object Model (DOM) represent
various HTML form elements, such as input fields, buttons, checkboxes, radio buttons, select lists, and
more. These elements are accessible via JavaScript and are part of the DOM hierarchy when they're
present within an HTML <form> element.

Event Object: The Event object represents an occurrence or interaction that happens within the browser.
Events can be triggered by user actions (like clicks, mouse movements, keyboard inputs), the browser
(like page load, resize), or by scripts and can be handled by event listeners or event handlers in
JavaScript.

15.8 DOM LEVELS


The DOM has evolved through several levels.
 The Level 0 DOM – Often referred to as the "Legacy DOM”. this is not a formal specification, but
rather the initial de facto methods for accessing and manipulating web page elements that emerged with
early web browsers like Netscape Navigator 2.
 The two Intermediate DOMs- these are supported by NS 4 and IE 4 and 5.
 The Level 1 DOM (W3C DOM) – these are supported by Mozilla, IE 5 and above.
Parts of the W3C DOM Standard
The W3C DOM standard is divided into several parts, each focusing on different aspects of document
manipulation:
Core DOM:
Provides a generic set of objects and methods for accessing and manipulating document content, and is
designed to be extended to different document types. It's not specific to HTML or XML, making it
adaptable to other markup languages as well.
XML DOM:
Tailored specifically for XML documents, this part extends the Core DOM, adding functionality needed
to deal with XML namespaces and other XML-specific features.
HTML DOM:
Extends the Core DOM with HTML-specific objects and methods, facilitating manipulation of HTML
elements and attributes. It provides a standardized way for accessing and manipulating HTML
documents.

15.9 HTML DOM


HTML DOM stands for Hyper Text Markup Language Document Object Model. Upon loading, a
browser builds a Document Object Model (DOM) of an HTML page. HTML DOM enables JavaScript to
access and modify any element of an HTML document. Built like a tree the HTML Document Object
Model (DOM) illustrates something akin to the parent-child relationship among the different HTML page
elements.
The HTML Document Object Model (DOM) views an HTML document as a tree structure where
everything in the document is a node.
Types of nodes
Document Node: This is the root node of the HTML document.
Element node: These nodes represent HTML elements in the document tree.
Text Node: represent the text content of an element node. Text content within an HTML element as text
nodes.
Comment Node: Comments as comment nodes
JavaScript arranges objects in a Document Object Model or DOM. JavaScript interprets DOM easily i.e.,
JavaScript cannot understand the tags(<h1>H</h1>) etc. in HTML document but can understand object
h1 in DOM. The document object model can be thought of as a hierarchy moving from the most general
object to the most specific.
The HTML DOM is a standard for how browsers should create a model of an HTML page and how
JavaScript can access and manipulate that model.
1. HTML Elements as Objects: In the DOM, every element in the HTML document is turned into an
object.
2. Properties of All HTML Elements: Each DOM object has properties that describe its
characteristics and provide information about its current state.
3. Methods to Access All HTML Elements: The DOM provides a variety of methods to access and
manipulate these objects.
4. Events for All HTML Elements: Events are actions or occurrences that happen in the system you
are programming, which the system tells you about so you can respond to them in some way if
desired.
The HTML DOM is defined as:
The HTML DOM is a programming interface that provides a structured representation of the web page.
By treating every part of the page as an object, whether it's an HTML element, attribute, or even the text
within elements, the DOM specifies standard methods to interact with these objects.
Let us have one example of HTML DOM:
<html>
<head>
<title>Welcome to UOU</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML document. </p>
</body>
</html>

HTML DOM of the HTML page shown in above example


From the above HTML code and figure, we can read as:
􀁸 <html> is the root node of the page and is the parent node of <head> and <body>
􀁸 <head> is the first child of <html>
􀁸 <body> is the last child of <html>
􀁸 <head> has a child node: <title>
􀁸 <title> has a child (a text node): "Welcome to UOU "
􀁸 <body> has two children: <h1> and <p>
􀁸 <h1> has one child (a text node): "Text: “This is a simple HTML document"
􀁸 <p> has one child: "Hello world!"
􀁸 <h1> and <p> are siblings
The HTML DOM tells one how to get, change, add, or delete HTML elements. The capabilities of
JavaScript with HTML DOM are that it can add any new HTML element, remove, and modify any of
those elements in the html page. Besides modifying a CSS style in the html page, it is also capable of
reacting to any of the existing HTML events in the html page.
In the Document Object Model (DOM), HTML elements are represented as objects, and the interactions
with these objects are facilitated through their properties and methods. Properties of DOM objects
represent the attributes or characteristics of HTML elements. Methods are functions associated with an
object that perform actions on it or with it(like add or deleting an HTML element). HTML DOM methods
are the values or attributes of elements of HTML page that can be set or updated (on HTML elements).
All HTML elements, along with their containing text and attributes, can be accessed through the DOM.
15.9.1 HTML DOM Methods and Properties
JavaScript objects consist of properties and methods. When a web browser renders an HTML document,
it creates a DOM of HTML document. Each HTML element in the Document Object Model (DOM) is
treated as a JavaScript object. These objects have various properties and methods.
HTML DOM Methods: These are functionalities provided by this model to interact with the elements of a
web page.
HTML DOM properties: These are attributes or values associated with HTML elements that can be
accessed and manipulated using JavaScript.
15.9.2 The DOM Programming Interface
The attributes, methods, and values of an object or HTML elements make up the DOM programming
interface.
It is a standardized way to access, manipulate, and represent structured documents like HTML etc. As
discussed above, the property of an object is a value that can be get or set i.e., updating the content of an
HTML element. To update an HTML element, first we need to access it by finding that element in the
whole document or the web page. The widely used method is accessing the element by its ID is
document.getElementById(id).
The document.getElementById(id) function is a method in JavaScript that allows you to select and
retrieve an HTML element from the document based on its unique id attribute.
● document refers to the entire HTML document loaded in the browser.

● getElementById() is a method of the document object used to select an element by its unique id.

● id is the parameter passed to the getElementById() method, representing the specific ID attribute
value of the HTML element you want to retrieve.
● innerHTML: Modifies the content within an element.
The general format is:

element.innerHTML = new content


● attribute: Update the attribute values of the element: element with the new attribute values
● style: Inline styling directly within the HTML element
The general format is: element.style.property = new style

Following are the methods used to add or remove HTML Elements:

● createElement(): Creates a new HTML element.


The general format is: document.createElement(“element_name”)
Create a new element element_name under the element document.
Example: document.createElement('div')
● removeChild(): Removes a specified child node from the DOM
The general format is document.removeChild(child_element)
● appendChild(): Appends a node as the last child of a node.
document.appendChild(child_element)
● replaceChild(newNode, oldNode): It is used to replace a child node of a specified parent node
with a new node.
Following are the methods used to add event handlers:
addEventListener(): This method allows attaching an event listener to an element. It provides more
control over event handling, enabling multiple event listeners for the same event.
Example: element.addEventListener('click', function() {
// Your code logic goes here
});
Example 1: Javascript code to change the contents of the paragraph element.
<!DOCTYPE html>
<html>
<head>
<title>Change Paragraph Content</title>
</head>
<body>
<p id="myParagraph">Initial content of the paragraph.</p>
<button onclick="changeContent()">Change Content</button>
<script>
function changeContent() {
// Get the paragraph element by its ID
let paragraph = document.getElementById("myParagraph");
// Change the contents of the paragraph
paragraph.textContent = "New content for the paragraph!";
}
</script>
</body>
</html>

Result: Initially below page is shown:

On mouse click on the button, below page is shown:


Explanation:
The id of paragraph element is used to access an HTML element. Here, the method
getElementById is used to find the element with id="myParagraph".
When button clicked, triggers a JavaScript function to change the content of a paragraph.
15.9.3 Updating style of an HTML Element
The following syntax is used to change the style of an HTML element using HTML
DOM:
document.getElementById(element_id).style.property = new style
Example: Changing the colour of content of the element: h2 using HTML DOM.
<!DOCTYPE html>
<html>
<head>
<title>Change Colour Example</title>
</head>
<body>
<h2 id="exampleHeading">This is an example heading</h2>
<button onclick="changeColor()">Change Color</button>
<script>
function changeColor() {
var heading = document.getElementById("exampleHeading");
heading.style.color = "blue"; // Change colour to blue
}
</script>
</body>
</html>

Result: As shown below the colour of the content of h2 element is changed from default colour (black) to
blue
Check Your Progress

Objective Type questions


1. In which HTML element, we put the JavaScript code?
a) <javascript>...</javascript>
b) <js>...</js>
c) <script>...</script>
d) <css>...</css>
2. JavaScript code can be written in ____.
a) JavaScript file (.js file)
b) HTML document directly
c) JavaScript file and in HTML document directly
d) In style sheets (.css file)
3. Which symbol is used separate JavaScript statements?
a) Comma (,)
b) Colon (:)
c) Hyphen (_)
d) Semicolon (;)
4. Which JavaScript method is used to access an HTML element by id?
a) getElementById()
b) getElement(id)
c) getElementById(id)
d) elementById(id)
5. Which property is used to define the HTML content to an HTML element with a
specific id?
a) innerText
b) innerContent
c) elementText
d) innerHTML
6. Which JavaScript method is used to write HTML output?
a) document.write()
b) document.output()
c) console.log()
d) document.writeHTML()
7. Which JavaScript method is used to write on browser's console?
a) console.write()
b) console.output()
c) console.log()
d) console.writeHTML()
8. Which of the following is correct about JavaScript?
a) JavaScript is an Object-Based language
b) JavaScript is Assembly-language
c) JavaScript is an Object-Oriented language
d) JavaScript is a High-level language
9. What will be the output of the following JavaScript code snippet?
<p id="demo"></p>
<script>
var js = 10;
js *= 5;
document.getElementById("demo").innerHTML = js;
</script>
a) 10
b) 50
c) 5
d) error
10. What will be the output of the following JavaScript code?
// JavaScript Comparison Operators
function compare()
{
int num=2;
char b=2;
if(a==b)
return true;
else
return false;
}
a) false
b) true
c) compilation error
d) runtime error
11. How is everything treated in HTML DOM?
a) Node
b) Attributes
c) Elements
d) Arrays
12. Which object is the top of the hierarchy?
a) Window Object
b) Document Object
c) Form Object
d) Form Control Elements
13. What is the reason for avoiding the attributes property in the HTML DOM?
a) Found unnecessary
b) Attributes don’t have attributes
c) Attributes have attributes
d) Considered irrelevant
14. Which method is used to append a child node to a parent node in the DOM?
a) appendNode()
b) addChildNode()
c) appendChild()
d) addToParent()
15. How are the objects organized in the HTML DOM?
a) list
b) stack
c) queue
d) Hierarchy
16. The DOM is a ____________ standard.
a) WWWW
b) W3C
c) W3B
d) WMB
17.The HTML DOM is a standard object model and programming interface for HTML.
a) TRUE
b) FALSE
c) Can be true or false
d) Can not say
18. Which of the following is the latest DOM recommendation from the W3C?
a) DOM 1.5
b) DOM level 1
c) DOM level 2
d) None of the above
19. Which defines a standard set of objects for any structured document?
a) HTML DOM
b) Core DOM
c) XML DOM
d) None of these
20. What is the syntax of getElementById() ?
a) document.getElementsByTagName("tagname");
b) document.getElementsByTagName;
c) dgetElementsByTagName("tagname");
d ) getElementsByTagName.document("tagname");
21. A Window object is created automatically with every instance of ________ .
a) <head>
b) <title>
c) <table>
d) <body>
22. The Document object is part of the Which object?
a) Tree
b) System
c) Window
d) None of these.
23. The _______ object represents an HTML hyperlink.
a) href
b) Anchor
c) Reference
d) None of these
24. Which object represents a push button in HTML DOM?
a) Push Button
b) Input Button
c) Button
d) None of these.
25. Which method is used to replace a child node in the DOM?
a) switchNode()
b) replaceNode()
c) switchChild()
d) replaceChild()

15.10SUMMARY
Scripting involves writing scripts using a scripting language, which is a type of programming language
that is typically interpreted rather than compiled. JavaScript has been discussed at length in the unit. This
unit introduced you to the concept of Document Object Model (DOM) acting as the bridge between web
documents (such as HTML and XML documents) and scripting languages like JavaScript. DOM treats an
XML/HTML document, which is a cross-platform and language-independent interface. When an XML or
HTML document is loaded into a web browser, the browser creates a representation of the document in
memory as a tree-like structure, where each element, attribute, and piece of text becomes a node in the
tree. Therefore, DOM can be thought of as a way to interact with and represent objects within HTML
texts. In this unit, the Document Object Model or DOM has been explained in detail.

15.11 ANSWERS TO CHECK YOUR PROGRESS


1. (c) <script>...</script>
2. (c) JavaScript file and in HTML document directly
3. (d) Semicolon (;)
4. (c) getElementById()
5. (d) innerHTML
6. (a) ) document.write()
7. (c) console.log()
8. (a) JavaScript is an Object-Based language
9. (b) 50
10. (b) true
11. (a) Node
12. (a) Window Object
13. (b) Attributes don’t have attributes
14. (c) appendChild()
15. (d) hierarchy
16. (b) W3C
17. (a) True
18. (c) DOM level 2
19. (b) Core DOM
20. (a) document.getElementsByTagName("tagname");
21. (d) <body>
22. (c) Window
23. (b) Anchor
24. (c) Button
25. (d) replaceChild()

15.12 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.

15.13 TERMINAL QUESTIONS


1. What is DOM and what are the objectives of DOM?
2. What are different levels of DOM?
3. Describe the HTML DOM with an example?
4. Explain how to change HTML Attribute using HTML DOM?
5. What are HTML DOM methods?

You might also like