NAME Y.

Pavaneswar Reddy

REG ﾠ NO 23695A0526

YEAR ﾠ&ﾠ SEM III ﾠ&ﾠ I

BRANCH ﾠ&ﾠ SECTION CSE ﾠ–ﾠ D

ASSIGNMENT II

SET ﾠ NO 6

SUBJECT ﾠ CODE ﾠ&ﾠ NAME 20CSE404-WEB TECHNOLOGIES (PE1)ﾠ

FACULTY ﾠ NAME R VIJAYAGANTH

1. What are the various levels of DOM? Explain each of them in detail.
The Document Object Model (DOM) is an essential concept in web
development, especially when working with HTML and XML documents.
The DOM represents a web document as a tree structure where each node
corresponds to part of the document, such as elements, attributes, and text.
This hierarchical representation allows programming languages like
JavaScript to manipulate the structure, style, and content of web
documents dynamically.
1. Document Level
The Document Level is the root level of the DOM and represents the
entire HTML or XML document. The document object serves as the entry
point for manipulating the structure of the entire document.
 Role of the Document Object: The document object provides access to
all elements, attributes, and text in the document. It allows developers
to interact with the document, create new elements, and manage
events.
 Key Methods:
o getElementById(): Retrieves an element by its ID.
o createElement(): Creates a new HTML element.
o querySelector(): Selects the first element matching a CSS selector.
o getElementsByClassName(): Returns a list of elements with a
specific class.
Example:
let header = document.getElementById('header');
let newDiv = document.createElement('div');
document.body.appendChild(newDiv);
2. Element Level
At the Element Level, the DOM represents individual HTML elements like
<div>, <p>, <a>, and others as separate nodes. Each HTML element in the
document becomes an Element node in the DOM.
  Role of Elements: Elements are the building blocks of a web page. They
represent the content the user interacts with, such as buttons, links, and
images. You can select, change, or remove these elements using DOM
methods.
 Key Properties and Methods:
o innerHTML: Gets or sets the HTML content inside an element.
o textContent: Gets or sets the text content of an element (ignores
any HTML tags).
o classList: Manages the classes of an element (e.g., add(),
remove()).
o id: Retrieves or sets the ID of an element.
Example:
Html: <div id="container">
<p>Welcome to the page!</p>
</div>
JavaScript:
let container = document.getElementById('container');
container.innerHTML = '<p>New Content!</p>';
3. Attribute Level
The Attribute Level deals with the attributes of HTML elements, like id, class,
href, and src. In the DOM, attributes are separate from elements but are
important for controlling their behavior.
 Role of Attributes: Attributes provide extra information about an
element. For example, the href attribute in an <a> tag defines the link
destination, and the src attribute in an <img> tag defines the image
source.
 Key Methods:
o getAttribute(): Gets the value of an attribute.
o setAttribute(): Sets the value of an attribute.
 o removeAttribute(): Removes an attribute.
o hasAttribute(): Checks if an attribute exists.
Example:
Html: <a href="https://www.example.com" id="myLink">Click Here</a>
Javascript:
let link = document.getElementById('myLink');
`link.setAttribute('href', 'https://www.newlink.com');
4. Text Node Level
The Text Node Level deals with the actual text inside HTML elements. Text
nodes represent the content between the opening and closing tags of an
element.
 Role of Text Nodes: Text nodes store the visible text on a webpage. They
can be accessed, modified, or replaced with new text using JavaScript.
 Key Properties:
o nodeValue: Gets or sets the text content of a text node.
o textContent: Similar to nodeValue, but can also be used on
elements to retrieve or set the text inside, including child
elements.
Example:
Html: <p>This is a paragraph.</p>
Javascript:
let para = document.querySelector('p');
para.textContent = 'New paragraph text';
5. Child Node Level
The Child Node Level refers to the immediate children of an element, which
can be other elements, text nodes, or comment nodes. An element in the DOM
can have one or more child nodes.
  Role of Child Nodes: Child nodes are direct descendants of an element
and are part of the document's hierarchical structure. They can be
accessed and modified using DOM methods.
 Key Methods:
o childNodes: Returns all child nodes of an element, including text
and comment nodes.
o firstChild: Retrieves the first child node.
o lastChild: Retrieves the last child node.
o appendChild(): Adds a new child node.
o removeChild(): Removes a child node.
Example:
Html: <div id="container">
<p>First paragraph</p>
<p>Second paragraph</p>
</div>
Javascript:
let container = document.getElementById('container');
let firstParagraph = container.firstChild;
container.removeChild(firstParagraph);
6. Event Level
The Event Level in the DOM handles user interactions, such as clicks, key
presses, and mouse movements, by processing events and enabling
interactivity on web pages.
 Role of Events: Events allow web pages to respond to actions like clicking
a button or pressing a key. The DOM provides methods to add, remove,
and trigger event listeners.
 Key Methods:
o addEventListener(): Adds an event listener to an element to
handle events.
 o removeEventListener(): Removes a previously added event
listener.
o dispatchEvent(): Triggers an event programmatically.
Example:
Html: <button id="myButton">Click me</button>
Javascript: let button = document.getElementById('myButton');
button.addEventListener('click', function() {
alert('Button clicked!');
});
2. Explain in detail about database connectivity with JSP with suitable
examples.
Database Connectivity with JSP (JavaServer Pages):
Database connectivity in JSP (JavaServer Pages) involves connecting a JSP page
to a relational database to retrieve, insert, update, or delete data. This is
typically done using JDBC (Java Database Connectivity), which is an API for
connecting Java applications to databases.
The general process of database connectivity with JSP involves:
1. Loading the JDBC driver
2. Establishing a connection to the database
3. Creating a statement
4. Executing queries
5. Processing the result set
6. Closing the connection

Example: Connecting to MySQL Database using JSP

Step 1: Load the JDBC Driver

The first step is to load the JDBC driver for the database. In JSP, you typically use the
Class.forName() method to load the driver.

Example:
<%@ page import="java.sql.*" %>
<%
try {
// Load the JDBC driver for MySQL
Class.forName("com.mysql.cj.jdbc.Driver");
} catch (ClassNotFoundException e) {
out.println("Driver not found: " + e.getMessage());
}
%>
Step 2: Establish Database Connection
Once the JDBC driver is loaded, you can establish a connection to the database
using the DriverManager.getConnection() method. This method requires a
connection string, username, and password.
Example:
<%
Connection conn = null;
String url = "jdbc:mysql://localhost:3306/mydatabase"; // Database URL
String username = "root"; // Database username
String password = "password"; // Database password

try {
conn = DriverManager.getConnection(url, username, password);
out.println("Connection successful!");
} catch (SQLException e) {
out.println("Connection failed: " + e.getMessage());
}
%>
Step 3: Create a Statement and Execute Queries
Once the connection is established, you can create a Statement object and
execute queries to interact with the database.
Example (retrieving data from a table):
<%
String query = "SELECT * FROM employees"; // Sample SQL query
Statement stmt = null;
ResultSet rs = null;

try {
stmt = conn.createStatement();
rs = stmt.executeQuery(query);

// Processing the result set

while (rs.next()) {
String employeeName = rs.getString("name");
int employeeAge = rs.getInt("age");
out.println("Name: " + employeeName + ", Age: " + employeeAge +
"<br>");
}
} catch (SQLException e) {
out.println("Error executing query: " + e.getMessage());
}
%>
Step 4: Close the Connection
It is important to close the database connection and other resources like
Statement and ResultSet to free up resources.
Example:
<%
try {
if (rs != null) rs.close();
if (stmt != null) stmt.close();
if (conn != null) conn.close();
} catch (SQLException e) {
out.println("Error closing resources: " + e.getMessage());
}
%>