MODULE 3
Subject: Web Technologies
Document Object Model (DOM)
• The HTML DOM serves as a blueprint for WebPages, outlining their structure and
individual elements,
• Using JavaScript it can dynamically access and modify the content, structure, and style of
a webpage
• The Document Object Model (DOM) is a programming interface for web documents.
• It represents the structure of an HTML or XML document as a tree of objects.
Features of JavaScript DOM
Tree Structure:
• The DOM is organized like a family tree, with elements having parent and child
relationships, it is easy to find and change things based on their positions.
Element Access:
• You can use different methods like getElementById, getElementByTagName ,
and query Selector to access specific elements on a webpage.
Web Technologies Page 1
• Example: [Link]("myElement").
DOM Structure
• The DOM is structured as a hierarchy or tree, where each node represents a part of the
document, such as elements, attributes, and text.
• The root of the tree is the document object, and the branches are various nodes like
elements, text, and comments.
DOM as an Interface
• The DOM allows scripts (like JavaScript) to interact with and manipulate HTML or
XML content, structure, and styles.
• It provides methods and properties to add, delete, or modify content dynamically.
Accessing DOM Elements
• JavaScript can access elements in the DOM using methods like getElementById(),
getElementsByClassName(), or querySelector().
• Example: [Link]("myElement").
Manipulating DOM Elements
• You can change HTML content and attributes using methods like .innerHTML,
.setAttribute(), and .classList.
• Example: [Link]("myElement").innerHTML = "New Content";
Event Handling
• DOM allows you to attach events to elements using methods like addEventListener().
• Example: [Link]("click", function() { alert("Clicked!"); });
Creating and Removing Elements
• You can create new elements using [Link]() and add them to the DOM
using .appendChild().
• Example: [Link](newElement);
• You can also remove elements using .removeChild().
Web Technologies Page 2
Traversing the DOM
• DOM provides methods for navigating through elements: .parentNode, .childNodes,
.nextSibling, and .previousSibling.
• Example: [Link] to get the parent of an element.
Modifying Styles
• You can manipulate an element’s style using [Link].
• Example: [Link]("myElement").[Link] = "red";
Browser Compatibility
• The DOM is supported by all modern web browsers, though minor differences may exist
between browsers.
• Always check compatibility for older browsers if needed.
Example: This example shows the accessing the JavaScript HTML DOM by id.
<html >
<head>
<title>DOM Example</title>
</head>
<body>
<p id="demo">This is a paragraph.</p>
<!-- Button to change the paragraph content -->
<button onclick="changeContent()">Click me to change content</button>
<script>
// JavaScript function to change the content of the paragraph
function changeContent( )
{
// Accessing the element by its id 'demo' and changing its content
[Link]("demo").innerHTML = "welcome ";
}
</script>
</body>
</html>
Web Technologies Page 3
• The getElementById(id) gives the element id.
• The innerHTML defines the content within the id element.
• The id attribute is used to change an HTML document and its property.
<!DOCTYPE html>
<html>
<body>
<h2>My First Page</h2>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "Hello World!";
</script>
</body>
</html>
• [Link]("demo").innerHTML = "Hello World!";
• [Link]("demo"): This line tells JavaScript to look for an HTML
element with the ID demo.
• document: Refers to the entire HTML document.
• getElementById("demo"): Finds the element with the specified ID, in this case,
the <p> tag with id="demo".
• .innerHTML = "Hello World!": This part sets the HTML content inside the <p>
element.
• .innerHTML: Allows you to modify or access the content inside the element.
• "Hello World!": This is the string of text that will be inserted into the <p> tag.
Finding HTML Elements
Method Description
[Link](id) Find an element by element id
[Link](name) Find elements by tag name
[Link](name) Find elements by class name
• [Link](id): Find an element by its ID
• This method is used to find a single element by its unique id attribute.
<!DOCTYPE html>
<html lang="en">
<head>
Web Technologies Page 4
<title>getElementById Example</title>
</head>
<body>
<p id="demo">This is a paragraph with an ID.</p>
<p> hi</p>
<script>
// Access the element by ID and change its content
[Link]("demo").innerHTML = "Welcome !";
</script>
</body>
</html>
• [Link](name): Find elements by tag name
• This method finds all elements with the specified tag name. It returns a NodeList, which
is a collection of elements.
<html >
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<script>
// Access all <p> elements
var paragraphs = [Link]("p");
// Change the content of all <p> elements
for (var i = 0; i < [Link]; i++) {
paragraphs[i].innerHTML = "hello";
}
</script>
</body>
</html>
• [Link](name): Find elements by class name
• This method finds all elements with the specified class name. It returns a NodeList just
like getElementsByTagName.
<html >
<head>
<title>getElementsByClassName Example</title>
Web Technologies Page 5
<style> .highlight {color: red;} </style>
</head>
<body>
<p class="highlight">This paragraph has the highlight class.</p>
<p class="highlight">This is another highlighted paragraph.</p>
<script>
// Access all elements with the 'highlight' class
var s = [Link]("highlight");
// Change the color of all elements with the 'highlight' class
for (var i = 0; i < [Link]; i++) {
s[i].[Link] = "blue"; // Change the text color to blue
}
</script>
</body>
</html>
Changing HTML Elements
• 1. Property: [Link] = new html content
• This property is used to change the inner HTML content of an element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>innerHTML Example</title>
</head>
<body>
<div id="demo">Original content.</div>
<br/>
Web Technologies Page 6
<button onclick="changeContent()">Click</button>
<br/>
<script>
function changeContent() {
// Change the inner HTML content of the element with id "demo"
[Link]("demo").innerHTML = "MCA";
}
</script>
</body>
</html>
When the button is clicked, the content of the div element with id="demo" changes to
“MCA".
• . Property: [Link] = new value
• This property is used to change the value of an attribute of an HTML element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Change Attribute Example</title>
</head>
<body>
<img id="myImage" src="[Link]" alt="Image">
<button onclick="changeImage()">Change Image</button>
<script>
function changeImage() {
// Change the 'src' attribute of the image
[Link]("myImage").src = "[Link]";
}
</script>
</body>
</html>
When the button is clicked, the src attribute of the image is changed to "[Link]"
• 3. Property: [Link] = new style
• This property is used to change the style of an HTML element directly via JavaScript.
<!DOCTYPE html>
<html lang="en">
Web Technologies Page 7
<head>
<title>Change Style Example</title>
</head>
<body>
<p id="text">This is a paragraph.</p>
<button onclick="changeStyle()">Change Style</button>
<script>
function changeStyle() {
// Change the text color to blue
[Link]("text").[Link] = "blue";
}
</script>
</body>
</html>
When the button is clicked, the text color of the paragraph will change to blue.
• 4. Method: [Link](attribute, value)
• This method is used to change the value of an attribute of an HTML element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>setAttribute Example</title>
</head>
<body>
<a id="myLink" href="[Link] home page </a> <br/><br/>
<button onclick="changeLink()">click</button> <br>
<script>
function changeLink() {
// Change the 'href' attribute using setAttribute
[Link]("myLink").setAttribute("href", "[Link]
[Link]("myLink").innerHTML="[Link]"
}
</script>
</body>
</html>
When the button is clicked, the href attribute of the anchor tag is changed to
"[Link]
Adding and Deleting Elements
Web Technologies Page 8
• 1. Method: [Link](element)
• Description: This method is used to create a new HTML element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Create Element Example</title>
</head>
<body>
<div id="container"></div>
<button onclick="createNewElement()">Create New Element</button>
<script>
function createNewElement() {
// Create a new <p> element
var newParagraph = [Link]("p");
// Add some text to the new element
[Link] = "This is a new paragraph created dynamically!";
// Append the new element to the container
[Link]("container").appendChild(newParagraph);
}
</script>
</body>
</html>
When the button is clicked, a new <p> element with text will be created and added to the div
with id="container".
Web Technologies Page 9
• 2. Method: [Link](element)
• Description: This method removes a child element from the DOM.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Remove Child Example</title>
</head>
<body>
<div id="container">
<p>This is a paragraph.1 </p>
<p>This is a paragraph.2</p>
</div>
<button onclick="removeElement()">Remove Paragraph</button>
<script>
function removeElement() {
// Get the parent element
var container = [Link]("container");
// Get the child element (the <p> tag) and remove it
var paragraph = [Link]("p")[0];
[Link](paragraph);
}
</script>
</body>
</html>
When the button is clicked, the <p> element inside the container is removed.
• 3. Method: [Link](element)
• Description: This method is used to append an HTML element as a child to another
element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Append Child Example</title>
</head>
Web Technologies Page 10
<body>
<div id="container"></div>
<button onclick="appendElement()">Append Element</button>
<script>
function appendElement() {
// Create a new <p> element
var newParagraph = [Link]("p");
[Link] = "This paragraph was appended!";
// Append the new element to the container
[Link]("container").appendChild(newParagraph);
}
</script>
</body>
</html>
When the button is clicked, a new <p> element will be appended to the div with id="container".
• 4. Method: [Link](new, old)
• Description: This method replaces an existing child element with a new one.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Replace Child Example</title>
</head>
<body>
<div id="container">
<p id="oldParagraph">This is the old paragraph.</p>
</div>
<button onclick="replaceElement()">Replace Paragraph</button>
<script>
function replaceElement() {
// Create a new <p> element
var newParagraph = [Link]("p");
[Link] = "This paragraph replaced the old one!";
// Get the old paragraph element
var oldParagraph = [Link]("oldParagraph");
// Replace the old element with the new one
[Link]("container").replaceChild(newParagraph, oldParagraph);
}
</script>
</body>
</html>
Web Technologies Page 11
• 5 Method: [Link](text)
• Description: This method writes directly into the HTML output stream, often used for
dynamic page content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Write Example</title>
</head>
<body>
<button onclick="writeText()">Write Text</button>
<script>
function writeText() {
// Write text directly to the document
[Link]("<h2> Master of Computer Application<h2>");
}
</script>
</body>
</html>
When the button is clicked, the text "This text was written using [Link]()!" will be
written directly to the page as an <h2> element.
JavaScript Events
JavaScript Events are actions or occurrences that happen in the browser. They can be
triggered by various user interactions or by the browser itself. example of JavaScript events
where we handle a click event:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Event Example</title>
</head>
<body>
<button id="myButton">Click Me!</button>
<p id="message"></p>
Web Technologies Page 12
<script>
// Get the button element by its ID
var button = [Link]("myButton");
// Add a click event listener to the button
[Link]("click", function() {
// Change the content of the <p> element when the button is clicked
[Link]("message").innerHTML = "Button was clicked!";
});
</script>
</body>
</html>
Common JavaScript Events
Web Technologies Page 13
Web Technologies Page 14
• 1. onclick: Triggered when an element is clicked.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Click Event Example</title>
</head>
<body>
<button onclick="alert('Button clicked!')">Click Me!</button>
</body>
</html>
2. onmouseover: Fired when the mouse pointer moves over an element.
<!DOCTYPE html>
<html lang="en">
<head>
Web Technologies Page 15
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouseover Event Example</title>
</head>
<body>
<div onmouseover="[Link] = 'yellow';"
onmouseout="[Link] = 'white';" style="width: 200px; height: 200px; border:
1px solid black;">
Hover over me!
</div>
</body>
</html>
When you move the mouse pointer over the div, its background color changes to yellow
3. onmouseout: Occurs when the mouse pointer leaves an element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mouseout Event Example</title>
</head>
<body>
<div onmouseover="[Link] = 'yellow';"
onmouseout="[Link] = 'white';" style="width: 200px; height: 200px; border:
1px solid black;">
Hover over and out!
</div>
</body>
</html>
The background color of the div changes to yellow on mouseover and back to white when the
mouse pointer leaves.
4. onkeydown: Fired when a key is pressed down.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
Web Technologies Page 16
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keydown Event Example</title>
</head>
<body>
<input type="text" onkeydown="[Link]('Key pressed down!')" placeholder="Type
something">
</body>
</html>
When you press any key in the input field, a message "Key pressed down!" will be logged to
the console.
5. onkeyup: Fired when a key is released.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Keyup Event Example</title>
</head>
<body>
<input type="text" onkeyup="[Link]('Key released!')" placeholder="Type something">
</body>
</html>
When you release a key in the input field, a message "Key released!" will be logged to the
console.
6. onchange: Triggered when the value of an input element changes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Change Event Example</title>
</head>
<body>
<input type="text" onchange="alert('Value changed!')" placeholder="Change the value">
</body>
</html>
Web Technologies Page 17
When you change the value of the input field and then click outside of it, an alert will show
"Value changed!".
• 7. onload: Occurs when a page has finished loading.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Load Event Example</title>
</head>
<body onload="alert('Page has finished loading!')">
<h1>Welcome to my webpage!</h1>
</body>
</html>
When the page is fully loaded, an alert will show "Page has finished loading!".
[Link]: Fired when a form is submitted.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Submit Event Example</title>
</head>
<body>
<form onsubmit="alert('Form submitted!'); return false;">
<input type="text" placeholder="Enter something">
<button type="submit">Submit</button>
</form>
</body>
</html>
When the form is submitted (button clicked), an alert will show "Form submitted!".
9. onfocus: Occurs when an element gets focus.
Web Technologies Page 18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Focus Event Example</title>
</head>
<body>
<input type="text" onfocus="[Link] = 'lightblue';" placeholder="Click to
focus">
</body>
</html>
When the input field gets focus, its background color changes to lightblue.
JavaScript Strings
• A JavaScript String is a sequence of characters, typically used to represent text.
• A JavaScript string is zero or more characters written inside quotes.
• Example: let text = "John Doe";
• let carName1 = "Volvo XC60"; // Double quotes
let carName2 = 'Volvo XC60'; // Single quotes
The following are some of the string methods
• slice()
extracts a part of the string based on the given stating-index and ending-index and returns
a new string.
• substring()
returns the part of the given string from the start index to the end index.
• substr()
This method returns the specified number of characters from the specified index from the
given string. It extracts a part of the original string.
• replace()
replaces a part of the given string with another string or a regular expression. The original
string will remain unchanged.
• replaceAll()
returns a new string after replacing all the matches of a string with a specified string or a
regular expression. The original string is left unchanged after this operation.
Web Technologies Page 19
• toUpperCase()
converts all the characters present in the String to upper case and returns a new String
with all characters in upper case. This method accepts single
parameter stringVariable string that you want to convert in upper case.
• toLowerCase()
converts all the characters present in the so lowercase and returns a new string with all
the characters in lowercase.
• trim()
is used to remove either white spaces from the given string. This method returns a new
string with removed white spaces. This method is called on a String object. This method
doesn’t accept any parameter.
• trimStart()
removes whitespace from the beginning of a string. The value of the string is not
modified in any manner, including any whitespace present after the string.
• trimEnd()
removes white space from the end of a string. The value of the string is not modified in
any manner, including any white-space present before the string.
• charAt()
returns the character at the specified index.
• charCodeAt()
returns a number that represents the Unicode value of the character at the specified index.
This method accepts one argument.
• split()
splits the string into an array of sub-strings. This method returns an array. This method
accepts a single parameter character on which you want to split the string.
Examples:
slice()
Web Technologies Page 20
// Define a string variable
let A = 'welcome to mca';
// Use the slice() method to extract a substring
let b = [Link](0, 7);
let c = [Link](8, 10);
let d = [Link](10);
// Output the value of variable
[Link](b);
[Link](c);
[Link](d);
substring()
// Define a string variable
let str = "Mind, Power, Soul";
// Use the substring() method to extract a substring
let part = [Link](6, 11);
// Output the value of variable
[Link](part);
Replace ()
// Define a string variable 'str'
let str = "Mind, Power, Soul";
// Use the replace() method to replace the substring
let part = [Link]("Power", "Space");
// Output the resulting string after replacement
[Link](part);
toUpperCase()
// Define another string variable
let x = ‘mca';
[Link]([Link]());
toLowerCase()
// Define another string variable
let x = ‘MCA';
[Link]([Link]());
Web Technologies Page 21
charAt()
let x = 'Welcome';
let y = ‘MCA ';
// Print the string as it is
[Link](x);
[Link](y);
// As string index starts from zero
// It will return first character of string
[Link]([Link](0));
[Link]([Link](2));
concat()
// to merge strings together
// First string
let str = "Welcome";
// Joining the strings together
let concatStr = [Link](" to MCA");
[Link](concatStr);
Window Object in JavaScript
• In JavaScript, the Window object represents the browser window that contains a DOM
document.
• The Window object offers various properties and methods that enable interaction with the
browser environment, including manipulating the document, handling events, managing
timers, displaying dialog boxes, and more.
Window Object Properties
• The Window object in JavaScript has numerous properties that provide access to various
aspects of the browser environment and the window itself.
Web Technologies Page 22
Window Object Methods:
• Methods in JavaScript are functions associated with objects. They perform operations or
calculate values. Here are some methods of the Window object:
Syntax:
• [Link]()
Web Technologies Page 23
Examples:
[Link]( )
<!DOCTYPE html>
<html>
<head>
<title>Open Window</title>
</head>
<body>
<button onclick="[Link]('[Link] Google</button>
</body>
</html>
Web Technologies Page 24
[Link]()
<!DOCTYPE html>
<html>
<head>
<title>Close Window</title>
</head>
<body>
<button onclick="[Link]()">Close Window</button>
</body>
</html>
[Link]( )
<!DOCTYPE html>
<html>
<head>
<title>Alert Example</title>
</head>
<body>
<button onclick="[Link]('Hello! This is an alert message.')">Show
Alert</button>
</body>
</html>
[Link]( )
<!DOCTYPE html>
<html>
<head>
<title>Prompt Example</title>
</head>
<body>
<button onclick="let name = [Link]('Enter your name:'); alert('Hello, ' +
name);">Ask Name</button>
</body>
</html>
Web Technologies Page 25
[Link]( )
<!DOCTYPE html>
<html>
<head>
<title>Confirm Example</title>
</head>
<body>
<button onclick="if ([Link]('Do you want to continue?')) alert('You clicked
OK!'); else alert('You clicked Cancel!');">Confirm Action</button>
</body>
</html>
[Link]( )
<!DOCTYPE html>
<html>
<head>
<title>Scroll To</title>
</head>
<body style="height: 1500px;">
<button onclick="[Link](0, 500);">Scroll to 500px</button>
</body>
</html>
[Link]( )
<!DOCTYPE html>
<html>
<head>
<title>Scroll By</title>
</head>
<body style="height: 1500px;">
<button onclick="[Link](0, 100);">Scroll Down by 100px</button>
</body>
</html>
Web Technologies Page 26
Web Technologies Page 27
