Scribd
Upload
8 views

Module 5 DOM

Uploaded by

shefaligupta0408
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
8 views

Module 5 DOM

Uploaded by

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

Document Object

Model
Module 5
Document Object Model
The components of web pages are represented by objects that are organized in a
hierarchical structure called Document Object Model (DOM)
DOM is a programming interface for HTML and XML documents.
It defines the logical structure of documents and the way a document is accessed
and manipulated
The hierarchical structure is represented as a parent-child relationship
Child objects are basically properties of their parent objects
These objects have properties and methods that can be used to work with web page
Document Object
The document object contains information about the current HTML document
displayed on the window.
An HTML document is represented as a DOM tree by the browser.
The browser traverses the DOM tree and renders the document on the screen
The document object has many properties like bgcolor, fgcolor, forms, title, URL etc.
It has methods like getElementById, createElement, createAttribute etc.
DOM: Example
<html>
<head>
<title>My title</title>
</head>
<body>
<a href=“abc.html”>My link</a>
<h1>My header</h1>
</body>
</html>
JavaScript has the capability to access and manipulate elements from the window and
document.
The top level object window and all the direct child objects (E.g. document,
navigator, history etc.) can be accessed directly
Any other object is referenced by its name prefixed by names of all parent objects in
order separated by dots(.)
For example:
document.body.p
Methods to access HTML elements:
document.getElementById(ID): returns reference to the element with given ID
document.getElementsByTagName(name): returns collection of all element of the
given tag name
Image Object
The Image Object in HTML DOM is used to represent the HTML < image > element
Creating image
The Image() constructor creates a new HTML image element instance.
Example:
const myImage = new Image(100, 200); //Image(width, height)
myImage.src = "picture.jpg";
document.body.appendChild(myImage);
The above code is equivalent to
<img src= “picture.jpg” width=100 height=200>
The image element can be accessed by using the getElementById() method
var x = document.getElementById(“myImg”);

The major properties of an image object are


• Width
• Height
• Src
Event Handling
The basic purpose of JavaScript is to provide interactivity to the web page.
This interactivity is provided by responding to user actions.
The events represent that some activity is performed by the user or by the browser.
The events caused by users are called interactive events and others are called non-interactive
events.
A JavaScript code can be included in HTML to react to these events by executing a set of
statements.
This process of reacting to the events is called Event Handling.
Some examples of HTML events:
• An HTML web page has finished loading
• An HTML input field was changed
• An HTML button was clicked
To assign events to HTML elements you can use event attributes.
Some event attributes are
Type Event Performed Event Handler Description

click onclick When mouse click on an element


Mouse
mouseover onmouseover When the cursor of the mouse comes over the element

Keyboard Keydown & Keyup onkeydown & onkeyup When the user press and then release the key

focus onfocus When the user focuses on an element

submit onsubmit When the user submits the form


Form
blur onblur When the focus is away from a form element
When the user modifies or changes the value of a form
change onchange
element

load onload When the browser finishes the loading of the page

When the visitor leaves the current webpage, the browser


Window unload onunload
unloads it

resize onresize When the visitor resizes the window of the browser
Example (focus event):
Form Data Validation
When you enter data, the browser and/or the web server will check to see that the
data is in the correct format and within the constraints set by the application.
If the information is correctly formatted, the application allows the data to be
submitted to the server and (usually) saved in a database;
If the information isn't correctly formatted, it gives the user an error message
explaining what needs to be corrected and lets them try again.
This is called form validation
JavaScript provides the facility to validate the form in the browser on the client side.
Submit event
The onSubmit event is typically associated with HTML forms.
It is triggered when a user submits a form by clicking the submit button or pressing
the Enter key while focusing on a form field.
The onSubmit event is crucial for form validation, data submission, and other form-
related functionalities.
Example:

Here, we are validating the form on the form submit event.


The user will not be forwarded to the next page until the given values are correct.
Browser Object/ Window Object
The browser’s window is represented by the Window Object in all types of browsers.
The window object is the top-level object in the DOM.
It represents the entire browser window that displays the document.
All objects are direct or indirect children of the window object.
It has many useful properties like document, event, history, name, screen etc.
It provides many useful methods that may perform specific tasks; like open, close,
blur, close, focus, print, resize etc.
Example:
window.open("https://google.com");
Some major methods of window object are:

•window.open() - open a new window


•window.close() - close the current window
•window.moveTo() - move the current window
•window.resizeTo() - resize the current window

You might also like