Scribd
Upload
18 views

JS Dom

The document discusses the JavaScript Document Object Model (DOM), which represents HTML documents as objects that can be manipulated with JavaScript. It allows JavaScript to dynamically access and update the content, structure, and style of documents. The DOM represents the page as a tree of nodes that can be traversed and manipulated. Key topics covered include how the DOM is used to select elements, modify attributes and styles, add/remove elements, and handle events.

Uploaded by

Mehroz Shahbaz
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
18 views

JS Dom

The document discusses the JavaScript Document Object Model (DOM), which represents HTML documents as objects that can be manipulated with JavaScript. It allows JavaScript to dynamically access and update the content, structure, and style of documents. The DOM represents the page as a tree of nodes that can be traversed and manipulated. Key topics covered include how the DOM is used to select elements, modify attributes and styles, add/remove elements, and handle events.

Uploaded by

Mehroz Shahbaz
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

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: 1 of 10
What can JS do with help of DOM?
 With the object model, JavaScript gets all the power it needs to
create dynamic HTML:
1. JavaScript can change all the HTML elements in the page
2. JavaScript can change all the HTML attributes in the page
3. JavaScript can change all the CSS styles in the page
4. JavaScript can remove existing HTML elements and
attributes
5. JavaScript can add new HTML elements and attributes
6. JavaScript can react to all existing HTML events in the
page
7. JavaScript can create new HTML events in the page

Parts or types of DOM:


4. The W3C DOM standard is separated into 3 different parts:
1. Core DOM - standard model for all document types
2. XML DOM - standard model for XML documents
3. HTML DOM - standard model for HTML
documents

What is the HTML DOM?


The HTML DOM is a standard object model and programming interface
for HTML.

It defines:

1. The HTML elements as objects


2. The properties of all HTML elements
3. The methods to access all HTML elements
4. The events for all HTML elements

The HTML DOM is a standard for how to get, change, add,


or delete HTML elements.

The HTML DOM can be accessed with JS (and with other


programming languages).

Property: A property is a value that you can get or set using JS in


HTML DOM (like changing the content of an HTML element).

Method: A method is an action you can do using JS in HTML DOM


(like add or deleting an HTML element).
Example:

<html>

<body>

<p id="demo"></p>

<script>

document.getElementById("demo").innerHTML = "Hello World!";

</script>

</body>

</html>

In this example innerHTML is property and getElementById is


method.

Page no: 1 of 10
The getElementById Method: The most common way to access an
HTML element is to use the id of the element. In the example
above the getElementById method used id="demo" to find the
element.

The innerHTML Property: The easiest way to get the content of an


element is by using the innerHTML property. The innerHTML
property is useful for getting or replacing the content of HTML
elements.

How you can use the document object to access and


manipulate HTML?
1.

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
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

Page no: 1 of 10
b. using document.write() to directly write on output stream
2. JS forms
Form validation
 HTML form validation can be performed by JS
 It validates if the input in fields of form are according to the rules set
by the receiver
<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>
<script>
function validateInput() {
let x = document.forms["myform"]["fname"].value;
let y = document.forms["myform"]["roll"].value;

if (x === "") {
alert("Name must be filled");
return false;
} else if (/[0-9!@#$%^&*()_+={}|[\]\\:;"'<>,.?/]/.test(x)) {
alert("Numbers and symbols are not allowed in the name");
return false;
}

if (y === "") {
alert("Roll number is required");
return false;
} else if (y < 20) {
alert("Roll number must be less than 20");
return false;
} else if (/[!@#$%^&*()]/.test(y)) {
alert("Roll number cannot contain special symbols");
return false;
}
}
</script>
</head>
<body>
<h1>Form Validation</h1>
<form name="myform" action="/" onsubmit="return
validateInput()" method="post">
Name: <input type="text" name="fname">
Roll no: <input type="number" name="roll">
<input type="submit" name="submit">
</form>
</body>
</html>
 Simply type required in field that must be added in form it will
automatically validate the form

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.

Page no: 1 of 10
1. Server side validation is performed by a web server, after input has
been sent to the server.
2. 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

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

HTML Event Attributes:


 A JavaScript can be executed when an event occurs, like when a
user clicks on an HTML element.
 To execute code when a user clicks on an element, add
JavaScript code to an HTML event attribute: onclick=JavaScript
 There can be following events:
o On click
o On mouse over
o Mouse down
o Submit clicked

Event Bubbling or Event Capturing?


Event propagation is a way of defining the element order when an
event occurs. If you have a <p> element inside a <div> element, and the
user clicks on the <p> element, which element's "click" event should be
handled first?

There are two ways of event propagation in the HTML DOM,

Page no: 1 of 10
1. Bubbling:
the inner most element's event is handled first and then the
outer: the <p> element's click event is handled first, then the
<div> element's click event.
2. Capturing:
the outer most element's event is handled first and then the
inner: the <div> element's click event will be handled first, then
the <p> element's click event
 With the addEventListener() method you can specify the propagation
type by using the "useCapture" parameter:

addEventListener(event, function, useCapture);

The removeEventListener() method:


The removeEventListener() method removes event handlers that have
been attached with the addEventListener() method:
Example
element.removeEventListener("mousemove", myFunction);
Page no: 1 of 10

You might also like