DHTML, or Dynamic HTML, is a technology that differs from traditional HTML.

DHTML
combines HTML, CSS, JavaScript, and the Document Object Model (DOM) to create
dynamic content. It uses the Dynamic Object Model to modify settings, properties, and
methods. Scripting is also an essential component of DHTML, which was part of earlier
computing trends. It is supported by some versions of Netscape Navigator and Internet
Explorer 4.0 and higher.

HTML: HTML stands for Hypertext Markup Language and it is a client-side markup
language. It is used to build the block of web pages.
Javascript: It is a Client-side Scripting language. Javascript is supported by most of
browsers, and also has cookie collection to determine the user’s needs.
CSS: The abbreviation of CSS is Cascading Style Sheet. It helps in the styling of the web
pages and helps in designing of the pages. The CSS rules for DHTML will be modified at
different levels using JS with event handlers which adds a significant amount of dynamism
with very little code.
DOM: It is known as a Document Object Model which acts as the weakest link in it. The
only defect in it is that most of the browsers does not support DOM. It is a way to manipulate
the static content.

DHTML is not a technology; rather, it is the combination of three different technologies,

client-side scripting (JavaScript or VBScript), cascading style sheets and document object
model.

Difference between HTML and DHTML:

  HTML is a markup language while DHTML is a collection of technologies.

 HTML is used to create static webpages while DHTML is capable of creating

dynamic webpages.

 DHTML is used to create animations and dynamic menus but HTML not used.

 HTML sites are slow upon client-side technologies whereas DHTML sites are
comparatively faster.

 Web pages created using HTML are rather simple and have no styling as it uses only
one language whereas DHTML uses HTML, CSS, and Javascript which results in a
much better and way more presentable webpage.

 HTML cannot be used as server side code but DHTML used as server side code.

 DHTML needs database connectivity but not in case of HTML.

 Files in HTML are stored using .htm or .html extension while DHTML uses .dhtm
extension.

 HTML requires no processing from the browser but DHTML does.

 Document Object Model(DOM) along with its properties and methods used to
manipulate Documents, & understand their implementation through the examples.
 The Document Object Model (DOM) is a programming interface for
HTML(HyperText Markup Language) and XML(Extensible markup language)
documents. It defines the logical structure of documents and the way a document is
accessed and manipulated.

DOM is a way to represent the webpage in a structured hierarchical way so that it will
become easier for programmers and users to glide through the document. With DOM, we can
easily access and manipulate tags, IDs, classes, Attributes, or Elements of HTML using
commands or methods provided by the Document object. Using DOM, the JavaScript gets
access to HTML as well as CSS of the web page and can also add behavior to the HTML
elements. so basically Document Object Model is an API that represents and interacts
with HTML or XML documents.

Why DOM is required?

HTML is used to structure the web pages and Javascript is used to add behavior to our web
pages. When an HTML file is loaded into the browser, the javascript can not understand the
HTML document directly. So it interprets and interacts with the Document Object Model
(DOM), which is created by the browser based on the HTML document. DOM is basically
the representation of the same HTML document but in a tree-like structure composed
of objects. Javascript interprets DOM easily, using it as a bridge to access and manipulate the
elements i.e javascript can not understand the tags(<h1>H</h1>) in HTML document but can
understand object h1 in DOM. Now, Javascript can access each of the objects (h1, p, etc) by
using different functions.
The Document Object Model (DOM) is essential in web development for several
reasons:

 Dynamic Web Pages: It allows you to create dynamic web pages. It enables the JavaScript to
access and manipulate page content, structure, and style dynamically which gives interactive
and responsive web experiences, such as updating content without reloading the entire page
or responding to user actions instantly.

 Interactivity: With the DOM, you can respond to user actions (like clicks, inputs, or scrolls)
and modify the web page accordingly.

 Content Updates: When you want to update the content without refreshing the entire page,
the DOM enables targeted changes making the web applications more efficient and user-
friendly.

 Cross-Browser Compatibility: Different browsers may render HTML and CSS in different
ways. The DOM provides a standardized way to interact with page elements.

 Single-Page Applications (SPAs): Applications built with frameworks such as React or

Angular, heavily rely on the DOM for efficient rendering and updating of content within a
single HTML page without reloading the full page.

Structure of DOM
DOM can be thought of as a Tree or Forest(more than one tree). The term structure model is
sometimes used to describe the tree-like representation of a document. Each branch of the
tree ends in a node, and each node contains objects Event listeners can be added to nodes and
triggered on an occurrence of a given event. One important property of DOM structure
models is structural isomorphism: if any two DOM implementations are used to create a
representation of the same document, they will create the same structure model, with
precisely the same objects and relationships.

Why DOM is called an Object Model?

Documents are modeled using objects, and the model includes not only the structure of a
document but also the behavior of a document and the objects of which it is composed like
tag elements with attributes in HTML.

Properties of DOM
Let’s see the properties of the document object that can be accessed and modified by the
document object.
Representation of the DOM

 Window Object: Window Object is object of the browser which is always at top of the
hierarchy. It is like an API that is used to set and access all the properties and methods of the
browser. It is automatically created by the browser.

 Document object: When an HTML document is loaded into a window, it becomes a

document object. The ‘document’ object has various properties that refer to other objects
which allow access to and modification of the content of the web page. If there is a need to
access any element in an HTML page, we always start with accessing the ‘document’ object.
Document object is property of window object.

 Form Object: It is represented by form tags.

 Link Object: It is represented by link tags.

 Anchor Object: It is represented by a href tags.

 Form Control Elements:: Form can have many control elements such as text fields, buttons,
radio buttons, checkboxes, etc.

Accessing HTML,CSS through DCOM

accessing elements in the DOM, several ways to access elements in the DOM: by ID, class,
tag, and query selectors.

Overview
Here is a table overview of the five methods we will cover in this tutorial.

Gets Selector Syntax Method

ID #demo getElementById()

Class .demo getElementsByClassName()

Tag demo getElementsByTagName()

Selector (single) querySelector()

Selector (all) querySelectorAll()

Accessing Elements by ID
The easiest way to access a single element in the DOM is by its unique ID. You can get an
element by ID with the getElementById() method of the document object.

[Link]();

In order to be accessed by ID, the HTML element must have an id attribute. You have a div
element with an ID of demo you can use:

<div id="demo">Access me by ID</div>

In the Console, get the element and assign it to the demoId variable.

1. const demoId = [Link]('demo');

2.

Logging demoId to the console will return our entire HTML element.

1. [Link](demoId);
2.

Output
<div id="demo">Access me by ID</div>

You can be sure you’re accessing the correct element by changing the border property to
purple.

1. [Link] = '1px solid purple';

2.
Once you do so, your live page will look like this:

Accessing an element by ID is an effective way to get an element quickly in the DOM.

However, it has drawbacks: an ID must always be unique to the page, and therefore you will
only ever be able to access a single element at a time with the getElementById() method. If
you wanted to add a function to many elements throughout the page, your code would
quickly become repetitious.

Accessing Elements by Class

The class attribute is used to access one or more specific elements in the DOM. You can get
all the elements with a given class name with the getElementsByClassName() method.

[Link]();

Now we want to access more than one element, and in our example we have two elements
with a demo class.

<div class="demo">Access me by class (1)</div>

<div class="demo">Access me by class (2)</div>

Access these elements in the Console and put them in a variable called demoClass.

1. const demoClass = [Link]('demo');

2.

At this point, it might be tempting to modify the elements the same way you did with the ID
example. However, if you try to run the following code and change the border property of
the class demo elements to orange, you will get an error.
 1. [Link] = '1px solid orange';
2.

Output
Uncaught TypeError: Cannot set property 'border' of undefined

The reason this doesn’t work is because instead of just getting one element, you have an
array-like object of elements.

1. [Link](demoClass);
2.

Output
(2) [[Link], [Link]]

JavaScript arrays must be accessed with an index number. You can change the first element
of this array by using an index of 0.

1. demoClass[0].[Link] = '1px solid orange';

2.

Generally when accessing elements by class, we want to apply a change to all the elements in
the document with that particular class, not just one. You can do this by creating a for loop,
and looping through every item in the array.

1. for (i = 0; i < [Link]; i++) {

2.
3. demoClass[i].[Link] = '1px solid orange';
4.
5. }
6.
You have now selected every element on the page that has a demo class, and changed the
border property to orange.

Cascading Style Sheets (CSS), layers and Document Object Model (DOM) are the tools
that we use, and they function differently to achieve dynamic positioning, the reason
being the incompatibility of browsers

What is Ajax?
Last Updated: 2021-03-04

Asynchronous JavaScript and XML (Ajax) refer to a group of technologies that are used to develop
web applications. By combining these technologies, web pages appear more responsive since small
packets of data are exchanged with the server and web pages are not reloaded each time that a user
makes an input change. Ajax enables a web application user to interact with a web page without the
interruption of con]\stant web page reloading. Website interaction happens quickly with only
portions of the page reloading and refreshing.

Ajax is made up of the following technologies:

 XHTML and CSS for presenting information.

 Document Object Model (DOM) for dynamically interacting with and displaying the
presented information.
 XMLHttpRequest object to manipulate data asynchronously with the web server.
 XML, HTML, and XSLT for data interchange and manipulation.
 JavaScript for binding data requests and information display.

Ajax incorporates these technologies to create a new approach to developing web applications.

Ajax defines a method of initiating client to server communication without page reloads. It
provides a way to enable partial page updates. From a web page user perspective, it means
improved interaction with a web application, which gives the user more control of their
environment, similar to that of a desktop application.

In a traditional web application, HTTP requests, that are initiated by the user's interaction
with the web interface, are made to a web server. The web server processes the request and
returns an HTML page to the client. During HTTP transport, the user is unable to interact
with the web application.

In an Ajax web application, the user is not interrupted in interactions with the web
application. The Ajax engine or JavaScript interpreter enables the user to interact with the
web application independent of HTTP transport to and from the server by rendering the
interface and handling communications with the server on the user's behalf.

Advantages of AJAX
Reduce server traffic and increase speed

The first and foremost advantage of Ajax is its ability to improve the performance and
usability of web applications.

Enable asynchronous calls

Ajax allows its users to make asynchronous calls to the web server without reloading the
whole web page. As a web visitor, you don’t have to wait for the entire page to load entirely
in order to access the entire page content.
XMLHttpRequest

XMLHttpRequest is a request type widely used for sending a request to Ajax pages. You can
also call it with a different name: Asynchronous HTTP request. It plays a vital role in the
implementation of Ajax techniques for web development.

XMLHttpRequest transfers and manipulates the XML data to and from a web service using
HTTP. Its purpose is to establish an independent connection between the webpage’s client-
side and server.

Reduce bandwidth usage

One more advantage of Ajax comes from the bandwidth usage. This action is effective in
improving web performance and load speed as well.

Form Validation

client-side validations occur after submission, the AJAX method enables precise and
immediate form validation. AJAX provides speed, which is also one of its significant
benefits.

Disadvantages of Ajax

 Open-source. View source is allowed, and anyone can view the code source written
for Ajax, which makes it less secure compared to other technologies
 Search Engines cannot index Ajax pages can not be indexed by Google as well as
other search engines
 The usage of Ajax can cause difficulties for your web pages to debug as well as make
them prone to possible security issues in the future
 Most importantly, Ajax has a considerable dependency on JavaScript, so only
browsers that support Javascripts or XMLHttpRequest can use pages with Ajax
techniques
 Users will find it challenging to bookmark a specific state of the application due to the
dynamic web page
 From the users’ perspective, when you click the back button on the browser, you may
not return to the previous state of the page but the entire page. This happens because
the pages with successive Ajax requests are unable to register with the browser’s
history

Purpose of ajax

Ajax enables a web application user to interact with a web page without the interruption
of constant web page reloading. Website interaction happens quickly with only portions of
the page reloading and refreshing. Ajax is made up of the following technologies: XHTML and
CSS for presenting information.

ajax based web application

Asynchronous JavaScript and XML (Ajax) refer to a group of technologies that are used to
develop web applications. By combining these technologies, web pages appear more
 responsive since small packets of data are exchanged with the server and web pages are not
reloaded each time that a user makes an input change.

The Best Alternatives to AJAX

Fetch API: Streamlining Data Retrieval

The Fetch API is a modern JavaScript interface that simplifies making network requests. It
provides a more straightforward and promise-based approach compared to AJAX. With its
native support for Promises, it offers improved error handling and cleaner code structure.

WebSockets: Real-time Communication

WebSockets provide bidirectional, real-time communication between the client and server.
This technology is ideal for applications that require instant updates, such as online gaming,
chat applications, or collaborative tools.

GraphQL: Efficient Data Fetching

GraphQL is a query language for APIs that allows clients to request precisely the data they
need. Unlike traditional REST APIs, which often over-fetch data, GraphQL enables efficient
data fetching, reducing the payload and improving performance.

Server-Sent Events (SSE): Pushing Updates

SSE is a straightforward and efficient way to push updates from the server to the client. It’s
particularly useful for applications that require real-time notifications or live data feeds.

Axios: Simplified HTTP Requests

Axios is a popular JavaScript library for making HTTP requests. It provides a clean and easy-
to-use interface for performing AJAX-like operations without the need for low-level
XMLHttpRequest manipulation.

RESTful APIs: Traditional Approach

While newer technologies like GraphQL offer more flexibility, RESTful APIs remain a
viable and straightforward option for many applications. They follow a resource-based
architecture and are well-suited for CRUD (Create, Read, Update, Delete) operations.

gRPC: High-Performance RPC Framework

gRPC is an open-source RPC (Remote Procedure Call) framework that excels in high-
performance scenarios. It’s an excellent choice for building microservices and applications
that demand low-latency communication.
WebRTC: Peer-to-Peer Communication

WebRTC empowers web applications with peer-to-peer communication capabilities. It’s

ideal for building video conferencing, file sharing, and other real-time collaboration tools
directly in the browser.