Javascript 02 bom and dom

BOM & DOM? JavaScript is an object-based language that manipulates an object by changing one or more of its properties or by applying a method that affects the object’s behavior within

BOM & DOM

1 BOM & DOM?

 JavaScript is an object-based language that manipulates an object by changing one or more of its properties or by

applying a method that affects the object’s behavior within the web page or web browser

 There are four kinds of JavaScript objects:

– built-in objects that are intrinsic to the JavaScript language

– browser objects that are part of the browser.

– document objects that are part of the web document

– customized objects that are created by the programmer for use in his

or her application.

 Browser objects and document objects are organized in

hierarchical structures respectively called the browser object model (BOM) and the document object model (DOM)

2 Object hierarchy

 Document: contains objects found within the web page document

 History: contains the browser’s history list

 Screen: contains information about the computer screen

 Navigator: contains information about the browser application

 Location: contains information about the current URL

3.1 HTML DOM?

 When a web page is loaded, the browser creates a Document Object Model (DOM) of the page.

 The HTML DOM model is constructed as a tree of objects

 With the object model, JavaScript gets all the power to:

– change the content, attributes or styles (CSS) of HTML elements

– react to HTML DOM events

– add and delete HTML elements

 The HTML DOM can be accessed with JavaScript.

 In the DOM, all HTML elements are defined as objects

 The programming interface is the properties and methods of each object

 A property is a value that you can get or set (like changing the content of an HTML element)

 A method is an action you can do (like add or deleting an

HTML element)

 The getElementById Method

– The most common way to access an HTML element is to use the id of the element.

– In the example, 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.

3.2 HTML DOM – Document Object

element.setAttribute(attribute, value) Change the attribute value of an HTML element

 Adding and Deleting Elements

 Adding Events Handlers

document.createElement(element) Create an HTML element

document.removeChild(element) Remove an HTML element

document.appendChild(element) Add an HTML element

document.replaceChild(new, old) Replace an HTML element

document.write(text) Write into the HTML output stream

document.getElementById(id).onclick = function()

{code} Adding event handler code to an onclick event document.getElementById(id).onchange = function()

{code} Adding event handler code to an onchange event

object.onload = function() {code} event occurs when an

object has been loaded.

3.3 HTML DOM - Elements

 Finding HTML Element by Id

 Finding HTML Elements by Tag Name

 Finding HTML Elements by Class Name

 Finding HTML Elements by CSS Selectors

3.4 HTML DOM - Changing HTML

 Changing HTML Content

 Changing the Value of an Attribute

 Dynamic HTML content

 document.write()

3.5 HTML DOM - Changing CSS

 To change the style of an HTML element, use this syntax:

3.6 HTML DOM Events

3.6.1 Reacting to Events

3.6.2 HTML Event Attributes

3.6.3 Assign Events Using the HTML DOM

3.6.4 The onload Event

3.6.5 The onclick Event

3.6.6 The onchange Event

3.6.7 The onmouseover and onmouseout Events3.6.8 Remove Events listener

3.6.1 Reacting to Events

 A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element

 Examples of HTML events:

– When a user clicks the mouse

– When a web page has loaded

– When an image has been loaded

– When the mouse moves over an element

– When an input field is changed

– When an HTML form is submitted

– When a user strokes a key

3.6.2 HTML Event Attributes

 To assign events to HTML elements you can use event attributes Ex: onclick, onchange, onsubmit, …

3.6.3 Assign Events Using the HTML DOM

 The HTML DOM allows you to assign events to HTML

elements using JavaScript

3.6.4 The onload Event

 The onload event is triggered when the user enters the page

3.6.5 The onclick Event

 Use onclick or addEventListener method to assign click event

to HTML elements

3.6.6 The onchange Event

 The onchange event is fired when value of an input field changed

3.6.7 The onmouseover and onmouseout Events

 The onmouseover and onmouseout events can be used to trigger a function when the user mouses over or out of an HTML element

3.6.8 Remove Events listener

4 Cookies & Web Storage

4.1 Cookies

 What are Cookies?

– Cookies are data, stored in small text files, on your computer.

– When a web server has sent a web page to a browser, the connection

is shut down, and the server forgets everything about the user.

– Cookies were invented to solve the problem " how to remember

information about the user ":

• When a user visits a web page, his/her name can be stored in a cookie.

• Next time the user visits the page, the cookie "remembers" his/her name.

 JavaScript can create, read, and delete cookies with the

document.cookie property

 Create a Cookie with JavaScript

 Read a Cookie with JavaScript

document.cookie will return all cookies in one string much like: cookie1=value; cookie2=value; cookie3=value;

 Change a Cookie with JavaScript

The same way as you create the cookie.

 Delete a Cookie with JavaScript

Set the expires parameter to a past date.

 Example

4.2 localStorage Object

 The localStorage object stores the data with no expiration date The data will not be deleted when the browser is closed

4.3 sessionStorage Object

 The sessionStorage object is similar to the localStorage object, but

it stores the data for only one session The data is deleted when the user closes the specific browser tab

4.4 Cookies vs Local Storage vs

Session Storage

Cookies Local Storage Session Storage

Accessible from Any windows Any windows Same tab

Storage Location Browser & Server Browser only Browser only

5.1 Refreshing Page

 Use location.reload() method to refresh the page

5.2 Redirecting Page

 Use location.href property to redirect to another page

5.3 Opening in new Tab

 window.open Cannot Reliably Open Popups in a New Tab in All Browsers Different browsers implement the behavior of window.open in different ways

THE END