FULLSTACK DEVLOPMENT

FULL SATCK DEVELOPMENT

MODULE-2
DOCUMENT OBJECT MODEL (DOM):
• The Document Object Model (DOM) specifies how browsers should create a model of an HTML
page and how JavaScript can access and update the contents of a web page while it is in the
browser window.
• As a browser loads a web page, it creates a model of that page. The model is called a DOM tree,
and it is stored in the browsers' memory.
It consists of four main types of nodes.
1. The document node
2. Element nodes
3. Attribute nodes
4. Text nodes

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 1

FULLSTACK DEVLOPMENT

The document node:

• Every element, attribute, and piece of text in the HTML is represented by its own DOM node.
• At the top of the tree a document node is added; it represents the entire page.
Element nodes:
• Access the DOM tree, you start by looking for elements. Once you find the element you want,
then you can access its text and attribute nodes if you want to.
Attribute nodes:
• The opening tags of HTML elements can carry attributes and these are represented by
attribute nodes in the DOM tree.

Text nodes:
• Once you have accessed an element node, you can then reach the text within that
element. This is stored in its own text node.
Accessing and updating the DOM tree involves two steps:
1: Locate the node that represents the element you want to work with.
2: Use its text content, child elements, and attributes.
Step-1: Access the elements

• Select an individual element node:

Three common ways to select an individual element:
1. get Element Byld () Uses the value of an element's id attribute (which should be unique
within the page).
2. querySe1ector () Uses a CSS selector, and returns the first matching element.
3. You can also select individual elements by traversing from one element to another
within the DOM tree.
• There are three common ways to select multiple elements.
1. getElementsByClassName() Selects all elements that have a specific value for
their class attribute.
2. getElementsByTagName() Selects all elements that have the specified tag name.
3. querySelectorAll() Uses a CSS selector to select all matching elements.
• You can move from one element node to a related element node.
1. parentNode Selects the parent of the current element node (which will return just
one element).
2. previousSibling/nextSibling Selects the previous or next sibling from the DOM
tree.
3. firstChild/lastChild Select the first or last child of the current element.
Step -2: Work with those elements:
a. Access/ update text nodes: nodeValue This property lets you access or update
contents of a text node.
b. Work with html content: One property allows access to child elements and text
content: innerHTML, Another just the text content: . textContent.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 2

FULLSTACK DEVLOPMENT

Several methods let you create new nodes, add nodes to a tree, and remove nodes
from a tree: create Element(), createTextNode() ,appendChild() / removeChild()
This is called DOM manipulation.
c. Access or update attribute values: Here are some of the properties and methods
you can use to work with attributes: className /id.
get or update the value of the cl ass and id attributes. hasAttribute()
getAttribute() setAttribute() removeAttribute() The first checks if an attribute
exists. The second gets its value. The third updates the value. The fourth removes
an attribute.
DOM Manipulation: DOM manipulation refers to a set of DOM methods that allows you to
create element and text nodes, and then attach them to the DOM tree or remove from the DOM
tree.
Or
DOM manipulation refers to using a set of methods and properties to access, create, and update
elements and text nodes.

DOM manipulation offers another technique to add new content to a page (rather than
innerHTML).
ADDING ELEMENTS:
It involves three steps:
1. Create the element: creating a new element node using the
createElement() method. This element node is stored in a variable. When
the element node is created, it is not yet part of the DOM tree. It is not
added to the DOM tree until step 3.
2. Give it content: createTextNode() creates a new text node. Again, the
node is stored in a variable. It can be added to the element node using the
appendChild() method. This provides the content for the element,
although you can skip this step if you want to attach an empty element to
the DOM tree.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 3

FULLSTACK DEVLOPMENT

3. Add it to the DOM: you can add it to the DOM tree using the appendChi1d ()
method. The appendChi1d() method allows you to specify which element you
want this node added to, as a child of it.

Example:

REMOVING ELEMENTS: DOM manipulation can be used to remove elements from the DOM tree.
• Store the element to be removed in a variable: selecting the element that is going to
be removed and store that element node in a variable.
• Store the parent of that element in a variable: Next, you find the parent element that
contains the element you want to remove and store that element node in a variable. The
simplest way to get this element is to use the parentNode property of this element.
• Remove the element from its containing element: The removeChild() method is used
on the containing element that you selected in step 2. The removeChild() method takes
one parameter: the reference to the element that you no longer want. Removing elements
from the DOM will affect the index number of siblings in a Nodelist
Example:

ADVANTAGES
• It is suited to changing one element from a DOM fragment where there are many siblings.
• It does not affect event handlers.
• It easily allows a script to add elements incrementally (when you do not want to alter a lot of
code at once).
DISADVANTAGES
• If you have to make a lot of changes to the content of a page, it is slower than innerHTML.
• You need to write more code to achieve the same thing compared with innerHTML.
Selecting an element from a nodelist:
• There are two ways to select an element from a Nodelist:
• The item() method and array syntax.
• Both require the index number of the element you want.
1.THE item() METHOD:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 4

FULLSTACK DEVLOPMENT

• Nodelists have a method called item() which will return an individual node from the Node list.
• Select elements that have a cl ass attribute whose value is hot and store the Nodelist in variable
called elements.
• Use the 1ength property to check how many elements were found. If 1 or more are found, run
the code in the if statement.
• Store the first element from the Node List in a variable called first item. (It says 0 because
index numbers start at zero.)

2. Array Syntax:Array syntax is preferred over the item() method because it is faster.
• Access individual nodes using a square bracket syntax similar to that used to access
individual items from an array.
• Specify the index number of the element you want inside the square brackets that follow
the NodeList.
• If you create a variable to hold a NodeList but there are no matching elements,the
variable will be an empty NodeList.
• When you check the length property of the variable,it will return the number 0 because it
does not contain any elements.

Selecting elements using class attributes:

• The get ElementsByCl ass Name() method allows you to select elements whose c 1ass attribute
contains a specific value.
• The method has one parameter: the class name which is given in quotes within the parentheses
after the method name.
• Because several elements can have the same value for their class attribute, this method always
returns a Nodelist.

Selecting elements by tag name:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 5

FULLSTACK DEVLOPMENT

• The getElementsByTagName () method allows you to select elements using their tag name.
• The element name is specified as a parameter, so it is placed inside the parentheses and is
contained by quote marks.
• Note that you do not include the angled brackets that surround the tag name in the HTML (just
the letters inside the brackets).

Selecting elements using css selectors:

• querySe1ector() returns the first element node that matches the CSS-style selector.
• querySe1ectorA11 () returns a Nodelist of all of the matches.
• Both methods take a CSS selector as their only parameter. The CSS selector syntax offers more
flexibility and accuracy when selecting an element than.
• Specifying a class name or a tag name, and should also be familiar to front-end web developers
who are used to targeting elements using CSS.

Attribute And Get Its Values:

• Once you have an element node,you can use other properties and methods on that element node
to access and change its attributes.
• There are two steps to accessing and updating attributes
1. Select the element node that carries the attribute and follow it with a period
symbol.
2. Then, use one of the methods or properties below to work with that elements
attributes.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 6

FULLSTACK DEVLOPMENT

Example:

Removing attributes:
• To remove an attribute from an element, first select the element, then call removeAttr ibute (). It
has one parameter: the name of the attribute to remove.

Different Event Types:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 7

FULLSTACK DEVLOPMENT

Bind an event to an element:

• Event handlers let you indicate which event you are waiting for on any particular element.
There are three types of event handlers.
• Html Event Handlers
• Traditional Dom Event Handlers

Html Event Handlers:

• Early versions of HTML included a set of attributes that could respond to events on the element
they Dom Level 2 Event Listeners
• were added to.
• The attribute names matched the event names. Their values called the function that was to run
when that event occurred.
• This method of event handling is no longer used because it is better to separate the JavaScript
from the HTML.
Traditional Dom Event Handlers:
• All modern browsers understand this way of creating an event handler, but you can only attach
one function to each event handler.
• The syntax to bind an event to an element using an event handler, and to indicate which function
should execute when that event fires:

Example:

Dom Level 2 Event Listeners:

• The event handler appears on the last line of the JavaScript. Before the DOM event handler, two
things are put in place:
1. If you use a named function when the event fires on your chosen DOM node, write that
function first.
2. The DOM element node is stored in a variable. Here the text input (whose id attribute has
a value of username) is placed into a variable called elUsername.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 8

FULLSTACK DEVLOPMENT

EVENT LISTENERS:
• Event listeners are a more recent approach to handling events. They can deal with more than one
function at a time but they are not supported in older browsers.
• Here is the syntax to bind an event to an element using an event listener, and to indicate which
function should execute when that event fires:

Using parameters with event handlers & listeners:

• Because you cannot have parentheses after the function names in event handlers or listeners,
passing arguments requires a workaround.

EVENT DELEGATION:

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 9

FULLSTACK DEVLOPMENT

•Creating event listeners for a lot of elements can slow down a page, but event flow allows you to
listen for an event on a parent element.
• If users can interact with a lot of elements on the page, such as:
• A lot of buttons in the UI
• A long list
• Every cell of a table adding event listeners to each element can use a lot of memory and slow
down performance.
• Because events affect containing (or ancestor) elements), you can place event handlers on a
containing element and use the event object's target property to find which of its children the
event happened on.
• By attaching an event listener to a containing element, you are only responding to one element.
ADDITIONAL BENEFITS OF EVENT DELEGATION
• Works with new elements:
If you add new elements to the DOM tree, you do not have to add event handlers to the new
elements because the job has been delegated to an ancestor.
• Solves limitations with this keyword:
Earlier in the chapter, the this keyword was used to identify an event's target, but that technique
did not work in IE8, or when a function needed parameters.
• Simplifies your code:
It requires fewer functions to be written, and there are fewer ties between the DOM and your
code, which helps maintainability.

Different Types of Events:

• Events are defined in:
• The W3C DOM specification
• The HTMLS specification
• In Browser Object Models
i)USER INTERFACE EVENTS: User interface CUI) events occur as a result of interaction with the
browser window rather than the HTML page contained within it, e.g., a page having loaded or the
browser window being resized.

ii)Load Event: The load event is commonly used to trigger scripts that access the contents of the page.
In this example, a function called setup() gives focus to the text input when the page has loaded.
MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 10
FULLSTACK DEVLOPMENT

iii)Focus & Blur Events: The HTML elements you can interact with, such as links and form elements,
can gain focus. These events fire when they gain or lose focus.

Example:

Mouse events:
• The mouse events are fired when the mouse is moved and also when its buttons are clicked.
• All of the elements on a page support the mouse events, and all of these bubble. Note that actions
are different on touchscreen devices.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 11

FULLSTACK DEVLOPMENT

Click event:

Keyboard events: The keyboard events are fired when a user interacts with the keyboard.

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 12

FULLSTACK DEVLOPMENT

Example:

Form Events: There are two events that are commonly used with forms. In particular you are likely to
see submit used in form validation and focus and blur .

HTML5 events: Here are three page-level events that have been included in versions of the HTML5

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 13

FULLSTACK DEVLOPMENT

Example :

MANJUNATH J P,ASST.PRO DEPT.ISE,VEMANA IT Page 14