Scribd
Upload
30 views7 pages

Sample

The document discusses the JavaScript DOM and how it represents HTML documents as objects that can be manipulated. The DOM allows JavaScript to dynamically access and change HTML elements, attributes, and styles. It describes common DOM methods like getElementById() for finding elements and setAttribute() for changing them. Validation, dynamic content, and other DOM uses are also covered.

Uploaded by

Mehroz Shahbaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
30 views7 pages

Sample

The document discusses the JavaScript DOM and how it represents HTML documents as objects that can be manipulated. The DOM allows JavaScript to dynamically access and change HTML elements, attributes, and styles. It describes common DOM methods like getElementById() for finding elements and setAttribute() for changing them. Validation, dynamic content, and other DOM uses are also covered.

Uploaded by

Mehroz Shahbaz
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

JS DOM

1. Document Object Model represents the structure and content to


web page or document in memory.
2. It allows programs (JS) to change the structure of document like
style and content.
3. It represents the page as tree of nodes and element,
enabling the interaction with page elements.

"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.”

Why Is the DOM Important?


1. Dynamic Web Pages:
The DOM allows you to create
dynamic web pages by modifying their content.
2. Interaction:
You can use JavaScript to access
and manipulate any part of the document.
3. Web APIs:
While the DOM is not part of the core JavaScript language, it’s
a Web API used to build websites.

Page no: 7 of 7
What can JS do with help of DOM?
 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

JavaScript can change all the CSS styles in the page

It can react to all elements and attributes

JS can add new HTML elements

JS can remove existing elements.

Page no: 7 of 7
Parts or types of DOM:
The W3C DOM standard is separated into 3 different parts:

Core DOM - standard


model for all document
types

XML DOM - standard


model for XML
documents

HTML DOM - standard


model for HTML
documents

How you can use the document object to access and


manipulate HTML?

Finding Changing Adding and Adding Finding


HTML HTML deleting event HTML
elements elements elements handlers objects

Page no: 7 of 7
Methods and description:

Finding HTML elements


Method Description
document.getElementById(id) Find an element by
element id
document.getElementsByTagName(name) Find elements by tag
name
document.getElementsByClassName(name) Find elements by class
name
Changing HTML elements
Method Description
element.setAttribute(attribute, value) Change the attribute
value of an HTML
element
Adding and deleting elements
Methods Description
document.removeChild(element) Remove an HTML
element
document.appendChild(element) Add an HTML
element
document.replaceChild(new, old) Replace an HTML
element

Page no: 7 of 7
Adding event handlers
Method Description
document.getElementById(id).onclick = function() Adding event handler
{code}
code to an onclick
event
document.anchors Returns all elements
that have a name
attribute
document.applets Deprecated
document.baseURI Returns the absolute
base URI of the
document
document.body Returns the element
document.cookie Returns the
document's cookie

Others functions of HTML DOM:


1. Dynamic content:
a. using date function is a method of displaying dynamic
content
b. using document.write() to directly write on output stream
2. Data validation

Page no: 7 of 7
Data Validation
 Data validation is the process of ensuring that user input is
clean, correct, and useful.
 Typical validation tasks are:
o has the user filled in all required fields?
o has the user entered a valid date?
o has the user entered text in a numeric field?
 Validation can be defined by many different methods, and
deployed in many different ways.
o Server side validation is performed by a web server, after
input has been sent to the server.
o Client side validation is performed by a web browser,
before input is sent to a web server.

HTML Constraint Validation


 HTML5 introduced a new HTML validation concept called
constraint validation.
 HTML constraint validation is based on:
o Constraint validation HTML Input Attributes
o Constraint validation CSS Pseudo Selectors
o Constraint validation DOM Properties and Methods

Page no: 7 of 7
Constraint validation HTML Input Attributes
Attribute Description
disabled Specifies that the input element should be
disabled
max Specifies the maximum value of an input
element
min Specifies the minimum value of an input
element
pattern Specifies the value pattern of an input
element
required Specifies that the input field requires an
element
type Specifies the type of an input element
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

-----Completed------

Page no: 7 of 7

You might also like