FUTM-CPT 211
Back-End Web Development
LanguageJavaScript
Fundamentals
– HTML DOM (Document Object Model)
28/03/2025
WHAT IS THE DOM?
The W3C Document Object Model (DOM) is a platform and language-neutral interface that
allows programs and scripts to dynamically access and update the content, structure, and style
of a document.
The DOM is a W3C (World Wide Web Consortium) standard
The HTML DOM defines a standard way for accessing and manipulating HTML and XML
documents.
With the object model, JavaScript gets all the power it needs to create dynamic HTML.
JavaScript can
Change all the HTML elements in the page – Tags
Change all the HTML attributes in the page – Special words used inside html tags
Change all the CSS styles on the page
Remove existing HTML elements and attributes
Add new HTML elements and attributes
React to all existing HTML events in the page
Create new HTML events on the page
HTML DOM (DOCUMENT OBJECT MODEL)
This is a programming interface that represents the
structure of a web page in a way that programming
languages like JavaScript can understand and manipulate.
Everything is a node
The document itself is a document node
All HTML elements are element nodes
All HTML attributes are attribute nodes
Text inside HTML elements are text nodes
Comments are comment nodes
When a web page is loaded, the browser creates a
DOM of the page.
The HTML DOM model is constructed as a tree of Objects
W3C DOM STANDARD
Core DOM: Standard model for any structured document
XML DOM: Standard model for XML documents
XML DOM defines the objects and properties of all XML elements and the methods
to access them
HTML DOM: Standard model for HTML documents
The HTML DOM defines the objects and properties of all HTML elements and the
methods to access them.
NODE PARENTS, CHILDREN, AND SIBLINGS
In a node tree, the top node is called the root
Every node has exactly one parent, except the root
(which has no parent)
A node can have any number of children
Siblings are nodes with the same parent
Imagine your webpage as a tree
The document is the root.
HTML tags like <html>, <head>, and <body> are branches.
Attributes, text, and other elements are the leaves.
PROGRAMMING INTERFACE
The HTML DOM can be accessed with JavaScript (and other programming
languages like PHP, Dart, Python etc).
All HTML elements are defined as Nodes, and the programming interface is the
object methods and object properties
A method is an action you can do (like add or modify an element).
A property is a value that you can get or set (like the name or content of a node).
WHY IS DOM REQUIRED?
Dynamic Content Updates: Without reloading the page, the DOM allows content
updates (e.g., form validation, AJAX responses).
User Interaction: It makes your webpage interactive (e.g., responding to button
clicks, form submissions).
Flexibility: Developers can add, modify, or remove elements and styles in real-time.
Cross-Platform Compatibility: It provides a standard way for scripts to interact with
web documents, ensuring browser compatibility.
HOW THE DOM WORKS?
The DOM connects your webpage to JavaScript, allowing you to:
Access elements (like finding an <h1> tag).
Modify content (like changing the text of a <p> tag).
React to events (like a button click).
Create or remove elements dynamically.
PROPERTIES OF THE DOM
Node-Based: Everything in the DOM is represented as a node (e.g., element nodes,
text nodes, attribute nodes).
Hierarchical: The DOM has a parent-child relationship, forming a tree structure.
Live: Changes made to the DOM using JavaScript are immediately reflected on the
web page.
Platform-Independent: It works across different platforms, browsers, and
programming languages.
DOM DOCUMENT OBJECT
The document object represents your web page.
If you want to access any element in an HTML page, you always start with accessing
the document object.
Finding HTML Elements
Method Description Example
[Link](id) Find an element by element id [Link]("intro");
[Link] Find elements by tag name [Link]("p");
ame(name)
[Link] Find elements by class name [Link]("intro");
Name(name)
[Link](“na Find elements by CSS Selector [Link]("[Link]");
me");
DOM ELEMENTS - ELEMENT BY ID
The easiest way to find an HTML element
in the DOM is by using the element id.
This example finds the element with
id="intro":
const element =
[Link]("intro");
If the element is found, the method will
return the element as an object (in element).
If the element is not found, element will
contain null.
DOM ELEMENTS - ELEMENT BY TAG NAME
This example finds all <p> elements:
const element =
[Link]("p");
If the element is found, the method will
return the element as an object (in element).
If the element is not found, element will
contain null.
You can mix ID and tag name to target
specifics
DOM ELEMENTS - ELEMENT BY CLASS NAME
If you want to find all HTML elements with
the same class name, use
getElementsByClassName().
This example returns a list of all elements
with class="intro".
const x =
[Link]("intro");
CHANGING HTML ELEMENTS
Property Description
[Link] = new html content Change the inner HTML of an element
[Link] = new value Change the attribute value of an HTML element
[Link] = new style Change the style of an HTML element
Method Description
[Link](attribute, value) Change the attribute value of an HTML element
DOM - CHANGING HTML
The HTML DOM allows JavaScript to change the content of
HTML elements.
The easiest way to modify the content of an HTML element is
by using the innerHTML property.
To change the content of an HTML element, use this syntax:
[Link](id).innerHTML = new HTML
The HTML document above contains a <p> element with id="p1"
We use the HTML DOM to get the element with id="p1"
A JavaScript changes the content (innerHTML) of that element to "New
text!“
Writing date
<script>
[Link](Date());
</script>
ADDING AND DELETING ELEMENTS
Method Description
[Link](element) Create an HTML element
[Link](element) Remove an HTML element
[Link](element) Add an HTML element
[Link](new, old) Replace an HTML element
[Link](text) Write into the HTML output stream
DOM - CHANGING CSS
The HTML DOM allows JavaScript to change the
style of HTML elements.
To change the style of an HTML element, use this
syntax:
[Link](id).[Link] = new
style
DOM - CHANGING CSS – USING EVENTS
The HTML DOM allows you to execute code
when an event occurs.
Events are generated by the browser when
"things happen" to HTML elements:
An element is clicked on
The page has loaded
Input fields are changed
HTML CONSTRAINT VALIDATION
HTML5 introduced a new HTML validation concept called constraint validation.
helps ensure that user input in web forms meets certain criteria before submission.
This built-in validation mechanism provides a way to define rules and constraints for
input fields, enhancing both user experience and data integrity
HTML constraint validation is based on:
Constraint validation HTML Input Attributes
Constraint validation CSS Pseudo Selectors
Constraint validation DOM Properties and Methods
CONTRAINT VALIDATION – HTML INPUT
Attribute Description
disabled Specifies that the input element should be disabled
max Specifies the maximum value of an input element <input type="number" min="1" max="10">
min Specifies the minimum value of an input element
pattern Specifies the value pattern of an input element <input type="text" pattern="[A-Za-z]">
required Specifies that the input field requires an element
type Specifies the type of an input element <input type=“email" required>
HOW IT WORKS
When a user attempts to submit a form, the browser checks each input field
against the specified constraints.
If any of the validations fail, the submission is blocked, and the user is
informed about what needs to be corrected.
This happens before any JavaScript or server-side validation, which enhances
performance and provides quicker feedback.
CONSTRAINT VALIDATION CSS PSEUDO SELECTORS
Selector Description
:disabled Selects input elements with the "disabled" attribute specified
:invalid Selects input elements with invalid values
:optional Selects input elements with no "required" attribute specified
:required Selects input elements with the "required" attribute specified
:valid Selects input elements with valid values
JAVASCRIPT FORM VALIDATION
HTML form validation can be done by
JavaScript.
If a form field (fname) is empty, this function
alerts a message, and returns false, to prevent
the form from being submitted:
VALIDATING NUMBER
AUTOMATIC HTML FORM VALIDATION
HTML form validation can be performed automatically by the browser:
If a form field (fname) is empty, the required attribute prevents this form from being
submitted:
<form action="/action_page.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="Submit">
</form>
DATA VALIDATION
Data validation is the process of ensuring that user input is clean, correct, and useful.
Typical validation tasks are:
has the user filled in all required fields?
has the user entered a valid date?
has the user entered text in a numeric field?
Most often, data validation aims to ensure correct user input.
Validation can be defined by many different methods and deployed in many different
ways.
Server-side validation is performed by a web server after input has been sent to the
server.
Client-side validation is performed by a web browser before input is sent to a web server.
END
